@snack-uikit/drawer

Drawer

Installation

npm i @snack-uikit/drawer

Changelog

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-класс