Angular Stepper-Komponente | ng-hub-ui-stepper
Angular Stepper-Komponente mit Validierung, Ausrichtungsmodi, individuellen Steuerelementen, i18n und Theming über CSS-Variablen.
Interaktive Beispiele
Erkunde Live-Beispiele, die zeigen, wie sich die Bibliothek in gängigen Angular-Anwendungsfällen verhält.
Grundlegende Verwendung
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.
In einem Modal
Validierung
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.
Programmatische Steuerung
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: -
Ausrichtung
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.
Theming
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.
Benutzerdefinierte Steuerelemente
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.
Animationen
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.
Internationalisierung (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.
Rechts-nach-links (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.
Gekürzte Titel & Tooltip
Long step titles are clipped to an ellipsis. Hover the nav title above to read the full text.
Schrittleiste in einer Zeile
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.
Wie weit man springen darf
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.
Speichern vor dem Sprung
Press Continue and watch the rail: the step does not move until the save answers.
Das Vokabular der Schrittfolge
| 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.