Компонент Modal для Angular | ng-hub-ui-modal
Доступный компонент modal для Angular с наложением, полноэкранным режимом, шаблонами, обработкой клавиатуры и CSS-переменными для standalone-приложений.
Справочник API
Вот полный контракт modal: всё, что можно привязать, прослушать, спроецировать и тематизировать, собрано в одном месте. Подключите то, что нужно, и оформите так, как хотите — это standalone и дружит с сигналами.
Входные свойства
Настройте modal с помощью 14 входных свойств. Привязывайте их, как любой @Input в Angular.
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
animation | boolean | — | Если true, открытие и закрытие modal будут анимированы. По умолчанию: true |
backdrop | boolean | "static" | — | Если true, будет создан элемент backdrop. В качестве альтернативы укажите "static" для backdrop, который не закрывает modal при клике. По умолчанию: true |
centered | boolean | — | Если true, modal будет центрирован по вертикали. По умолчанию: false |
placement | HubModalPlacement | — | Управляет тем, где размещается modal в области просмотра. По умолчанию: HubModalPlacement.Center |
keyboard | boolean | — | Если true, modal будет закрыт при нажатии клавиши Escape. По умолчанию: true |
closeOnNavigation | boolean | — | Если true, modal будет закрыт, когда пользователь переходит назад в истории браузера (history.back(), кнопка «Назад» браузера). По умолчанию: true |
size | "sm" | "lg" | "xl" | string | — | Размер окна modal |
windowClass | string | — | Пользовательский класс, добавляемый к окну modal |
backdropClass | string | — | Пользовательский класс, добавляемый к backdrop modal |
dismissSelector | string | — | Пользовательский селектор для элементов, которые могут вызвать закрытие (dismiss) окна modal. По умолчанию: "[data-dismiss=\"modal\"]" |
closeSelector | string | — | Пользовательский селектор для элементов, которые могут вызвать закрытие (close) окна modal. По умолчанию: "[data-close=\"modal\"]" |
headerSelector | string | — | Пользовательский селектор для элемента заголовка окна modal |
footerSelector | string | — | Пользовательский селектор для элемента подвала окна modal |
data | any | — | Дополнительные данные, которые необходимо передать окну modal при его открытии |
События
События пока не задокументированы.
Шаблоны
Сделайте его своим — 1 слотов шаблона позволяют проецировать собственную разметку.
| Имя | Описание | Пример |
|---|---|---|
Modal Template | Ссылка на шаблон, которую можно передать в modal service | <ng-template #modalTemplate let-close="close" let-dismiss="dismiss">
<div class="modal-header">
<h4 class="modal-title">Modal Title</h4>
</div>
<div class="modal-body">
Modal content goes here
</div>
<div class="modal-footer">
<button class="btn btn-secondary" (click)="dismiss()">Cancel</button>
<button class="btn btn-primary" (click)="close('result')">OK</button>
</div>
</ng-template> |
CSS-переменные
Тематизируйте каждый пиксель с помощью 17 CSS-переменных. Переопределите их в :root или ограничьте их областью обёртки.
Базовые переменные модального окна
Основные переменные стилей для структуры и позиционирования модального окна
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--bs-modal-zindex | 1055 | number | Z-index у modal |
--bs-modal-width | 500px | length | Ширина modal по умолчанию |
--bs-modal-padding | 1rem | length | Отступы вокруг содержимого modal |
--bs-modal-margin | 0.5rem | length | Внешние отступы вокруг диалога modal |
Внешний вид модального окна
Переменные, управляющие цветами, границами и визуальными эффектами модального окна
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--bs-modal-color | var(--bs-body-color) | color | Цвет текста содержимого modal |
--bs-modal-bg | var(--bs-body-bg) | color | Цвет фона содержимого modal |
--bs-modal-border-color | var(--bs-border-color-translucent) | color | Цвет рамки modal |
--bs-modal-border-width | var(--bs-border-width) | border | Толщина рамки modal |
--bs-modal-border-radius | var(--bs-border-radius-lg) | border | Радиус скругления рамки modal |
--bs-modal-box-shadow | 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) | shadow | Тень (box shadow) modal |
Заголовок модального окна
Переменные стилей для секции заголовка модального окна
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--bs-modal-header-padding-x | 1rem | length | Горизонтальные отступы заголовка modal |
--bs-modal-header-padding-y | 1rem | length | Вертикальные отступы заголовка modal |
--bs-modal-header-border-color | var(--bs-border-color) | color | Цвет рамки заголовка modal |
--bs-modal-header-border-width | 0 0 var(--bs-border-width) 0 | border | Толщина рамки заголовка modal |
Подвал модального окна
Переменные стилей для секции подвала модального окна
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--bs-modal-footer-gap | 0.5rem | length | Промежуток между элементами в подвале modal |
--bs-modal-footer-border-color | var(--bs-border-color) | color | Цвет рамки подвала modal |
--bs-modal-footer-border-width | var(--bs-border-width) 0 0 0 | border | Толщина рамки подвала modal |
Стилизация и тематизация
Примеры стилизации пока не задокументированы. В этом разделе будут рецепты кастомизации и примеры тематизации.