Angular 模态框组件 | ng-hub-ui-modal
无障碍的 Angular 模态框组件，支持堆叠、全屏模式、模板、键盘处理和 CSS 变量，适用于 standalone 应用。
样式
混入与样式
Override any of the `--hub-modal-*` design tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so the rest keep the component's defaults. Token-based and self-contained (no Bootstrap dependencies).
Theming with hub-modal-theme
| 混入 | 参数 | 描述 |
|---|---|---|
| Theming | ||
hub-modal-theme() | $accent--hub-modal-accent$accent-subtle--hub-modal-accent-subtle$accent-border--hub-modal-accent-border$accent-bar-width--hub-modal-accent-bar-width$bg--hub-modal-bg$color--hub-modal-color$title-color--hub-modal-title-color$border-color--hub-modal-border-color$border-width--hub-modal-border-width$border-radius--hub-modal-border-radius$box-shadow--hub-modal-box-shadow$max-width--hub-modal-max-width$header-padding-x--hub-modal-header-padding-x$header-padding-y--hub-modal-header-padding-y$header-gap--hub-modal-header-gap$header-border-color--hub-modal-header-border-color$body-padding-x--hub-modal-body-padding-x$body-padding-y--hub-modal-body-padding-y$footer-padding-x--hub-modal-footer-padding-x$footer-padding-y--hub-modal-footer-padding-y$footer-gap--hub-modal-footer-gap$footer-border-color--hub-modal-footer-border-color$backdrop-bg--hub-modal-backdrop-bg | One-call theming for `<hub-modal>` dialogs |
CSS 变量
用 87 个 CSS 变量为每一个像素设置主题。在 :root 处覆盖它们，或将其限定到某个容器范围内。
Modal
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| 变量 | 默认值 | 类型 | 描述 |
|---|---|---|---|
--hub-modal-zindex | var(--hub-sys-zindex-modal, 1055) | number | Modal layer z-index |
--hub-modal-backdrop-zindex | calc(var(--hub-modal-zindex, var(--hub-sys-zindex-modal, 1055)) - 1) | number | Backdrop layer z-index |
--hub-modal-accent | var(--hub-sys-color-primary, #0d6efd) | color | Semantic accent (opt-in via variant); re-based per variant |
--hub-modal-accent-subtle | color-mix(in oklch, var(--hub-modal-accent) 12%, var(--hub-sys-surface-page, #ffffff)) | color | Variant tinted background (generated from the accent) |
--hub-modal-accent-border | color-mix(in oklch, var(--hub-modal-accent) 35%, var(--hub-sys-surface-page, #ffffff)) | color | Variant accent-tinted border (outer + header/footer rules) |
--hub-modal-accent-bar-width | var(--hub-ref-space-1, 0.25rem) | color | Thickness of the variant accent bar atop the dialog |
--hub-modal-title-color | var(--hub-modal-color, var(--hub-sys-text-primary, #212529)) | color | Title colour; a variant re-points it to the accent |
--hub-modal-width | auto | length | Base dialog width |
--hub-modal-max-width | 500px | length | Dialog max-width |
--hub-modal-color | var(--hub-sys-text-primary, #212529) | color | Base modal text color |
--hub-modal-bg | var(--hub-sys-surface-page, #ffffff) | color | Modal content background |
--hub-modal-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Modal border color |
--hub-modal-border-width | var(--hub-ref-border-width, 1px) | length | Modal border width |
--hub-modal-border-radius | var(--hub-ref-radius-lg, 0.5rem) | length | Modal outer border radius |
--hub-modal-inner-border-radius | calc( var(--hub-modal-border-radius, var(--hub-ref-radius-lg, 0.5rem)) - var( --hub-modal-border-width, var(--hub-ref-border-width, 1px) ) ) | length | Inner radius for header/footer caps |
--hub-modal-box-shadow | var(--hub-sys-shadow-lg, 0 1rem 3rem rgba(0,0,0,0.175)) | shadow | Modal elevation shadow |
--hub-modal-margin-y | 1.75rem | length | Vertical margin alias used by top/bottom margin tokens |
--hub-modal-margin-x | auto | length | Horizontal margin alias used by left/right margin tokens |
--hub-modal-margin-top | var(--hub-modal-margin-y, 1.75rem) | length | Dialog top margin |
--hub-modal-margin-right | var(--hub-modal-margin-x, auto) | length | Dialog right margin |
--hub-modal-margin-bottom | var(--hub-modal-margin-y, 1.75rem) | length | Dialog bottom margin |
--hub-modal-margin-left | var(--hub-modal-margin-x, auto) | length | Dialog left margin |
--hub-modal-margin-block | calc( var(--hub-modal-margin-top, 1.75rem) + var(--hub-modal-margin-bottom, 1.75rem) ) | length | Sum of vertical margins (used for scrollable min-height calc) |
--hub-modal-margin | var(--hub-modal-margin-top) var(--hub-modal-margin-right) var(--hub-modal-margin-bottom) var(--hub-modal-margin-left) | length | Dialog outer margin shorthand |
--hub-modal-placement-start-margin-top | var(--hub-modal-margin-top, 1.75rem) | length | Top margin when placement=start |
--hub-modal-placement-start-margin-right | auto | length | Right margin when placement=start |
--hub-modal-placement-start-margin-bottom | var(--hub-modal-margin-bottom, 1.75rem) | length | Bottom margin when placement=start |
--hub-modal-placement-start-margin-left | 0 | length | Left margin when placement=start (flush to edge) |
--hub-modal-placement-start-margin-block | calc( var(--hub-modal-placement-start-margin-top, 1.75rem) + var(--hub-modal-placement-start-margin-bottom, 1.75rem) ) | length | Sum of vertical margins for start placement |
--hub-modal-placement-start-margin | var(--hub-modal-placement-start-margin-top) var(--hub-modal-placement-start-margin-right) var(--hub-modal-placement-start-margin-bottom) var(--hub-modal-placement-start-margin-left) | length | Margin shorthand for start placement |
--hub-modal-placement-start-border-radius | 0 var(--hub-modal-border-radius, var(--hub-ref-radius-lg, 0.5rem)) var(--hub-modal-border-radius, var(--hub-ref-radius-lg, 0.5rem)) 0 | length | Border radius for start-anchored dialog (right corners rounded) |
--hub-modal-placement-end-margin-top | var(--hub-modal-margin-top, 1.75rem) | length | Top margin when placement=end |
--hub-modal-placement-end-margin-right | 0 | length | Right margin when placement=end (flush to edge) |
--hub-modal-placement-end-margin-bottom | var(--hub-modal-margin-bottom, 1.75rem) | length | Bottom margin when placement=end |
--hub-modal-placement-end-margin-left | auto | length | Left margin when placement=end |
--hub-modal-placement-end-margin-block | calc( var(--hub-modal-placement-end-margin-top, 1.75rem) + var(--hub-modal-placement-end-margin-bottom, 1.75rem) ) | length | Sum of vertical margins for end placement |
--hub-modal-placement-end-margin | var(--hub-modal-placement-end-margin-top) var(--hub-modal-placement-end-margin-right) var(--hub-modal-placement-end-margin-bottom) var(--hub-modal-placement-end-margin-left) | length | Margin shorthand for end placement |
--hub-modal-placement-end-border-radius | var( --hub-modal-border-radius, var(--hub-ref-radius-lg, 0.5rem) ) 0 0 var(--hub-modal-border-radius, var(--hub-ref-radius-lg, 0.5rem)) | length | Border radius for end-anchored dialog (left corners rounded) |
--hub-modal-placement-top-margin-top | 0 | length | Top margin when placement=top (flush to top edge) |
--hub-modal-placement-top-margin-right | auto | length | Right margin when placement=top |
--hub-modal-placement-top-margin-bottom | 0 | length | Bottom margin when placement=top |
--hub-modal-placement-top-margin-left | auto | length | Left margin when placement=top |
--hub-modal-placement-top-margin-block | calc( var(--hub-modal-placement-top-margin-top, 0px) + var(--hub-modal-placement-top-margin-bottom, 0px) ) | length | Sum of vertical margins for top placement |
--hub-modal-placement-top-margin | var(--hub-modal-placement-top-margin-top) var(--hub-modal-placement-top-margin-right) var(--hub-modal-placement-top-margin-bottom) var(--hub-modal-placement-top-margin-left) | length | Margin shorthand for top placement |
--hub-modal-placement-top-border-radius | 0 0 var(--hub-modal-border-radius, var(--hub-ref-radius-lg, 0.5rem)) var(--hub-modal-border-radius, var(--hub-ref-radius-lg, 0.5rem)) | length | Border radius for top-anchored dialog (bottom corners rounded) |
--hub-modal-placement-bottom-margin-top | 0 | length | Top margin when placement=bottom |
--hub-modal-placement-bottom-margin-right | auto | length | Right margin when placement=bottom |
--hub-modal-placement-bottom-margin-bottom | 0 | length | Bottom margin when placement=bottom (flush to bottom edge) |
--hub-modal-placement-bottom-margin-left | auto | length | Left margin when placement=bottom |
--hub-modal-placement-bottom-margin-block | calc( var(--hub-modal-placement-bottom-margin-top, 0px) + var(--hub-modal-placement-bottom-margin-bottom, 0px) ) | length | Sum of vertical margins for bottom placement |
--hub-modal-placement-bottom-margin | var(--hub-modal-placement-bottom-margin-top) var(--hub-modal-placement-bottom-margin-right) var(--hub-modal-placement-bottom-margin-bottom) var(--hub-modal-placement-bottom-margin-left) | length | Margin shorthand for bottom placement |
--hub-modal-placement-bottom-border-radius | var( --hub-modal-border-radius, var(--hub-ref-radius-lg, 0.5rem) ) var(--hub-modal-border-radius, var(--hub-ref-radius-lg, 0.5rem)) 0 0 | length | Border radius for bottom-anchored dialog (top corners rounded) |
--hub-modal-header-padding-x | var(--hub-modal-padding-x) | length | Header horizontal padding |
--hub-modal-header-padding-y | var(--hub-modal-padding-y) | length | Header vertical padding |
--hub-modal-header-gap | var(--hub-ref-space-2, 0.5rem) | length | Header content gap |
--hub-modal-header-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Header bottom border color |
--hub-modal-header-border-width | var(--hub-ref-border-width, 1px) | length | Header bottom border width |
--hub-modal-title-font-size | var(--hub-ref-font-size-lg, 1.25rem) | length | Modal title font size |
--hub-modal-title-font-weight | var(--hub-ref-font-weight-medium, 500) | number | Modal title font weight |
--hub-modal-title-line-height | var(--hub-ref-line-height-base, 1.5) | number | Modal title line-height |
--hub-modal-title-margin-x | 0 | length | Title horizontal margin |
--hub-modal-title-margin-y | 0 | length | Title vertical margin |
--hub-modal-body-padding-x | var(--hub-modal-padding-x) | length | Body horizontal padding |
--hub-modal-body-padding-y | var(--hub-modal-padding-y) | length | Body vertical padding |
--hub-modal-footer-padding-x | var(--hub-modal-padding-x) | length | Footer horizontal padding |
--hub-modal-footer-padding-y | var(--hub-modal-padding-y) | length | Footer vertical padding |
--hub-modal-footer-gap | var(--hub-ref-space-2, 0.5rem) | length | Footer actions gap |
--hub-modal-footer-bg | var(--hub-modal-bg, var(--hub-sys-surface-page, #ffffff)) | color | Footer background |
--hub-modal-footer-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Footer top border color |
--hub-modal-footer-border-width | var(--hub-ref-border-width, 1px) | length | Footer top border width |
--hub-modal-close-color | var(--hub-sys-text-primary, #212529) | color | Close button icon color |
--hub-modal-close-size | var(--hub-ref-font-size-lg, 1.25rem) | length | Close button font-size (controls icon size) |
--hub-modal-close-line-height | 1 | number | Close button line-height |
--hub-modal-close-opacity | 0.5 | number | Close button base opacity |
--hub-modal-close-hover-opacity | 0.75 | number | Close button hover/focus opacity |
--hub-modal-backdrop-bg | var(--hub-ref-color-black, #000000) | color | Backdrop background color |
--hub-modal-backdrop-opacity | var(--hub-sys-opacity-50, 0.5) | number | Backdrop visible opacity |
--hub-modal-backdrop-opacity-hidden | var(--hub-sys-opacity-0, 0) | number | Backdrop opacity when hidden (before fade-in) |
--hub-modal-backdrop-transition | opacity 0.15s linear | transition | Backdrop fade transition |
--hub-modal-fade-transform | translate(0, -50px) | string | Dialog transform at fade start |
--hub-modal-show-transform | none | string | Dialog transform when shown |
--hub-modal-transition | var(--hub-sys-transition-base, all 0.2s ease-in-out) | transition | Dialog transition curve/duration |
--hub-modal-scale-transform | scale(1.02) | string | Dialog scale in static backdrop bump |
--hub-modal-close-padding-x | 0 | length | Close button horizontal padding |
--hub-modal-close-padding-y | 0 | length | Close button vertical padding |
--hub-modal-padding-x | var(--hub-ref-space-3, 1rem) | length | Dialog body horizontal padding |
--hub-modal-padding-y | var(--hub-ref-space-3, 1rem) | length | Dialog body vertical padding |