Angular ステッパーコンポーネント | ng-hub-ui-stepper
バリデーション、向きのモード、カスタムコントロール、i18n、CSS 変数テーマを備えた Angular ステッパーコンポーネント。
スタイル
ミックスインとスタイル
Override any of the `--hub-stepper-*` 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-stepper-theme
The active step follows the themed accent.
| ミックスイン | パラメータ | 説明 |
|---|---|---|
| Theming | ||
hub-stepper-theme() | $accent--hub-stepper-accent$surface--hub-stepper-surface-color$background--hub-stepper-background-color$text--hub-stepper-text-color$border--hub-stepper-border-color$gap--hub-stepper-gap$disabled-opacity--hub-stepper-disabled-opacity$nav-bg--hub-stepper-nav-bg$nav-padding-x--hub-stepper-nav-padding-x$nav-padding-y--hub-stepper-nav-padding-y$nav-border-width--hub-stepper-nav-border-width$nav-border-color--hub-stepper-nav-border-color$nav-gap--hub-stepper-nav-gap$nav-link-color--hub-stepper-nav-link-color$nav-link-hover-color--hub-stepper-nav-link-hover-color$nav-link-hover-bg--hub-stepper-nav-link-hover-bg$nav-link-active-color--hub-stepper-nav-link-active-color$nav-link-active-bg--hub-stepper-nav-link-active-bg$nav-link-active-border-color--hub-stepper-nav-link-active-border-color$nav-link-disabled-color--hub-stepper-nav-link-disabled-color$trigger-padding-x--hub-stepper-nav-trigger-padding-x$trigger-padding-y--hub-stepper-nav-trigger-padding-y$trigger-gap--hub-stepper-nav-trigger-gap$trigger-font-size--hub-stepper-nav-trigger-font-size$controls-gap--hub-stepper-controls-gap$controls-justify--hub-stepper-controls-justify$control-padding-x--hub-stepper-control-padding-x$control-padding-y--hub-stepper-control-padding-y$control-font-size--hub-stepper-control-font-size$sidebar-width--hub-stepper-sidebar-width | One-call theming for `<hub-stepper>` |
CSS 変数
43 個の CSS 変数であらゆるピクセルをテーマ設定。:root で上書きするか、ラッパーにスコープを限定できます。
Stepper
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-stepper-accent | var(--hub-sys-color-primary, #0d6efd) | color | Semantic accent — re-based per variant; drives the active step pill + next/submit controls |
--hub-stepper-primary-color | var(--hub-stepper-accent) | color | プライマリアクセント（アクティブ状態、進捗）。 |
--hub-stepper-background-color | var(--hub-sys-surface-elevated, #f8f9fa) | color | 戻るボタン／セカンダリ表面の背景。 |
--hub-stepper-text-color | var(--hub-sys-text-primary, #212529) | color | ベースのテキスト色。 |
--hub-stepper-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | stepper 表面のボーダー色。 |
--hub-stepper-surface-color | var(--hub-sys-surface-page, #ffffff) | color | ステップコンテンツの背景。 |
--hub-stepper-nav-bg | var(--hub-sys-surface-page, transparent) | color | Background of the nav bar |
--hub-stepper-nav-border-width | 0 | length | Border width of the nav bar |
--hub-stepper-nav-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Border color of the nav bar |
--hub-stepper-nav-link-color | var(--hub-sys-text-primary, #212529) | color | ナビゲーションのステップラベル色。 |
--hub-stepper-nav-link-hover-color | var(--hub-sys-link-hover-color, #0a58ca) | color | Nav trigger text color on hover |
--hub-stepper-nav-link-hover-bg | var(--hub-sys-state-hover-bg, rgba(0, 0, 0, 0.075)) | color | Nav trigger background on hover |
--hub-stepper-nav-link-active-color | var(--hub-stepper-accent-on, #ffffff) | color | アクティブステップインジケーターのテキスト色。 |
--hub-stepper-nav-link-active-bg | var(--hub-stepper-accent) | color | アクティブステップインジケーターの背景。 |
--hub-stepper-nav-link-active-border-color | var(--hub-stepper-accent) | color | Nav trigger border in the current step |
--hub-stepper-nav-link-disabled-color | var(--hub-sys-text-muted, #6c757d) | color | 無効なステップのラベル色。 |
--hub-stepper-gap | var(--hub-ref-space-3, 1rem) | length | stepper レイアウト領域間のギャップ。 |
--hub-stepper-nav-gap | var(--hub-ref-space-1, 0.25rem) | length | Gap between nav trigger items |
--hub-stepper-nav-trigger-gap | var(--hub-ref-space-1, 0.25rem) | length | Internal gap between icon and label inside trigger |
--hub-stepper-nav-trigger-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Vertical padding of nav trigger |
--hub-stepper-nav-trigger-padding-x | var(--hub-ref-space-3, 1rem) | length | Horizontal padding of nav trigger |
--hub-stepper-nav-trigger-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Font size of nav trigger label |
--hub-stepper-nav-trigger-line-height | var(--hub-ref-line-height-sm, 1.25) | number | Line height of nav trigger label |
--hub-stepper-controls-justify | flex-end | string | justify-content of the controls bar |
--hub-stepper-controls-gap | var(--hub-ref-space-2, 0.5rem) | length | ナビゲーションコントロール間のギャップ。 |
--hub-stepper-control-padding-y | 0.375rem | length | Vertical padding of control buttons |
--hub-stepper-control-padding-x | var(--hub-ref-space-3, 1rem) | length | Horizontal padding of control buttons |
--hub-stepper-control-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Font size of control buttons |
--hub-stepper-control-line-height | var(--hub-ref-line-height-sm, 1.25) | number | Line height of control buttons |
--hub-stepper-disabled-opacity | var(--hub-sys-opacity-50, 0.5) | number | 無効なステップに適用される不透明度。 |
--hub-stepper-sidebar-min-width | 160px | length | Minimum width of sidebar nav (sidebar layout) |
--hub-stepper-sidebar-ideal-width | 20vw | length | Ideal width of sidebar nav used in clamp() |
--hub-stepper-sidebar-max-width | 240px | length | Maximum width of sidebar nav (sidebar layout) |
--hub-stepper-sidebar-width | clamp( var(--hub-stepper-sidebar-min-width), var(--hub-stepper-sidebar-ideal-width), var(--hub-stepper-sidebar-max-width) ) | length | `sidebar` レイアウトでのサイドバーの幅。 |
--hub-stepper-content-border-width | 0 | length | Border width of the content panel |
--hub-stepper-animation-duration | var(--hub-sys-transition-duration-base, 260ms) | transition | ステップの遷移時間。 |
--hub-stepper-animation-easing | var(--hub-sys-transition-timing-function-base, ease) | transition | Easing function of step transition animations |
--hub-stepper-animation-distance | var(--hub-ref-space-4, 1.5rem) | transition | Slide distance for enter/exit step animations |
--hub-stepper-content-padding-x | 0 | length | Content horizontal padding |
--hub-stepper-content-padding-y | 0 | length | Content vertical padding |
--hub-stepper-nav-padding-x | 0 | length | Nav horizontal padding |
--hub-stepper-nav-padding-y | 0 | length | Nav vertical padding |
--hub-stepper-nav-title-max-width | 12rem | length | Max width of a step nav title before ellipsis |