Angular ステッパーコンポーネント | ng-hub-ui-stepper
バリデーション、向きのモード、カスタムコントロール、i18n、CSS 変数テーマを備えた Angular ステッパーコンポーネント。
API リファレンス
stepper の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。
インプット
13 個のインプットで stepper を調整。通常の Angular @Input と同じようにバインドできます。
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
options (hub-stepper) | StepperOptions | {} | Stepper の設定オブジェクト: `layout`（`vertical` | `sidebar`）と `rtl`（boolean）。 |
variant (hub-stepper) | string | undefined | アクティブなステップのピルと「次へ / 送信」コントロールに適用されるセマンティックアクセント。組み込み値は `primary`、`secondary`、`success`、`danger`、`warning`、`info`、`neutral`、`light`、`dark`。それ以外の文字列は `--hub-sys-color-<variant>` を通じて解決されます。 |
backLabel (hub-stepper) | string | null | null | "Back" コントロールのラベルを上書きします。null の場合は組み込みの i18n ラベルにフォールバックします。 |
continueLabel (hub-stepper) | string | null | null | "Continue" コントロールのラベルを上書きします。 |
submitLabel (hub-stepper) | string | null | null | 最終ステップの "Submit" コントロールのラベルを上書きします。 |
truncateTitles (hub-stepper) | boolean | false | レールの各ステップタイトルを `--hub-stepper-nav-title-max-width`（既定値 `12rem`）で切り詰め、あふれた場合は全文をツールチップで表示します。 |
railLabel (hub-stepper) | string | 'Steps' | ステップレールの tablist のアクセシブルな名前。 |
nav (hub-stepper) | 'pills' | 'track' | 'pills' | ステッパーが描くレールを選びます。`pills` は従来のもの。`track` は一列版で、各ステップに番号つきのマーカー、順序の整ったステップにはチェック、そこを出る連結線はアクセント色になります。 |
inOrderLabel (hub-stepper) | string | null | null | チェックの付いたマーカーでスクリーンリーダーが読み上げる言葉です。チェック自体は装飾なので、そのステップが順序どおりだと伝えるのはこれだけです。未指定なら同梱の辞書に戻ります。 |
beforeStepChange (hub-stepper) | StepperStepChangeGuard | null | null | 移動する前にステッパーが尋ねる関門です。ウィザードが先に保存できるようにするためのもので、インデックスがまだ元の位置にあるうちに走ります。`false` を返す——あるいは `false` で解決する Promise、拒否——とステッパーはその場にとどまります。出力ではこれはできません。発火したときには、もうステップは変わっています。 |
title (hub-step) | string | undefined | stepper ナビゲーションに表示されるステップのタイトル。 |
disabled (hub-step) | boolean | false | このステップへのナビゲーションを無効にします。 |
valid (hub-step) | boolean | null | null | そのステップ自身のデータに対する、ウィザードの判定です。三つの状態があり、三つめが効きます。`true`、`false`、そして誰も答えていないことを意味する `null`。ライブラリはフォームを覗きません——答えを記録し、レールがそれをもとに判断します。 |
アウトプット
stepper の動作に反応 — ロジックを接続できる 3 個のイベント。
| 名前 | 型 | 説明 |
|---|---|---|
completed (hub-stepper) | OutputEmitterRef<void> | ユーザーが最終ステップを送信したときに発行されます。 |
nextStep (hub-stepper) | OutputEmitterRef<number> | ステップに進むときに、新しいステップのインデックスとともに発行されます。 |
previousStep (hub-stepper) | OutputEmitterRef<number> | ステップに戻るときに、新しいステップのインデックスとともに発行されます。 |
テンプレート
自分好みに — 4 個のテンプレートスロットでカスタムマークアップをプロジェクションできます。
| 名前 | 説明 | サンプル |
|---|---|---|
stepperNav / hubStepperNav | 既定のステップレール全体を置き換えます。テンプレートコンテキストは steps（投影された StepComponent インスタンス）と currentIndex を公開するため、let-steps="steps" と let-currentIndex="currentIndex" でバインドします。 | <hub-stepper>
<ng-template hubStepperNav let-steps="steps" let-currentIndex="currentIndex">
<ol class="my-rail">
@for (step of steps; track step; let i = $index) {
<li [class.current]="i === currentIndex">{{ step.title() || 'Step ' + (i + 1) }}</li>
}
</ol>
</ng-template>
<hub-step title="Account">…</hub-step>
<hub-step title="Review">…</hub-step>
</hub-stepper> |
stepTrigger / hubStepTrigger | 既定のレールが各項目の中に描くコントロールを差し替えます。レール自体（リスト、role="tablist"、向き、ラベル）はそのままです。コンテキストにはステップが $implicit と step の両方で入り、title、index、isCurrent、isCompleted、disabled も渡されます。ステップの切り替えはホストのテンプレート参照を通じて呼び出し側が行います。hubStepperNav のテンプレートがある場合は無視されます。 | <hub-stepper #wizard>
<ng-template hubStepTrigger let-title="title" let-index="index" let-isCurrent="isCurrent"
let-inOrder="inOrder" let-reachable="reachable">
<button type="button" role="tab" [attr.aria-selected]="isCurrent" [disabled]="!reachable" (click)="wizard.goTo(index)">
<span class="badge">{{ inOrder ? '✓' : index + 1 }}</span> {{ title }}
</button>
</ng-template>
<hub-step title="Account" [valid]="account.valid">…</hub-step>
<hub-step title="Review">…</hub-step>
</hub-stepper> |
provideHubStepper | 同梱の 10 個の辞書 (en, es, ca, eu, gl, ast, an, de, zh, ar) と、組み込みの Back / Continue / Submit コントロールがテキストを解決する HubTranslationService を登録します。23.0.0 で削除される StepperModule.forRoot() の代替です。 | providers: [provideHubStepper({ language: 'en', fallbackLanguage: 'en' })] |
STEPPER_DICTIONARIES | 同梱の辞書をそのままのオブジェクトとして公開したもの。出荷する言語だけを登録したり、独自の辞書と統合したりできます。キーは BACK・CONTINUE・SUBMIT のフラット形式で、コンポーネントが HUBUI.STEPPER 名前空間で見つからなかったときに参照する形と一致します。 | provideHubTranslation({ language: 'ca', dictionaries: { ca: { ...STEPPER_DICTIONARIES['ca'], ...myLabels } } }) |