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 13 Inputs ein. Binde sie wie jeden Angular-@Input.

Name	Typ	Standard	Beschreibung
`options (hub-stepper)`	`StepperOptions`	`{}`	Stepper-Konfigurationsobjekt: `layout` (`vertical` \| `sidebar`) und `rtl` (boolean).
`variant (hub-stepper)`	`string`	`undefined`	Semantischer Akzent für die Pille des aktiven Schritts und die Weiter-/Absenden-Steuerelemente. Eingebaute Werte: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `neutral`, `light`, `dark`; jede andere Zeichenkette wird über `--hub-sys-color-<variant>` aufgelöst.
`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.
`truncateTitles (hub-stepper)`	`boolean`	`false`	Kürzt jeden Schritt-Titel in der Leiste auf `--hub-stepper-nav-title-max-width` (Standard `12rem`) und zeigt den vollständigen Text als Tooltip, sobald er überläuft.
`railLabel (hub-stepper)`	`string`	`'Steps'`	Zugänglicher Name der tablist der Schrittleiste.
`nav (hub-stepper)`	`'pills' \| 'track'`	`'pills'`	Welche Leiste der Assistent zeichnet. `pills` ist die bisherige. `track` ist die Inline-Variante: eine nummerierte Markierung je Schritt, ein Haken auf einem Schritt, der in Ordnung ist, und eine Verbindung, die beim Verlassen die Akzentfarbe annimmt.
`inOrderLabel (hub-stepper)`	`string \| null`	`null`	Was ein Screenreader an einer abgehakten Markierung hört. Der Haken selbst ist schmückend, also ist dies das Einzige, was sagt, dass der Schritt in Ordnung ist. Ohne Angabe greift das mitgelieferte Wörterbuch.
`beforeStepChange (hub-stepper)`	`StepperStepChangeGuard \| null`	`null`	Ein Tor, das der Assistent befragt, bevor er sich bewegt, damit ein Formular zuerst speichern kann. Es läuft, während der Index noch steht, und ein `false` — oder ein Promise, das `false` liefert, oder eine Ablehnung — lässt den Assistenten stehen. Ein Output könnte das nicht: wenn er feuert, ist der Schritt längst gewechselt.
`title (hub-step)`	`string`	`undefined`	Der Schritt-Titel, der in der Stepper-Navigation angezeigt wird.
`disabled (hub-step)`	`boolean`	`false`	Deaktiviert die Navigation zu diesem Schritt.
`valid (hub-step)`	`boolean \| null`	`null`	Das Urteil des Assistenten über die eigenen Daten dieses Schritts. Drei Zustände, und der dritte zählt: `true`, `false` oder `null`, also: niemand hat sich geäußert. Die Bibliothek prüft kein Formular — sie hält die Antwort fest, und die Leiste rechnet damit.

Outputs

Reagiere darauf, was stepper tut — 3 Events, an die du deine Logik anknüpfen kannst.

Name	Typ	Beschreibung
`completed (hub-stepper)`	`OutputEmitterRef<void>`	Wird ausgelöst, wenn der Benutzer den letzten Schritt absendet.
`nextStep (hub-stepper)`	`OutputEmitterRef<number>`	Wird ausgelöst, wenn zu einem Schritt vorgerückt wird, mit dem neuen Schritt-Index.
`previousStep (hub-stepper)`	`OutputEmitterRef<number>`	Wird ausgelöst, wenn zu einem Schritt zurückgegangen wird, mit dem neuen Schritt-Index.

Templates

Mach es zu deinem — 4 Template-Slots lassen dich eigenes Markup projizieren.

Name	Beschreibung	Beispiel
`stepperNav / hubStepperNav`	Ersetzt die gesamte Standard-Schrittleiste. Der Template-Kontext stellt steps (die projizierten StepComponent-Instanzen) und currentIndex bereit — gebunden mit let-steps="steps" und 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`	Ersetzt das Bedienelement, das die Standardleiste in jedem Eintrag zeichnet, und behält die Leiste selbst: ihre Liste, ihr role="tablist", ihre Ausrichtung und ihre Beschriftung. Der Kontext liefert den Schritt als $implicit und als step sowie title, index, isCurrent, isCompleted und disabled; das Aktivieren bleibt bei Ihnen, über eine Template-Referenz am Host. Wird ignoriert, wenn ein hubStepperNav-Template vorhanden ist.	`<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`	Registriert die zehn mitgelieferten Wörterbücher (en, es, ca, eu, gl, ast, an, de, zh und ar) und den HubTranslationService, über den die eingebauten Steuerelemente Zurück / Weiter / Senden ihren Text auflösen. Das ersetzt StepperModule.forRoot(), das in 23.0.0 entfällt.	`providers: [provideHubStepper({ language: 'en', fallbackLanguage: 'en' })]`
`STEPPER_DICTIONARIES`	Die mitgelieferten Wörterbücher als einfaches Objekt, exportiert, damit eine Anwendung nur die ausgelieferten Sprachen registriert oder sie mit einem eigenen Wörterbuch mischt. Die Schlüssel sind flach — BACK, CONTINUE und SUBMIT —, denn das löst die Komponente auf, sobald ihr HUBUI.STEPPER-Namensraum nicht greift.	`provideHubTranslation({ language: 'ca', dictionaries: { ca: { ...STEPPER_DICTIONARIES['ca'], ...myLabels } } })`