Angular Portal and Overlay Rendering | ng-hub-ui-portal
Angular portal library for dynamic component, template and overlay rendering outside the current DOM tree with positioning control.
Styles
CSS variables
Theme every pixel with 15 CSS variables. Override them at :root or scope them to a wrapper.
Portal Base Variables
Core styling variables for portal structure and positioning
| Variable | Default | Type | Description |
|---|---|---|---|
--portal-zindex | 1050 | number | Z-index of the portal overlay |
--portal-padding | 1rem | length | Default padding for portal content |
--portal-margin | 0.5rem | length | Margin around portal dialog |
Portal Appearance
Variables controlling portal colors, borders, and visual effects
| Variable | Default | Type | Description |
|---|---|---|---|
--portal-bg | #ffffff | color | Background color of portal content |
--portal-color | #212529 | color | Text color of portal content |
--portal-border-color | #dee2e6 | color | Border color of portal |
--portal-border-width | 1px | border | Border width of portal |
--portal-border-radius | 0.375rem | border | Border radius of portal corners |
--portal-box-shadow | 0 0.5rem 1rem rgba(0, 0, 0, 0.15) | shadow | Box shadow for portal elevation |
Portal Header & Footer
Styling variables for portal header and footer sections
| Variable | Default | Type | Description |
|---|---|---|---|
--portal-header-padding | 1rem | length | Padding of portal header |
--portal-header-border-color | #dee2e6 | color | Border color of portal header |
--portal-footer-padding | 1rem | length | Padding of portal footer |
--portal-footer-border-color | #dee2e6 | color | Border color of portal footer |
Backdrop & Overlay
Variables controlling backdrop appearance and behavior
| Variable | Default | Type | Description |
|---|---|---|---|
--portal-backdrop-bg | rgba(0, 0, 0, 0.5) | color | Background color for portal backdrop |
--portal-backdrop-zindex | 1040 | number | Z-index of the backdrop (must be lower than portal z-index) |