Sheet

title
hideTopBar
allowHideOnContentScroll
import {Sheet} from '@gravity-ui/uikit';

Компонент Sheet (шторка) предназначен для использования в мобильных интерфейсах в качестве информационного или интерактивного элемента. Благодаря поддержке внутренней прокрутки и динамического изменения размеров в него можно помещать контент любого объема.

На мобильных устройствах Sheet можно перемещать, потянув за его основную часть или область свайпа. Для закрытия нужно провести вниз или коснуться области вне Sheet.

Использование

import React from 'react';
import {Button, Sheet} from '@gravity-ui/uikit';

const SheetExample = () => {
  const [visible, setVisible] = React.useState(false);

  return (
    <React.Fragment>
      <Button onClick={() => setVisible(true)}>Open Sheet</Button>
      <Sheet visible={visible} onClose={() => setVisible(false)} title="Content Sheet">
        Content
      </Sheet>
    </React.Fragment>
  );
};

Свойства

ИмяОписаниеТипЗначение по умолчанию
visibleУправляет видимостью Sheet.booleanfalse
allowHideOnContentScrollВключает возможность закрытия при свайпе вниз, если контент не прокручивается или прокручен до верха (content Node.scrollTop === 0).booleantrue
hideTopBarСкрывает верхнюю панель с элементом для изменения размера.boolean
idИдентификатор Sheet, используемый как хеш в URL. Необходимо задать разные значения id, если на странице несколько Sheet.stringmodal
titleЗаголовок окна Sheet.stringundefined
classNameHTML-атрибут class.stringundefined
contentClassNameHTML-атрибут class для контента шторки.stringundefined
swipeAreaClassNameHTML-атрибут class для области свайпа.stringundefined
onCloseОбработчик события закрытия.functionundefined
maxContentHeightCoefficientКоэффициент, определающий максимальную высоту шторки относительно высоты окна (диапазон 0-1)number0.9
alwaysFullHeightВысота Sheet всегда будет максимальнойbooleanundefined

API CSS

ИмяОписание
--g-sheet-content-paddingОтступы контента.