Angular ステッパーコンポーネント | ng-hub-ui-stepper
バリデーション、向きのモード、カスタムコントロール、i18n、CSS 変数テーマを備えた Angular ステッパーコンポーネント。
API リファレンス
stepper の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。
インプット
6 個のインプットで stepper を調整。通常の Angular @Input と同じようにバインドできます。
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
options (hub-stepper) | StepperOptions | {} | Stepper の設定オブジェクト: `layout`（`vertical` | `sidebar`）と `rtl`（boolean）。 |
backLabel (hub-stepper) | string | null | null | "Back" コントロールのラベルを上書きします。null の場合は組み込みの i18n ラベルにフォールバックします。 |
continueLabel (hub-stepper) | string | null | null | "Continue" コントロールのラベルを上書きします。 |
submitLabel (hub-stepper) | string | null | null | 最終ステップの "Submit" コントロールのラベルを上書きします。 |
title (hub-step) | string | — | stepper ナビゲーションに表示されるステップのタイトル。 |
disabled (hub-step) | boolean | false | このステップへのナビゲーションを無効にします。 |
アウトプット
stepper の動作に反応 — ロジックを接続できる 3 個のイベント。
| 名前 | 型 | 説明 |
|---|---|---|
completed (hub-stepper) | EventEmitter<void> | ユーザーが最終ステップを送信したときに発行されます。 |
nextStep (hub-stepper) | EventEmitter<number> | ステップに進むときに、新しいステップのインデックスとともに発行されます。 |
previousStep (hub-stepper) | EventEmitter<number> | ステップに戻るときに、新しいステップのインデックスとともに発行されます。 |
テンプレート
テンプレートはまだドキュメント化されていません。
CSS 変数
14 個の CSS 変数であらゆるピクセルをテーマ設定。:root で上書きするか、ラッパーにスコープを限定できます。
Stepper テーマ
stepper の表面、ナビゲーション、コントロールのためのランタイムテーマトークン。`:root` で上書きするか、ラッパーにスコープを限定します。
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--hub-stepper-primary-color | #009ef7 | color | プライマリアクセント（アクティブ状態、進捗）。 |
--hub-stepper-background-color | #f3f6f9 | color | 戻るボタン／セカンダリ表面の背景。 |
--hub-stepper-text-color | #181c32 | color | ベースのテキスト色。 |
--hub-stepper-border-color | #d8dde6 | color | stepper 表面のボーダー色。 |
--hub-stepper-surface-color | #ffffff | color | ステップコンテンツの背景。 |
--hub-stepper-nav-link-color | #495057 | color | ナビゲーションのステップラベル色。 |
--hub-stepper-nav-link-active-bg | #0d6efd | color | アクティブステップインジケーターの背景。 |
--hub-stepper-nav-link-active-color | #ffffff | color | アクティブステップインジケーターのテキスト色。 |
--hub-stepper-nav-link-disabled-color | #adb5bd | color | 無効なステップのラベル色。 |
--hub-stepper-gap | 1rem | length | stepper レイアウト領域間のギャップ。 |
--hub-stepper-controls-gap | 0.5rem | length | ナビゲーションコントロール間のギャップ。 |
--hub-stepper-disabled-opacity | 0.5 | number | 無効なステップに適用される不透明度。 |
--hub-stepper-sidebar-width | clamp(160px, 20vw, 240px) | length | `sidebar` レイアウトでのサイドバーの幅。 |
--hub-stepper-animation-duration | 260ms | transition | ステップの遷移時間。 |
スタイリングとテーマ設定
スタイリングのサンプルはまだドキュメント化されていません。このセクションには、カスタマイズのレシピやテーマ設定のサンプルが含まれる予定です。