@snack-uikit/drawer v0.11.2
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-класс |
7 months ago
5 months ago
5 months ago
3 months ago
4 months ago
4 months ago
5 months ago
4 months ago
4 months ago
7 months ago
1 month ago
3 months ago
5 months ago
2 months ago
8 months ago
6 months ago
5 months ago
7 months ago
1 month ago
4 months ago
7 months ago
8 months ago
5 months ago
8 months ago
8 months ago
8 months ago
7 months ago
7 months ago
7 months ago
5 months ago
2 months ago
7 months ago
7 months ago
7 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
3 months ago
5 months ago
2 months ago
5 months ago
2 months ago
4 months ago
4 months ago
3 months ago
6 months ago
6 months ago
4 months ago
5 months ago
5 months ago
4 months ago
1 month ago
8 months ago
4 months ago
7 months ago
4 months ago
3 months ago
3 months ago
4 months ago
1 month ago
4 months ago
4 months ago
4 months ago
3 months ago
4 months ago
6 months ago
1 month ago
5 months ago
6 months ago
2 months ago
6 months ago
5 months ago
7 months ago
2 months ago
5 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
1 year ago
11 months ago
11 months ago
10 months ago
10 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
11 months ago
1 year ago
10 months ago
12 months ago
1 year ago
10 months ago
1 year ago
1 year ago
11 months ago
1 year ago
11 months ago
1 year ago
1 year 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
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago