@snack-uikit/modal NPM | npm.io

0.9.21 • Published 3 days ago

Install

Weekly downloads

-

License

Apache-2.0

Repository

Last release

3 days ago

Modal

Installation

npm i @snack-uikit/modal

Пакет экспортирует 2 компонента:

Modal - компонент модального окна с определенным поведением и параметрами
ModalCustom - конструктор модального окна, позволяющий собрать компонент самостоятельно Содержит в себе дополнительные компоненты:
- ModalCustom.Header
- ModalCustom.Body
- ModalCustom.Footer

ModalCustom

Props

name	type	default value	description
children*	`ReactNode`	-	Контент
onClose*	`() => void`	-	Колбек закрытия компонента.
open*	`boolean`	-	Управляет состоянием показан/не показан.
mode	enum Mode: `"regular"`, `"aggressive"`, `"forced"`	regular	Режим отображения модального окна: - `Regular` - есть кнопка закрытия, клик на оверлей и нажатие кнопки `Esc` закрывают модалку - `Aggressive` - есть кнопка закрытия, но выключен клик на оверлей и не работает закрытие по клавише `Esc` - `Forced` - закрыть модальное окно можно только по нажатию на кнопку действия в нижней части
size	enum Size: `"s"`, `"m"`, `"l"`	s	Размер модального окна
className	`string`	-	CSS-класс

ModalCustom.Header

Props

name	type	default value	description
title*	`ReactNode`	-	Заголовок модального окна
titleTooltip	`ReactNode`	-	Тултип для заголовка
subtitle	`ReactNode`	-	Подзаголовок
picture	`JSXElementConstructor<{ size?: number; className?: string; }> \\| ModalHeaderImage`	-	Можно передать иконку из пакета `@snack-uikit/icon-predefined` или путь к картинке и атрибут `alt`
align	enum ContentAlign: `"default"`, `"center"`	-	Выравнивание контента
className	`string`	-	CSS-класс

ModalCustom.Body

Props

name	type	default value	description
content*	`ReactNode`	-	Содержимое модального окна
align	enum ContentAlign: `"default"`, `"center"`	-	Выравнивание контента
className	`string`	-	CSS-класс

ModalCustom.Footer

Props

name	type	default value	description
actions*	`ReactNode`	-	Параметр для передачи кнопок
disclaimer	`ReactNode`	-	Параметр для небольшого текста под кнопками
align	enum Align: `"vertical"`, `"default"`, `"center"`	-	Выравнивание контента
className	`string`	-	CSS-класс

Modal

Props

name	type	default value	description
approveButton*	`Omit<ButtonFilledProps, "data-test-id" \\| "size">`	-	Основная кнопка действия
title*	`string`	-	Заголовок модального окна
onClose*	`() => void`	-	Колбек закрытия компонента.
open*	`boolean`	-	Управляет состоянием показан/не показан.
mode	enum Mode: `"regular"`, `"aggressive"`, `"forced"`	regular	Режим отображения модального окна: - `Regular` - есть кнопка закрытия, клик на оверлей и нажатие кнопки `Esc` закрывают модалку - `Aggressive` - есть кнопка закрытия, но выключен клик на оверлей и не работает закрытие по клавише `Esc` - `Forced` - закрыть модальное окно можно только по нажатию на кнопку действия в нижней части
className	`string`	-	CSS-класс
titleTooltip	`ReactNode`	-	Всплывающая подсказка для заголовка
subtitle	`string`	-	Подзаголовок
content	`ReactNode`	-	Содержимое модального окна
cancelButton	`Omit<ButtonOutlineProps, "data-test-id" \\| "size">`	-	Кнопка отмены
additionalButton	`Omit<ButtonSimpleProps, "data-test-id" \\| "size">`	-	Вторая кнопка действия
disclaimer	`{ text: string; link?: Pick<LinkProps, "text" \\| "href" \\| "target">; }`	-	Небольшой текст под кнопками футера с возможностью передать дополнительно ссылку
size	"s" \| "m" \| "l"	s	Размер
align	enum Align: `"vertical"`, `"default"`, `"center"`	default	Выравнивание, для разных размеров доступны разные значения для size=`s` - все для size=`m` - align=`default \\| center` для size=`l` - align=`default`
picture	`JSXElementConstructor<{ size?: number; className?: string; }> \\| ModalHeaderImage`	-	Можно передать иконку из пакета `@snack-uikit/icon-predefined`, или путь к картинке и атрибут `alt`

@snack-uikit/button @snack-uikit/icon-predefined @snack-uikit/icons @snack-uikit/link @snack-uikit/scroll @snack-uikit/tooltip @snack-uikit/truncate-string @snack-uikit/typography @snack-uikit/utils classnames react-modal

@everything-registry/sub-chunk-847

0.9.21-preview-8bb3334c.0

3 days ago

3 days ago

16 days ago

18 days ago

0.9.19-preview-cb79db34.0

19 days ago

0.9.19-preview-7a18c2ee.0

29 days ago

0.9.19-preview-08779a44.0

29 days ago

0.9.19-preview-5b75040d.0

29 days ago

0.9.19-preview-80576138.0

1 month ago

0.9.19-preview-69abc1d3.0

1 month ago

0.9.19-preview-2855fb42.0

1 month ago

0.9.19-preview-0a44b2fc.0

1 month ago

2 months ago

0.9.18-preview-ed4b1f94.0

2 months ago

2 months ago

0.9.17-preview-1fcf96b1.0

2 months ago

2 months ago

0.9.16-preview-f9c5749b.0

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

0.9.13-preview-84a92753.0

3 months ago

0.9.13-preview-778a0ef6.0

3 months ago

0.9.13-preview-2484f987.0

3 months ago

3 months ago

0.9.12-preview-3cdd8d31.0

3 months ago

0.9.11-preview-993a9cfb.0

3 months ago

3 months ago

0.9.10-preview-ff0b5a40.0

3 months ago

3 months ago

3 months ago

3 months ago

0.9.7-preview-3f90b7f1.0

3 months ago

4 months ago

4 months ago

4 months ago

5 months ago

0.9.3-preview-00fa1de0.0

5 months ago

0.9.3-preview-61681fec.0

5 months ago

0.9.3-preview-76eafcdd.0

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

0.7.9-preview-85c5f47b.0

5 months ago