Diggi Docs
StepIndicator
Der Step Indicator zeigt den Prozessfortschritt durch eine Abfolge an, indem er diese in mehrere Schritte unterteilt.

Verwendung

Der Step Indicator dient Nutzern als Orientierung und zeigt an, in welchem Schritt sie sich gerade befinden und wie viele Schritte noch folgen. Er ermöglicht eine Rückwärtsnavigation zu bereits abgeschlossenen Schritten.

Eigenschaften

NameTypeDefault ValueDescription

items

IStepIndicatorItem[]

undefined

Step indicator Items

isWithoutContent

boolean

undefined

Display steps without icon or similar

active

number

undefined

Index of currently active step

style

string

undefined

Additional css styles


Beispiele

Step Indicator Large

Empfohlen für 2 bis 5 Schritte

  • One
  • Two (disabled)
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
  • error
  • error disabled
  • Warning
  • Warning disabled
  • Success
  • Success disabled
  • Fertig

Step Indicator Large with Icons

Empfohlen für 2 bis 5 Schritte

  • One
  • Two (disabled)
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
  • error
  • error disabled
  • Warning
  • Warning disabled
  • Success
  • Success disabled
  • Fertig

Step Indicator Small

Die Minimalausführung enthält keine Icons oder Zahlen. Empfohlen für 2 bis 8 Schritte oder als Variation für kleine Viewports.

  • One
  • Two (disabled)
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
  • error
  • error disabled
  • Warning
  • Warning disabled
  • Success
  • Success disabled
  • Fertig

Step Indicator Small no labels

Die Minimalausführung enthält keine Icons oder Zahlen. Empfohlen für 2 bis 8 Schritte oder als Variation für kleine Viewports.