1. Erste Schritte
2. Komponenten
3. Schrittanzeige

Schrittanzeige 1.2.0

Mehrstufige Fortschrittsindikatoren verfügbar als <velin-stepper> Web Component oder die reine CSS- .velin-stepper Klasse. English: Schrittanzeige

Wann verwenden

• Mehrstufige Wizards, Checkouts oder Onboarding-Flows, bei denen der aktuelle Schritt klar sein muss.
• Prefer <velin-stepper> when you need next() / prev() / goTo() and panel switching.
• Prefer the CSS pattern for static, presentational step lists without JS state.

Wann nicht

• Chronological event history — use Zeitleiste.
• Tabbed content without a sequential “progress” metaphor — use Navs & Tabs.
• Do not invent <velin-step> children or an orientation attribute — WC steps come from labels; vertical layout is CSS-only.

CSS-Schrittanzeige

Nutze .velin-stepper with .velin-stepper__step, __indicator, and __label. Mark state with --active / --completed.

<div class="velin-stepper" role="list" aria-label="Checkout progress">
  <div class="velin-stepper__step velin-stepper__step--completed" role="listitem">
    <span class="velin-stepper__indicator" aria-hidden="true"></span>
    <span class="velin-stepper__label">Account</span>
  </div>
  <div class="velin-stepper__step velin-stepper__step--active" role="listitem" aria-current="step">
    <span class="velin-stepper__indicator" aria-hidden="true"></span>
    <span class="velin-stepper__label">Profile</span>
  </div>
  <div class="velin-stepper__step" role="listitem">…</div>
</div>

Web Component

Pass comma-separated labels and a zero-based active index. Drive progress with next(), prev(), or goTo(n) (dispatches velin-step-change). Default-slot children render in part="panels" for accompanying step content you show/hide from that event.

<velin-stepper id="stepper" active="1"
  labels="Account,Profile,Review,Done" aria-label="Checkout">
</velin-stepper>

<button type="button" onclick="document.getElementById('stepper').prev()">Zurück</button>
<button type="button" onclick="document.getElementById('stepper').next()">Weiter</button>

Vertikales Layout

Füge .velin-stepper--vertical on the CSS stepper. The web component has no orientation attribute.

<div class="velin-stepper velin-stepper--vertical" role="list" aria-label="Onboarding">
  <div class="velin-stepper__step velin-stepper__step--completed" role="listitem">…</div>
  <div class="velin-stepper__step velin-stepper__step--active" role="listitem" aria-current="step">…</div>
  <div class="velin-stepper__step" role="listitem">…</div>
</div>

Barrierefreiheit

• WC steps list uses role="list" with per-step role="listitem" and status in aria-label.
• Active step gets aria-current="step"; completed markers include visually hidden “Completed” text.
• Override the list name with aria-label (observed; default "Progress").
• The stepper itself is display-oriented — pair with buttons that call next() / prev().
• CSS steppers should mirror list semantics (role="list" / listitem + aria-current) as in the examples.

API (<velin-stepper>)

Attribute

Methoden & events

Parts: steps, panels. Default slot = panel nodes.

Best Practices & Fallstricke

• Drive the indicator from app buttons via next() / prev() / goTo(); listen for velin-step-change.
• There is no <velin-step> element and no WC vertical orientation attribute.
• Prefer deprecated-free <velin-stepper> over <velin-stepper-wc>.

Verwandt

• Zeitleiste
• Fortschritt
• Navs & Tabs

Legacy *-wc Tags

<velin-tooltip-wc> and <velin-stepper-wc> remain registered as deprecated aliases. Prefer <velin-tooltip> and <velin-stepper> in new markup.