Portal и рендеринг оверлеев для Angular | ng-hub-ui-portal
Библиотека portal для Angular для динамического рендеринга компонентов, шаблонов и оверлеев вне текущего дерева DOM с контролем позиционирования.
Справочник API
Вот полный контракт portal: всё, что можно привязать, прослушать, спроецировать и тематизировать, собрано в одном месте. Подключите то, что нужно, и оформите так, как хотите — это standalone и дружит с сигналами.
Входные свойства
Настройте portal с помощью 15 входных свойств. Привязывайте их, как любой @Input в Angular.
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
animation | boolean | — | Если true, открытие и закрытие portal будут анимированы. По умолчанию: true |
ariaLabelledBy | string | — | Значение атрибута `aria-labelledby`, устанавливаемое для окна portal |
ariaDescribedBy | string | — | Значение атрибута `aria-describedby`, устанавливаемое для окна portal |
beforeDismiss | () => boolean | Promise<boolean> | — | Callback непосредственно перед закрытием (dismiss) portal. Верните false, чтобы предотвратить закрытие. |
container | string | HTMLElement | — | Селектор, указывающий элемент, к которому должны добавляться все новые окна portal. Если не указан, будет `body`. |
injector | Injector | — | `Injector`, используемый для содержимого portal для включения внедрения зависимостей. |
keyboard | boolean | — | Если true, portal будет закрыт при нажатии клавиши Escape. По умолчанию: true |
scrollable | boolean | — | Прокручиваемое содержимое portal (false по умолчанию). |
windowClass | string | — | Пользовательский класс, добавляемый к окну portal для пользовательского стиля и позиционирования. |
portalDialogClass | string | — | Пользовательский класс, добавляемый к контейнеру диалога portal. |
portalContentClass | string | — | Пользовательский класс, добавляемый к обёртке содержимого portal. |
headerSelector | string | — | Пользовательский селектор для элемента заголовка окна portal. Полезен для нацеливания на определённые секции portal. |
footerSelector | string | — | Пользовательский селектор для элемента подвала окна portal. Полезен для нацеливания на определённые секции portal. |
dismissSelector | string | — | Пользовательский селектор для элементов, которые могут вызвать закрытие (dismiss) окна portal. По умолчанию: `[data-dismiss="portal"]` |
closeSelector | string | — | Пользовательский селектор для элементов, которые могут вызвать закрытие (close) окна portal. По умолчанию: `[data-close="portal"]` |
События
События пока не задокументированы.
Шаблоны
Сделайте его своим — 1 слотов шаблона позволяют проецировать собственную разметку.
| Имя | Описание | Пример |
|---|---|---|
Portal Template | Ссылка на шаблон, которую можно передать в HubPortal service для динамической отрисовки | <ng-template #portalTemplate>
<div class="portal-content">
<div class="portal-header">
<h4>Portal Title</h4>
<button data-dismiss="portal">×</button>
</div>
<div class="portal-body">
Portal content goes here
</div>
<div class="portal-footer">
<button data-dismiss="portal">Cancel</button>
<button data-close="portal">OK</button>
</div>
</div>
</ng-template>
<!-- Open the portal -->
<button (click)="portal.open(portalTemplate)">Open Portal</button> |
CSS-переменные
Тематизируйте каждый пиксель с помощью 15 CSS-переменных. Переопределите их в :root или ограничьте их областью обёртки.
Базовые переменные портала
Основные переменные стилизации для структуры и позиционирования portal
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--portal-zindex | 1050 | number | Z-index у наложения (overlay) portal |
--portal-padding | 1rem | length | Отступы по умолчанию для содержимого portal |
--portal-margin | 0.5rem | length | Внешние отступы вокруг диалога portal |
Внешний вид портала
Переменные, управляющие цветами, рамками и визуальными эффектами portal
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--portal-bg | #ffffff | color | Цвет фона содержимого portal |
--portal-color | #212529 | color | Цвет текста содержимого portal |
--portal-border-color | #dee2e6 | color | Цвет рамки portal |
--portal-border-width | 1px | border | Толщина рамки portal |
--portal-border-radius | 0.375rem | border | Радиус скругления углов portal |
--portal-box-shadow | 0 0.5rem 1rem rgba(0, 0, 0, 0.15) | shadow | Тень (box shadow) для возвышения portal |
Заголовок и подвал портала
Переменные стилизации для секций заголовка и подвала portal
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--portal-header-padding | 1rem | length | Отступы заголовка portal |
--portal-header-border-color | #dee2e6 | color | Цвет рамки заголовка portal |
--portal-footer-padding | 1rem | length | Отступы подвала portal |
--portal-footer-border-color | #dee2e6 | color | Цвет рамки подвала portal |
Подложка и оверлей
Переменные, управляющие внешним видом и поведением backdrop
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--portal-backdrop-bg | rgba(0, 0, 0, 0.5) | color | Цвет фона для backdrop portal |
--portal-backdrop-zindex | 1040 | number | Z-index у backdrop (должен быть меньше z-index у portal) |
Стилизация и тематизация
Примеры стилизации пока не задокументированы. В этом разделе будут рецепты кастомизации и примеры тематизации.