Portal и рендеринг оверлеев для Angular | ng-hub-ui-portal
Библиотека portal для Angular для динамического рендеринга компонентов, шаблонов и оверлеев вне текущего дерева DOM с контролем позиционирования.
Стили
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) |