Formular: Fortschrittsanzeige

Die Fortschrittsanzeige dient als Orientierungshilfe, an welcher Stelle einer Anwendung (zum Beispiel Formular oder Antrag) Sie sich befinden.
Die einzelnen Punkte der Fortschrittsanzeige sind, sobald sie ausgefüllt sind, klickbar und können von den Nutzer*innen direkt angesteuert werden.
Die Fortschrittsanzeige darf maximal 7 Punkte enthalten.

Varianten

Formular: Fortschrittsanzeige

Vorschau

Einstieg
Kontrolle
Abschluss

Code

<wm-formprogress>
  <ol>
    <li>
      <a href="#eins">Einstieg</a>
    </li>
    <li>
      <span>Kontrolle</span>
    </li>
    <li>
      <span>Abschluss</span>
    </li>
  </ol>
</wm-formprogress>

Formular: Fortschrittsanzeige 2. Punkt aktiv

Vorschau

Einstieg
Kontrolle
Abschluss

Code

<wm-formprogress current="2">
  <ol>
    <li>
      <a href="#eins">Einstieg</a>
    </li>
    <li>
      <span>Kontrolle</span>
    </li>
    <li>
      <span>Abschluss</span>
    </li>
  </ol>
</wm-formprogress>

Dev

Interaktive Demo

current

Vorschau

Einstieg
Personendaten
Adressdaten
Bestätigung
Kontrolle
Abschluss

Code

<wm-formprogress data-demo-pattern="wm-formprogress-preview" current="3" label="Fortschrittsanzeige">
  <ol>
    <li>
      <span>Einstieg</span>
    </li>
    <li>
      <span>Personendaten</span>
    </li>
    <li>
      <span>Adressdaten</span>
    </li>
    <li>
      <span>Bestätigung</span>
    </li>
    <li>
      <span>Kontrolle</span>
    </li>
    <li>
      <span>Abschluss</span>
    </li>
  </ol>
</wm-formprogress>

Weitere Beispiele

Formular: Fortschrittsanzeige mit Links

Bereits erledigte Schritte können verlinkt werden.

Vorschau

Einstieg
Kontrolle
Abschluss

Code

<wm-formprogress current="3">
  <ol>
    <li>
      <a href="#eins">Einstieg</a>
    </li>
    <li>
      <a href="#zwei">Kontrolle</a>
    </li>
    <li>
      <span>Abschluss</span>
    </li>
  </ol>
</wm-formprogress>

Formular: Fortschrittsanzeige mit Buttons

Bereits erledigte Schritte können in Buttons geschachtelt werden.

Vorschau

Bestätigung
Kontrolle
Abschluss

Code

<wm-formprogress current="4">
  <ol>
    <li>
      <button onclick="alert('Einstieg')">Einstieg</button>
    </li>
    <li>
      <button onclick="alert('Personendaten')">Personendaten</button>
    </li>
    <li>
      <button onclick="alert('Adressdaten')">Adressdaten</button>
    </li>
    <li>
      <span>Bestätigung</span>
    </li>
    <li>
      <span>Kontrolle</span>
    </li>
    <li>
      <span>Abschluss</span>
    </li>
  </ol>
</wm-formprogress>

API

Abhängigkeiten

HTML

<script src="https://assets.wien.gv.at/theme/latest/js/components/FormProgress/FormProgress.js" type="module"></script>

JavaScript

import { FormProgress } from './wienermelange/assets/js/components/FormProgress/FormProgress.js';

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`current`	Aktiver Schritt	`Number`	`1`
`label`	Accessible Name der Navigation-Landmark	`string`	`"Fortschrittsanzeige"`

Slots

Name	Beschreibung
`default`	Liste

CSS API

Property	Beschreibung
`--formprogress-background-color`	Standardfarbe
`--formprogress-background-color--active`	Farbe für aktive Schritte
`--formprogress-font-color`	Schriftfarbe für Schritte
`--formprogress-font-color--active`	Schriftfarbe für aktive Schritte

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at