Angular ステッパーコンポーネント | ng-hub-ui-stepper
バリデーション、向きのモード、カスタムコントロール、i18n、CSS 変数テーマを備えた Angular ステッパーコンポーネント。
インタラクティブなサンプル
一般的な 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.
プログラムによる制御
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.
アニメーション
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）
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）
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.
一列に並ぶステップバー
nav="track"
nav="pills" — the default
The Review step binds no [valid] at all, so its verdict is null: nobody has said anything, and the step counts as in order once it has been visited. The number under the tick never goes away — the marker gains a mark, it does not swap identity.
どこまで飛べるか
Backwards is always allowed. Forwards is allowed only once every step from the current one up to the one before the target is in order — stated valid, or, with nothing stated, visited. A disabled step is closed off either way.
- AccountisInOrder(0) = falseisReachable(0) = true
- AddressisInOrder(1) = falseisReachable(1) = false
- PaymentisInOrder(2) = falseisReachable(2) = false
- ReviewisInOrder(3) = falseisReachable(3) = false
Standing on Account with nothing ticked, goTo(2) is refused: Address is out of order. Tick Account and Address and the same click lands.
移動する前に保存する
Press Continue and watch the rail: the step does not move until the save answers.
ステップ順序の語彙
| Term | What it means | Account | Address | Review |
|---|---|---|---|---|
visited | The user has stood on this step. A jump over it does not set it, and walking back does not unset it. | yes | no | no |
valid | Your verdict on this step's own data. Tri-state: true, false, or null when nobody has said. | null | null | null |
inOrder | The stated validity when there is one, otherwise visited. This is what the tick paints and what the forward gate reads. | true | false | false |
reachable | What the track lets you activate from here: backwards always, forwards only once every step in between is in order. A disabled step is closed off both ways. | true | true | false |
isCompleted, in the hubStepTrigger context, is none of these: it still answers index < currentIndex, so every template written before 22.12.0 reads the same.