Verwenden Sie Schritte, um eine Abfolge von Aktionen oder Ereignissen darzustellen. Sie können so viele Schritte hinzufügen, wie benötigt.
1

Erster Schritt

Das sind Anweisungen oder Inhalte, die nur für den ersten Schritt relevant sind.
2

Zweiter Schritt

Das sind Anweisungen oder Inhalte, die nur für den zweiten Schritt relevant sind.
3

Dritter Schritt

Das sind Anweisungen oder Inhalte, die nur für den dritten Schritt relevant sind.
Steps example
<Steps>
  <Step title="First Step">
    These are instructions or content that only pertain to the first step.
  </Step>
  <Step title="Second Step">
    These are instructions or content that only pertain to the second step.
  </Step>
  <Step title="Third Step">
    These are instructions or content that only pertain to the third step.
  </Step>
</Steps>

​
Eigenschaften von Steps

​
children
ReactElement<StepProps>[]
required
Eine Liste von Step-Komponenten.
​
titleSize
string
default:"p"
Die Größe der Schritttitel. Einer von p, h2 oder h3.

​
Eigenschaften eines einzelnen Schritts

​
children
string | ReactNode
required
Der Inhalt eines Schritts, entweder als Text oder als Komponenten.
​
icon
string
Das anzuzeigende Icon.Optionen:
  • Name eines Font Awesome-Icons
  • Name eines Lucide-Icons
  • JSX-kompatibler SVG-Code in geschweiften Klammern
  • URL zu einem extern gehosteten Icon
  • Pfad zu einer Icon-Datei in deinem Projekt
Für benutzerdefinierte SVG-Icons:
  1. Konvertiere dein SVG mit dem SVGR-Konverter.
  2. Füge deinen SVG-Code in das SVG-Eingabefeld ein.
  3. Kopiere das vollständige <svg>...</svg>-Element aus dem JSX-Ausgabefeld.
  4. Umschließe den JSX-kompatiblen SVG-Code mit geschweiften Klammern: icon={<svg ...> ... </svg>}.
  5. Passe height und width nach Bedarf an.
​
iconType
string
Der Iconstil von Font Awesome. Wird nur mit Font Awesome-Icons verwendet.Optionen: regular, solid, light, thin, sharp-solid, duotone, brands.
​
title
string
Der Titel ist der Haupttext des Schritts und wird neben dem Indikator angezeigt.
​
stepNumber
number
Die Nummer des Schritts.
​
titleSize
string
default:"p"
Die Größe der Schrittüberschriften. Einer von p, h2 oder h3.