样式

混入与样式

Override the most useful `--hub-nav-*` 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 their defaults. For any token not exposed here, set the `--hub-nav-*` custom property directly — this mixin is sugar for the common knobs, not a replacement for the full token surface.

Theming with hub-nav-theme

混入	参数	描述
Theming
`hub-nav-theme()`	`$accent--hub-nav-accent` `$bg--hub-nav-bg` `$color--hub-nav-color` `$border-color--hub-nav-border-color` `$gap--hub-nav-gap` `$padding-x--hub-nav-padding-x` `$padding-y--hub-nav-padding-y` `$item-color--hub-nav-item-color` `$item-active-bg--hub-nav-item-active-bg` `$item-active-color--hub-nav-item-active-color` `$item-border-radius--hub-nav-item-border-radius` `$item-font-size--hub-nav-item-font-size` `$item-padding-x--hub-nav-item-padding-x` `$item-padding-y--hub-nav-item-padding-y`	One-call token theming for `<hub-nav>`

CSS 变量

用 120 个 CSS 变量为每一个像素设置主题。在 :root 处覆盖它们，或将其限定到某个容器范围内。

Nav

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-nav-accordion-indent`	`var(--hub-ref-space-3, 1rem)`	length	垂直 accordion 模式下每个嵌套层级的左侧缩进。
`--hub-nav-accordion-transition`	`0.35s ease`	transition	Accordion expand/collapse transition
`--hub-nav-badge-bg`	`var(--hub-sys-color-danger, #dc3545)`	color	Badge background color
`--hub-nav-badge-border-radius`	`var(--hub-ref-radius-pill, 50rem)`	length	Badge corner radius
`--hub-nav-badge-color`	`var(--hub-ref-color-white, #fff)`	color	Badge text color
`--hub-nav-badge-font-size`	`var(--hub-ref-font-size-xs, 0.75rem)`	length	Badge font size
`--hub-nav-badge-padding-x`	`0.5em`	length	Badge horizontal padding
`--hub-nav-badge-padding-y`	`0.25em`	length	Badge vertical padding
`--hub-nav-accent`	`var(--hub-sys-color-primary, #0d6efd)`	color	Semantic accent — re-based per variant; drives the hover/active affordances
`--hub-nav-accent-subtle`	`color-mix(in oklch, var(--hub-nav-accent) 12%, var(--hub-sys-surface-page, #ffffff))`	color	Subtle accent tint — soft active/hover surface
`--hub-nav-bg`	`color-mix(in oklch, var(--hub-nav-accent) 5%, var(--hub-sys-surface-page, #fff))`	color	导航栏的背景颜色。
`--hub-nav-border-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	导航栏的边框颜色。
`--hub-nav-border-style`	`solid`	border	Navigation border style
`--hub-nav-border-width`	`1px`	length	Navigation border width
`--hub-nav-border-radius`	`0`	length	Corner radius of the nav bar surface
`--hub-nav-box-shadow`	`none`	shadow	Box shadow of the nav bar surface
`--hub-nav-brand-color`	`var(--hub-sys-text-primary, #212529)`	color	品牌的文本颜色。
`--hub-nav-brand-font-size`	`var(--hub-ref-font-size-lg, 1.25rem)`	length	品牌文本的字号。
`--hub-nav-brand-font-weight`	`var(--hub-ref-font-weight-semibold, 600)`	number	品牌文本的字重。
`--hub-nav-brand-padding-x`	`var(--hub-ref-space-2, 0.5rem)`	length	Brand horizontal padding
`--hub-nav-caret-color`	`currentColor`	color	Dropdown caret color
`--hub-nav-caret-size`	`0.3rem`	length	Dropdown caret size
`--hub-nav-color`	`var(--hub-sys-text-primary, #212529)`	color	导航的基础文本颜色。
`--hub-nav-dropdown-bg`	`var(--hub-sys-surface-elevated, #f8f9fa)`	color	下拉面板的背景颜色。
`--hub-nav-dropdown-border-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	下拉面板的边框颜色。
`--hub-nav-dropdown-border-radius`	`var(--hub-nav-item-border-radius, var(--hub-ref-radius-sm, 0.25rem))`	length	下拉面板的边框半径。
`--hub-nav-dropdown-color`	`var(--hub-sys-text-primary, #212529)`	color	Dropdown menu text color
`--hub-nav-dropdown-min-width`	`12rem`	length	下拉面板的最小宽度。
`--hub-nav-dropdown-padding-y`	`var(--hub-ref-space-2, 0.5rem)`	length	Dropdown menu vertical padding
`--hub-nav-dropdown-shadow`	`var(--hub-sys-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15))`	shadow	下拉面板的阴影。
`--hub-nav-dropdown-zindex`	`var(--hub-sys-zindex-dropdown, 1000)`	number	Dropdown menu z-index
`--hub-nav-gap`	`var(--hub-ref-space-1, 0.25rem)`	length	nav 项之间的间隙。
`--hub-nav-header-color`	`var(--hub-sys-text-muted, #6c757d)`	color	Section header text color
`--hub-nav-header-font-size`	`var(--hub-ref-font-size-sm, 0.875rem)`	length	Section header font size
`--hub-nav-header-font-weight`	`var(--hub-ref-font-weight-semibold, 600)`	number	Section header font weight
`--hub-nav-header-horizontal-padding-inline-start`	`2rem`	length	Horizontal header inline-start padding
`--hub-nav-header-margin-inline-start`	`var(--hub-ref-space-3, 1rem)`	length	Section header inline-start margin
`--hub-nav-header-margin-top`	`var(--hub-ref-space-3, 1rem)`	length	Section header top margin
`--hub-nav-header-padding-x`	`var(--hub-ref-space-3, 1rem)`	length	Section header horizontal padding
`--hub-nav-header-padding-y`	`var(--hub-ref-space-1, 0.25rem)`	length	Section header vertical padding
`--hub-nav-height`	`3.5rem`	length	导航栏的高度。
`--hub-nav-horizontal-items-justify`	`center`	string	Horizontal items justification
`--hub-nav-collapsed-justify`	`space-between`	string	justify-content of items when the nav is collapsed (opt-in hook)
`--hub-nav-horizontal-items-overflow-x`	`auto`	string	Horizontal items x-overflow
`--hub-nav-horizontal-items-overflow-y`	`hidden`	string	Horizontal items y-overflow
`--hub-nav-horizontal-padding-x`	`0`	length	Horizontal nav horizontal padding
`--hub-nav-horizontal-padding-y`	`0`	length	Horizontal nav vertical padding
`--hub-nav-horizontal-panel-padding-x`	`0`	length	Horizontal panel horizontal padding
`--hub-nav-horizontal-panel-padding-y`	`var(--hub-ref-space-2, 0.5rem)`	length	Horizontal panel vertical padding
`--hub-nav-horizontal-row-gap`	`0`	length	Horizontal nav row gap
`--hub-nav-icon-gap`	`var(--hub-ref-space-2, 0.5rem)`	length	图标与标签文本之间的间隙。
`--hub-nav-icon-size`	`var(--hub-ref-icon-size, 1em)`	length	导航项图标的尺寸。
`--hub-nav-item-active-bg`	`var(--hub-nav-accent-subtle)`	color	项处于激活状态时的背景颜色。
`--hub-nav-item-active-color`	`var(--hub-nav-accent)`	color	项处于激活状态时的文本颜色。
`--hub-nav-item-active-indicator-color`	`var(--hub-nav-accent)`	color	Active item indicator bar color
`--hub-nav-item-active-indicator-size`	`3px`	length	Active item indicator bar thickness
`--hub-nav-item-active-font-weight`	`var(--hub-ref-font-weight-semibold, 600)`	number	Active item font weight
`--hub-nav-item-border-radius`	`var(--hub-ref-radius-sm, 0.25rem)`	length	nav 项的边框半径。
`--hub-nav-item-color`	`var(--hub-sys-text-primary, #212529)`	color	nav 项的文本颜色。
`--hub-nav-item-disabled-color`	`var(--hub-sys-text-muted, #6c757d)`	color	禁用项的文本颜色。
`--hub-nav-item-disabled-opacity`	`var(--hub-sys-opacity-disabled, 0.65)`	number	禁用项的不透明度。
`--hub-nav-item-font-size`	`var(--hub-ref-font-size-base, 1rem)`	length	Nav item font size
`--hub-nav-item-font-weight`	`var(--hub-ref-font-weight-base, 400)`	number	Nav item font weight
`--hub-nav-item-hover-bg`	`color-mix(in oklch, var(--hub-nav-accent) 8%, var(--hub-sys-surface-page, #fff))`	color	悬停时的背景颜色。
`--hub-nav-item-hover-color`	`var(--hub-nav-accent)`	color	悬停时的文本颜色。
`--hub-nav-item-padding-x`	`var(--hub-nav-mobile-item-padding-inline, 0.75rem)`	length	nav 项内部的水平内边距。
`--hub-nav-item-padding-y`	`var(--hub-ref-space-2, 0.5rem)`	length	nav 项内部的垂直内边距。
`--hub-nav-item-transition`	`var(--hub-sys-transition-fast, all 0.15s ease-in-out)`	transition	Nav item state transition
`--hub-nav-mobile-backdrop-bg`	`rgba(0, 0, 0, 0.5)`	color	移动端面板后方的背景遮罩颜色。
`--hub-nav-mobile-bg`	`var(--hub-sys-surface-page, #fff)`	color	移动端面板的背景颜色。
`--hub-nav-mobile-color`	`var(--hub-sys-text-primary, #212529)`	color	Mobile panel text color
`--hub-nav-mobile-transition`	`var(--hub-sys-transition-base, all 0.2s ease-in-out)`	transition	移动端面板开关动画的过渡时序。
`--hub-nav-mobile-width`	`18rem`	length	offcanvas 移动端面板的宽度。
`--hub-nav-mobile-zindex`	`var(--hub-sys-zindex-fixed, 1030)`	number	Mobile panel z-index
`--hub-nav-padding-x`	`var(--hub-ref-space-3, 1rem)`	length	nav 容器的水平内边距。
`--hub-nav-padding-y`	`var(--hub-ref-space-2, 0.5rem)`	length	nav 容器的垂直内边距。
`--hub-nav-panel-back-color`	`var(--hub-sys-text-primary, #212529)`	color	面板头部返回按钮的颜色。
`--hub-nav-panel-back-hover-bg`	`var(--hub-sys-state-hover-bg, rgba(0, 0, 0, 0.075))`	color	面板头部按钮的悬停背景。
`--hub-nav-panel-back-size`	`2rem`	length	Panel back button size
`--hub-nav-panel-bg`	`var(--hub-sys-surface-elevated, #f8f9fa)`	color	面板的背景颜色。
`--hub-nav-panel-border-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	面板之间的边框颜色。
`--hub-nav-panel-border-width`	`1px`	length	Side panel border width
`--hub-nav-panel-color`	`var(--hub-sys-text-primary, #212529)`	color	面板内部的文本颜色。
`--hub-nav-panel-header-bg`	`var(--hub-sys-surface-page, #fff)`	color	面板头部的背景颜色。
`--hub-nav-panel-header-border-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	Panel header border color
`--hub-nav-panel-header-font-size`	`var(--hub-ref-font-size-sm, 0.875rem)`	length	Panel header font size
`--hub-nav-panel-header-font-weight`	`var(--hub-ref-font-weight-semibold, 600)`	number	Panel header font weight
`--hub-nav-panel-header-height`	`3rem`	length	面板头部的高度。
`--hub-nav-panel-header-padding-x`	`var(--hub-ref-space-3, 1rem)`	length	Panel header horizontal padding
`--hub-nav-panel-shadow`	`var(--hub-sys-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075))`	shadow	面板的阴影。
`--hub-nav-panel-transition`	`var(--hub-sys-transition-base, all 0.2s ease-in-out)`	transition	Side panel slide transition
`--hub-nav-panel-width`	`16rem`	length	每个面板的默认宽度。
`--hub-nav-panel-zindex`	`var(--hub-sys-zindex-dropdown, 1000)`	number	面板的堆叠顺序（应低于 dropdown 的 z-index）。
`--hub-nav-scrollbar-color`	`transparent transparent`	color	Scrollbar thumb/track color
`--hub-nav-scrollbar-thumb-color`	`transparent`	color	Scrollbar thumb color
`--hub-nav-scrollbar-thumb-radius`	`var(--hub-ref-radius-pill, 50rem)`	length	Scrollbar thumb corner radius
`--hub-nav-scrollbar-track-color`	`transparent`	color	Scrollbar track color
`--hub-nav-scrollbar-webkit-size`	`0`	length	WebKit scrollbar size
`--hub-nav-scrollbar-width`	`none`	length	Scrollbar width visibility
`--hub-nav-separator-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	Separator divider color
`--hub-nav-separator-margin-y`	`var(--hub-ref-space-2, 0.5rem)`	length	Separator vertical margin
`--hub-nav-toggler-border-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	Toggler button border color
`--hub-nav-toggler-border-radius`	`var(--hub-ref-radius-sm, 0.25rem)`	length	Toggler button corner radius
`--hub-nav-toggler-color`	`var(--hub-sys-text-primary, #212529)`	color	Toggler button icon color
`--hub-nav-toggler-font-size`	`var(--hub-ref-font-size-lg, 1.25rem)`	length	Toggler button font size
`--hub-nav-toggler-padding-x`	`var(--hub-ref-space-2, 0.5rem)`	length	Toggler button horizontal padding
`--hub-nav-toggler-padding-y`	`var(--hub-ref-space-1, 0.25rem)`	length	Toggler button vertical padding
`--hub-nav-vertical-items-overflow-x`	`hidden`	string	Vertical items x-overflow
`--hub-nav-vertical-items-overflow-y`	`auto`	string	Vertical items y-overflow
`--hub-nav-vertical-panel-padding-block`	`0`	length	Vertical panel block padding
`--hub-nav-vertical-panel-padding-inline`	`var(--hub-ref-space-2, 0.5rem)`	length	Vertical panel inline padding
`--hub-nav-mobile-accordion-gap`	`0.25rem`	length	Gap between items in the mobile accordion list
`--hub-nav-mobile-accordion-nested-spacing`	`0.25rem`	length	Top margin before a nested (child) accordion group
`--hub-nav-mobile-body-padding-block-end`	`var(--hub-nav-padding-y, 0.5rem)`	length	Bottom padding of the mobile panel body
`--hub-nav-mobile-body-padding-inline`	`var(--hub-nav-padding-x, 1rem)`	length	Inline padding of the mobile panel body
`--hub-nav-mobile-border-color`	`rgba(0, 0, 0, 0.08)`	color	Border color of the mobile drawer panel
`--hub-nav-mobile-item-padding-inline`	`0.75rem`	length	Inline padding of items inside the mobile panel (feeds --hub-nav-item-padding-x)
`--hub-nav-mobile-overlay-position`	`fixed`	string	CSS position of the mobile overlay/panel
`--hub-nav-mobile-root-padding-inline`	`0.5rem`	length	Inline padding of the mobile root list
`--hub-nav-mobile-shadow`	`0 0.5rem 1rem rgba(0, 0, 0, 0.18)`	shadow	Box shadow of the mobile drawer panel