0.16.3 • Published 2 months ago

@snack-uikit/modal v0.16.3

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
2 months ago

Modal

Installation

npm i @snack-uikit/modal

Changelog

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

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

ModalCustom

Props

nametypedefault valuedescription
children*ReactNode-Контент
onClose*() => void-Колбек закрытия компонента.
open*boolean-Управляет состоянием показан/не показан.
modeenum Mode: "regular", "aggressive", "forced"regularРежим отображения модального окна: - Regular - есть кнопка закрытия, клик на оверлей и нажатие кнопки Esc закрывают модалку - Aggressive - есть кнопка закрытия, но выключен клик на оверлей и не работает закрытие по клавише Esc - Forced - закрыть модальное окно можно только по нажатию на кнопку действия в нижней части
sizeenum Size: "s", "m", "l"sРазмер модального окна
classNamestring-CSS-класс

ModalCustom.Header

Props

nametypedefault valuedescription
title*ReactNode-Заголовок модального окна
titleTooltipReactNode-Тултип для заголовка
subtitleReactNode-Подзаголовок
pictureJSXElementConstructor<{ size?: number; className?: string; }> \| ModalHeaderImage-Можно передать иконку из пакета @snack-uikit/icon-predefined или путь к картинке и атрибут alt
alignenum ContentAlign: "default", "center"-Выравнивание контента
classNamestring-CSS-класс

ModalCustom.Body

Props

nametypedefault valuedescription
content*ReactNode-Содержимое модального окна
alignenum ContentAlign: "default", "center"-Выравнивание контента
classNamestring-CSS-класс

ModalCustom.Footer

Props

nametypedefault valuedescription
actions*ReactNode-Параметр для передачи кнопок
disclaimerReactNode-Параметр для небольшого текста под кнопками
alignenum Align: "vertical", "default", "center"-Выравнивание контента
classNamestring-CSS-класс

Modal

Props

