@snack-uikit/drawer v0.10.1
Drawer
Installation
npm i @snack-uikit/drawer
DrawerCustom
Компонент-конструктор
Props
| name | type | default value | description |
|---|---|---|---|
| onClose* | () => void | - | Колбэк закрытия |
| open* | boolean | - | Управление состоянием показан/не показан. |
| mode | enum Mode: "regular", "soft" | - | Режим отображения |
| position | enum Position: "right", "left" | - | Расположение открытого Drawer |
| className | string | - | CSS-класс для элемента с контентом |
| rootClassName | string | - | CSS-класс для корневого элемента |
| size | string \| number | - | Размер |
| push | boolean \| PushConfig | - | Смещение при открытии "вложенного" компонента |
| container | string \| HTMLElement | - | Контейнер в котором будет рендерится Drawer. По-умолчанию - body |
| nestedDrawer | ReactElement<DrawerCustomProps, string \| JSXElementConstructor<any>> | - | Вложенный Drawer |
Drawer
Готовый компонент Drawer
Props
| name | type | default value | description |
|---|---|---|---|
| title* | string | - | Заголовок |
| content* | ReactNode | - | Контент |
| onClose* | () => void | - | Колбэк закрытия |
| open* | boolean | - | Управление состоянием показан/не показан. |
| mode | enum Mode: "regular", "soft" | - | Режим отображения |
| position | enum Position: "right", "left" | - | Расположение открытого Drawer |
| className | string | - | CSS-класс для элемента с контентом |
| rootClassName | string | - | CSS-класс для корневого элемента |
| container | string \| HTMLElement | - | Контейнер в котором будет рендерится Drawer. По-умолчанию - body |
| titleTooltip | ReactNode | - | Тултип для заголовка |
| image | { src: string; alt: string; } | - | Изображение |
| subtitle | string | - | Подзаголовок |
| size | enum Size: "s", "m", "l" | - | Размер |
| approveButton | Omit<ButtonFilledProps, "size"> & { tooltip?: TooltipProps; } | - | Основная кнопка |
| cancelButton | Omit<ButtonOutlineProps, "size"> & { tooltip?: TooltipProps; } | - | Кнопка отмены |
| additionalButton | Omit<ButtonSimpleProps, "size"> & { tooltip?: TooltipProps; } | - | Дополнительная кнопка |
| nestedDrawer | ReactElement<DrawerProps, string \| JSXElementConstructor<any>> | - | Вложенный Drawer |
| truncate | { title?: number; subtitle?: number; } | '{ title: 1; subtitle: 2; }' | Максимальное кол-во строк - title - в заголовке - subtitle - в подзаголовке |
DrawerCustom.Header
Вспомогательный компонент для добавления "шапки" в DrawerCustom
Props
| name | type | required | default value | description |
|---|---|---|---|---|
| title | string | true | - | Заголовок |
| titleTooltip | ReactNode | false | - | Тултип для заголовка |
| subtitle | string | false | - | Подзаголовок |
| image | { src: string; alt: string; } | false | - | Изображение |
| className | string | false | - | CSS-класс |
DrawerCustom.Body
Вспомогательный компонент для добавления "тела" в DrawerCustom
Props
| name | type | required | default value | description |
|---|---|---|---|---|
| content | ReactNode | true | - | Контент |
| className | string | false | - | CSS-класс |
DrawerCustom.Footer
Вспомогательный компонент для добавления "футера" в DrawerCustom
Props
| name | type | required | default value | description |
|---|---|---|---|---|
| actions | ReactNode | true | - | Слот для добавления кнопок-действий |
| className | string | false | - | CSS-класс |
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
11 months ago
8 months ago
8 months ago
6 months ago
7 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
10 months ago
10 months ago
10 months ago
11 months ago
10 months ago
10 months ago
8 months ago
11 months ago
7 months ago
9 months ago
11 months ago
6 months ago
11 months ago
10 months ago
8 months ago
10 months ago
8 months ago
10 months ago
10 months ago
9 months ago
9 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago