Angular ステッパーコンポーネント | ng-hub-ui-stepper
バリデーション、向きのモード、カスタムコントロール、i18n、CSS 変数テーマを備えた Angular ステッパーコンポーネント。
最終更新 2026/08/14
概要
チームがこのライブラリを探す理由
バリデーション、進行ルール、ブランディングを自分の制御下に保ちたい、ガイド付きの複数ステップフローに、この Angular ステッパーコンポーネントは役立ちます。
インストール
npm install ng-hub-ui-stepperジャンプ
最適な用途
- チェックアウトフロー
- ウィザードフォーム
- オンボーディング
- 設定ステップ
について stepper
ng-hub-ui-stepper は、Angular アプリケーションがオンボーディング、チェックアウト、ウィザード型のフォームを構造化できるよう支援します。これらのルールを各フローに手作業で組み込むことなく、ステップの進行・バリデーション・ナビゲーションのロジックを制御する再利用可能な手段をチームに提供します。
機能ガイド
基本的な利用
基本的なセットアップと向きの動作。
サンプル:
基本的な使い方
基本的な使い方
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
向き
向き
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
省略タイトルとツールチップ
省略タイトルとツールチップ
Long step titles are clipped to an ellipsis. Hover the nav title above to read the full text.
高度なフロー
バリデーション、i18n、RTL、API 駆動のナビゲーション、カスタムコントロール、カスタムステップヘッダー。
サンプル:
バリデーション
バリデーション
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
プログラムによる制御
プログラムによる制御
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
Event: -
カスタムナビゲーション
カスタムナビゲーション
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
カスタムコントロール
カスタムコントロール
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
アニメーション
アニメーション
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
国際化(i18n)
国際化(i18n)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
右から左(RTL)
右から左(RTL)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
スタイリング
テーマサービスによるランタイムのテーマカスタマイズ。
サンプル:
テーマ設定
テーマ設定
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
主な機能
最近の変更
Version 22.8.0 - 8/14/26, 12:00 AM
changed: Default action labels now resolve HUBUI.STEPPER.* before the legacy flat keys. The component provides the namespace through HUB_TRANSLATION_PREFIX, so an application dictionary can feed the built-in navigation labels via provideHubTranslationAdapter() without reserving generic top-level keys. Existing flat dictionaries keep working — the bare key is still the fallback.
added: README documentation for the application-wide translation adapter (provideHubTranslationAdapter() from ng-hub-ui-utils).
removed: Removed the @angular/animations peer dependency. The package is deprecated upstream and the library never used it. Applications that installed it only for ng-hub-ui-stepper can drop it.
Version 22.7.1 - 8/8/26, 12:00 AM
fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.
Version 22.7.0 - 7/29/26, 12:00 AM
added: --hub-stepper-indicator-size — the canonical step-indicator diameter (calc(var(--hub-ref-space-3, 1rem) * 2)). The built-in nav is text-only; this is the published metric custom trigger templates and companion step/lifecycle tracks read, space-derived so a density re-theme moves it with the paddings and font sizes that already scale.
Version 22.6.0 - 7/28/26, 12:00 AM
added: WAI-ARIA tablist semantics on the step rail: the rail is role="tablist" with aria-orientation, each trigger is role="tab" with aria-selected / aria-current="step" / aria-disabled, and each step content is a role="tabpanel" wired to its tab through stable generated ids.
added: Keyboard navigation on the rail with a roving tabindex (single Tab stop): Arrow keys move between enabled tabs (skipping disabled ones, wrapping), Home/End jump to the first/last enabled tab, and Enter/Space activates the focused step under the same permission model as clicking.
added: New railLabel input: accessible name of the step rail tablist (default 'Steps').
fixed: Default rail triggers now declare type="button", so a stepper rendered inside a <form> no longer submits it when a step trigger is clicked.
Version 22.5.1 - 7/26/26, 12:00 AM
fixed: StepTriggerDirective selector used a descendant combinator and never instantiated; it now matches either attribute and captures its TemplateRef (groundwork — the stepper does not render custom triggers yet).
changed: Declared the real ng-hub-ui-utils peer range (>=22.7.0); the previous >=1.2.0 floor allowed installs that fail at runtime.
Version 21.2.0 - 3/19/26, 12:00 AM
added: StepperAnimationDirection enum exported for typed animation direction values.
added: Step indexes are now automatically assigned by StepperComponent via a reactive effect — no manual [index] binding required.
changed: StepComponent.index is now an internal writable signal. Remove all [index]="N" bindings from hub-step templates.
changed: StepComponent.disabled simplified to a direct signal input (input(false)), removing the getter/setter and disabled$ backing signal.
changed: StepperComponent.currentIndex is now a writable signal — call as currentIndex() instead of the previous getter.
changed: Renamed internal signals: removed $ suffix from currentIndex, contentAnimating, animationDirection.
removed: StepComponent.disabled$ backing signal removed. Use the disabled signal input directly.
removed: [index] template binding removed from StepComponent — managed internally.
Version 21.1.0 - 3/18/26, 12:00 AM
added: Angular 21 support with Signals-based architecture.
added: contentChild and contentChildren for step and directive discovery.
changed: All components and directives converted to standalone.
fixed: Fixed step indices and validation during dynamic step additions.