nametypedefault valuedescription
approveButton*Omit<ButtonFilledProps, "data-test-id" \| "size">-Основная кнопка действия
title*string-Заголовок модального окна
onClose*() => void-Колбек закрытия компонента.
open*boolean-Управляет состоянием показан/не показан.
modeenum Mode: "regular", "aggressive", "forced"regularРежим отображения модального окна: - Regular - есть кнопка закрытия, клик на оверлей и нажатие кнопки Esc закрывают модалку - Aggressive - есть кнопка закрытия, но выключен клик на оверлей и не работает закрытие по клавише Esc - Forced - закрыть модальное окно можно только по нажатию на кнопку действия в нижней части
classNamestring-CSS-класс
titleTooltipReactNode-Всплывающая подсказка для заголовка
subtitlestring-Подзаголовок
contentReactNode-Содержимое модального окна
cancelButtonOmit<ButtonOutlineProps, "data-test-id" \| "size">-Кнопка отмены
additionalButtonOmit<ButtonSimpleProps, "data-test-id" \| "size">-Вторая кнопка действия
disclaimer{ text: string; link?: Pick<LinkProps, "text" \| "href" \| "target">; }-Небольшой текст под кнопками футера с возможностью передать дополнительно ссылку
truncate{ title?: number; subtitle?: number; }'{ title: 1; subtitle: 2; }'Максимальное кол-во строк - title - в заголовке - subtitle - в подзаголовке
size"s" | "m" | "l"sРазмер
alignenum Align: "vertical", "default", "center"defaultВыравнивание, для разных размеров доступны разные значения для size=s - все для size=m - align=default \| center для size=l - align=default
pictureJSXElementConstructor<{ 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/utilsclassnamesreact-modal
@everything-registry/sub-chunk-847
0.15.7-preview-ef227a87.0

4 months ago

0.14.13

6 months ago

0.14.12

6 months ago

0.14.11

7 months ago

0.14.10

7 months ago

0.16.4-preview-aba585d4.0

2 months ago

0.16.3-preview-cf198ddd.0

3 months ago

0.14.16-preview-20f136a2.0

5 months ago

0.14.6-preview-4d81b82b.0

8 months ago

0.15.1-preview-04b740ca.0

5 months ago

0.15.2-preview-6a400eba.0

5 months ago

0.14.17

5 months ago

0.14.16

5 months ago

0.14.8-preview-f818b9e9.0

8 months ago

0.14.15

6 months ago

0.14.14

6 months ago

0.14.16-preview-e840ab81.0

6 months ago

0.14.19

5 months ago

0.14.18

5 months ago

0.15.7-preview-8c84e870.0

4 months ago

0.14.10-preview-38cf19d9.0

7 months ago

0.15.1-preview-a0074739.0

5 months ago

0.15.1-preview-27ae78ba.0

5 months ago

0.15.1-preview-9cd1b89a.0

5 months ago

0.14.15-preview-d9538faf.0

6 months ago

0.14.16-preview-74c13173.0

5 months ago

0.14.16-preview-a2a64ca4.0

6 months ago

0.14.17-preview-3566ac3d.0

5 months ago

0.14.16-preview-b5e187d5.0

6 months ago

0.14.5

9 months ago

0.14.6

8 months ago

0.14.7

8 months ago

0.14.8

8 months ago

0.14.9

8 months ago

0.14.16-preview-ed010264.0

6 months ago

0.14.2

9 months ago

0.15.1-preview-0d45398a.0

5 months ago

0.14.3

9 months ago

0.14.4

9 months ago

0.14.6-preview-042f5ed6.0

8 months ago

0.14.8-preview-95f36d41.0

8 months ago

0.14.16-preview-d479ae3f.0

5 months ago

0.14.19-preview-bc9ca5dd.0

5 months ago

0.14.12-preview-08c7f775.0

6 months ago

0.16.4-preview-050dc1ef.0

2 months ago

0.15.5-preview-790689b4.0

5 months ago

0.14.6-preview-53bd8747.0

8 months ago

0.14.10-preview-a2f98ef7.0

7 months ago

0.14.16-preview-922d2ce6.0

6 months ago

0.15.4

5 months ago

0.15.5

5 months ago

0.15.6

5 months ago

0.14.6-preview-7eeb1bc1.0

8 months ago

0.16.4-preview-9998cc23.0

2 months ago

0.15.7-preview-8cf89a18.0

4 months ago

0.15.0

5 months ago

0.14.3-preview-1bd2190e.0

9 months ago

0.15.1

5 months ago

0.15.2

5 months ago

0.14.12-preview-913f1101.0

7 months ago

0.15.3

5 months ago

0.14.16-preview-f228eb9d.0

6 months ago

0.14.6-preview-20b0f520.0

8 months ago

0.15.6-preview-f475624a.0

5 months ago

0.14.6-preview-baf754b1.0

8 months ago

0.16.4-preview-2df7e7b5.0

2 months ago

0.15.7-preview-352c392a.0

4 months ago

0.14.20-preview-8b563728.0

5 months ago

0.16.3-preview-2f8a726b.0

3 months ago

0.14.16-preview-f7ec3fa7.0

6 months ago

0.15.7-preview-3e55020c.0

4 months ago

0.16.3-preview-845a4e8b.0

3 months ago

0.15.6-preview-ccf49ef5.0

5 months ago

0.14.16-preview-abb5f7dc.0

5 months ago

0.16.3

3 months ago

0.14.15-preview-704e8703.0

6 months ago

0.14.2-preview-9a7f316b.0

9 months ago

0.16.0

4 months ago

0.16.1

4 months ago

0.16.2

3 months ago

0.16.4-preview-e4e8fc7b.0

2 months ago

0.14.16-preview-9ca6ecbf.0

6 months ago

0.14.10-preview-bb2cdfb8.0

7 months ago

0.16.4-preview-69fcfa33.0

2 months ago

0.15.7-preview-a01e5edb.0

4 months ago

0.14.6-preview-379c4ff3.0

8 months ago

0.14.13-preview-985e2518.0

6 months ago

0.13.0

10 months ago

0.12.7-preview-ba12ca94.0

10 months ago

0.14.0

10 months ago

0.14.1

9 months ago

0.12.7-preview-71543426.0

10 months ago

0.12.7-preview-e5174ad1.0

10 months ago

0.12.7-preview-efee0b7d.0

10 months ago

0.12.7-preview-fc25f08d.0

10 months ago

0.12.7-preview-3f66d646.0

10 months ago

0.12.7-preview-1f246c4a.0

10 months ago

0.12.7-preview-d96c83e8.0

10 months ago

0.12.7-preview-c9b51578.0

10 months ago

0.12.7-preview-7adaddbe.0

10 months ago

0.12.5-preview-e9b53c27.0

11 months ago

0.12.5

11 months ago

0.12.6

11 months ago

0.9.22-preview-a5a79952.0

1 year ago

0.9.24-preview-673c1a37.0

1 year ago

0.9.23-preview-69a8374f.0

1 year ago

0.12.1-preview-8898cdde.0

1 year ago

0.11.4-preview-a882321d.0

1 year ago

0.11.2-preview-d4831186.0

1 year ago

0.11.0

1 year ago

0.11.1

1 year ago

0.11.2

1 year ago

0.11.3

1 year ago

0.11.4

1 year ago

0.9.23-preview-c6cf83f0.0

1 year ago

0.9.23-preview-b98b3b80.0

1 year ago

0.11.1-preview-767c086a.0

1 year ago

0.12.4-preview-94780dcd.0

11 months ago

0.12.1-preview-3201b907.0

1 year ago

0.11.1-preview-1a5a24ad.0

1 year ago

0.9.23-preview-0df2fefa.0

1 year ago

0.12.2-preview-31958b7e.0

12 months ago

0.11.3-preview-cb303567.0

1 year ago

0.9.22-preview-d74371e8.0

1 year ago

0.12.3-preview-963c3343.0

11 months ago

0.10.1

1 year ago

0.12.0

1 year ago

0.10.2

1 year ago

0.12.1

1 year ago

0.10.3

1 year ago

0.12.2

12 months ago

0.12.3

11 months ago

0.12.4

11 months ago

0.9.23

1 year ago

0.10.3-preview-47f53a8c.0

1 year ago

0.11.1-preview-a66ce7a9.0

1 year ago

0.10.0

1 year ago

0.9.22

1 year ago

0.10.3-preview-b7b8cddc.0

1 year ago

0.11.4-preview-b09d21bf.0

1 year ago

0.9.21-preview-8bb3334c.0

1 year ago

0.9.21

1 year ago

0.9.20

1 year ago

0.9.19

1 year ago

0.9.19-preview-cb79db34.0

1 year ago

0.9.19-preview-7a18c2ee.0

1 year ago

0.9.19-preview-08779a44.0

1 year ago

0.9.19-preview-5b75040d.0

1 year ago

0.9.19-preview-80576138.0

1 year ago

0.9.19-preview-69abc1d3.0

1 year ago

0.9.19-preview-2855fb42.0

1 year ago

0.9.19-preview-0a44b2fc.0

1 year ago

0.9.18

1 year ago

0.9.18-preview-ed4b1f94.0

1 year ago

0.9.17

1 year ago

0.9.17-preview-1fcf96b1.0

1 year ago

0.9.16

1 year ago

0.9.16-preview-f9c5749b.0

1 year ago

0.9.15

1 year ago

0.9.14

1 year ago

0.9.13

1 year ago

0.9.12

1 year ago

0.9.13-preview-84a92753.0

1 year ago

0.9.13-preview-778a0ef6.0

1 year ago

0.9.13-preview-2484f987.0

1 year ago

0.9.11

1 year ago

0.9.12-preview-3cdd8d31.0

1 year ago

0.9.11-preview-993a9cfb.0

1 year ago

0.9.10

2 years ago

0.9.10-preview-ff0b5a40.0

2 years ago

0.9.8

2 years ago

0.9.9

2 years ago

0.9.7

2 years ago

0.9.7-preview-3f90b7f1.0

2 years ago

0.9.6

2 years ago

0.9.5

2 years ago

0.9.4

2 years ago

0.9.3

2 years ago

0.9.3-preview-00fa1de0.0

2 years ago

0.9.3-preview-61681fec.0

2 years ago

0.9.3-preview-76eafcdd.0

2 years ago

0.9.2

2 years ago

0.9.1

2 years ago

0.9.0

2 years ago

0.8.1

2 years ago

0.8.0

2 years ago

0.7.9-preview-85c5f47b.0

2 years ago