Angular Stepper-Komponente | ng-hub-ui-stepper
Angular Stepper-Komponente mit Validierung, Ausrichtungsmodi, individuellen Steuerelementen, i18n und Theming über CSS-Variablen.
API-Referenz
Hier ist der vollständige Vertrag für stepper: alles, was du binden, abhören, projizieren und gestalten kannst, an einem Ort gesammelt. Verdrahte, was du brauchst, und gestalte, was du willst — es ist standalone und Signals-freundlich.
Inputs
Stelle stepper mit 6 Inputs ein. Binde sie wie jeden Angular-@Input.
| Name | Typ | Standard | Beschreibung |
|---|---|---|---|
options (hub-stepper) | StepperOptions | {} | Stepper-Konfigurationsobjekt: `layout` (`vertical` | `sidebar`) und `rtl` (boolean). |
backLabel (hub-stepper) | string | null | null | Überschreibt die Beschriftung des "Back"-Steuerelements. Greift auf die integrierte i18n-Beschriftung zurück, wenn null. |
continueLabel (hub-stepper) | string | null | null | Überschreibt die Beschriftung des "Continue"-Steuerelements. |
submitLabel (hub-stepper) | string | null | null | Überschreibt die Beschriftung des "Submit"-Steuerelements im letzten Schritt. |
title (hub-step) | string | — | Der Schritt-Titel, der in der Stepper-Navigation angezeigt wird. |
disabled (hub-step) | boolean | false | Deaktiviert die Navigation zu diesem Schritt. |
Outputs
Reagiere darauf, was stepper tut — 3 Events, an die du deine Logik anknüpfen kannst.
| Name | Typ | Beschreibung |
|---|---|---|
completed (hub-stepper) | EventEmitter<void> | Wird ausgelöst, wenn der Benutzer den letzten Schritt absendet. |
nextStep (hub-stepper) | EventEmitter<number> | Wird ausgelöst, wenn zu einem Schritt vorgerückt wird, mit dem neuen Schritt-Index. |
previousStep (hub-stepper) | EventEmitter<number> | Wird ausgelöst, wenn zu einem Schritt zurückgegangen wird, mit dem neuen Schritt-Index. |
Templates
Noch keine Templates dokumentiert.
CSS-Variablen
Gestalte jedes Pixel mit 14 CSS-Variablen. Überschreibe sie auf :root oder begrenze sie auf einen Wrapper.
Stepper-Theme
Laufzeit-Theming-Tokens für die Stepper-Fläche, Navigation und Steuerelemente. Überschreiben Sie sie an `:root` oder beschränken Sie sie auf einen Wrapper.
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-stepper-primary-color | #009ef7 | color | Primärer Akzent (aktiver Zustand, Fortschritt). |
--hub-stepper-background-color | #f3f6f9 | color | Zurück-Schaltfläche / sekundäre Flächen-Hintergrund. |
--hub-stepper-text-color | #181c32 | color | Basis-Textfarbe. |
--hub-stepper-border-color | #d8dde6 | color | Rahmenfarbe der Stepper-Fläche. |
--hub-stepper-surface-color | #ffffff | color | Hintergrund des Schritt-Inhalts. |
--hub-stepper-nav-link-color | #495057 | color | Beschriftungsfarbe des Navigationsschritts. |
--hub-stepper-nav-link-active-bg | #0d6efd | color | Hintergrund des Indikators für den aktiven Schritt. |
--hub-stepper-nav-link-active-color | #ffffff | color | Textfarbe des Indikators für den aktiven Schritt. |
--hub-stepper-nav-link-disabled-color | #adb5bd | color | Beschriftungsfarbe des deaktivierten Schritts. |
--hub-stepper-gap | 1rem | length | Abstand zwischen den Stepper-Layout-Bereichen. |
--hub-stepper-controls-gap | 0.5rem | length | Abstand zwischen den Navigationssteuerelementen. |
--hub-stepper-disabled-opacity | 0.5 | number | Deckkraft, die auf deaktivierte Schritte angewendet wird. |
--hub-stepper-sidebar-width | clamp(160px, 20vw, 240px) | length | Sidebar-Breite im `sidebar`-Layout. |
--hub-stepper-animation-duration | 260ms | transition | Übergangsdauer des Schritts. |
Styling und Theming
Es sind noch keine Styling-Beispiele dokumentiert. Dieser Abschnitt wird Anpassungsrezepte und Theming-Beispiele enthalten.