Page cover

Fortschrittsbalken

Übersicht

Die Avonni Fortschrittsbalken-Komponente bietet eine dynamische und visuell ansprechende Möglichkeit, den Fortschritt zu einem Ziel oder den Abschlussstatus auf Experience Cloud-Websites darzustellen. Sie liefert Benutzern sofortiges visuelles Feedback zum Status laufender Prozesse, abgeschlossener Aufgaben oder anderer Fortschrittsmetriken.

Einstellungen

Name
Beschreibung
Verwendung

Beschriftung

Der angezeigte Text zur Identifizierung des Zwecks des Fortschrittsbalkens.

Implementieren Sie diese Eigenschaft, um den Benutzern ein klares Verständnis dafür zu geben, welchen Fortschritt der Balken anzeigt.

Wert

Ein numerischer Wert, der den aktuellen Fortschritt repräsentiert.

Legen Sie diese Eigenschaft fest, um den Prozentsatz oder Bruchteil der bereits abgeschlossenen Aufgabe oder des Prozesses widerzuspiegeln.

Wertbeschriftung

Das Etikett, das neben dem Wert angezeigt wird, häufig als Prozentsatz oder Bruchteil.

Verwenden Sie dies, um eine textliche Darstellung des Fortschrittswertes zu geben und den Benutzern Klarheit zu verschaffen.

Wertposition

Position der Wertbeschriftung relativ zum Fortschrittsbalken. Optionen sind Oben rechts, Links, Rechts, Oben links, Unten rechts, und Unten links.

Wählen Sie eine Wertposition, die die Lesbarkeit verbessert und zum Design des umgebenden Inhalts passt.

Größe

Die Dicke des Fortschrittsbalkens. Optionen sind Voll, X-Klein, Klein, Mittel, und Groß.

Wählen Sie eine Größe, die sicherstellt, dass der Fortschrittsbalken auffällig und harmonisch in das Gesamtdesign eingebettet ist.

Ausrichtung

Die Richtung, in der sich der Fortschrittsbalken füllt. Kann eingestellt werden auf Horizontal oder Vertikal.

Richten Sie die Orientierung an Layout und Flussrichtung des Inhalts aus, um eine intuitive Fortschrittsvisualisierung zu gewährleisten.

Wert anzeigen

Ein Schalter, um die Anzeige der Wertbeschriftung ein- oder auszublenden.

Verwenden Sie diese Einstellung, um den numerischen Fortschritt direkt auf dem Balken zur Benutzerreferenz anzuzeigen oder das Design sauber und minimalistisch zu halten.

Variante

Die Form des Fortschrittsbalkens. Optionen sind Basis für einen geraden Balken oder Zirkular für einen runden Fortschrittsanzeiger.

Wählen Sie eine Variante, die am besten zum Designmotiv der Seite und zur Art des dargestellten Fortschritts passt.

Strukturiert

Fügt dem Fortschrittsbalken einen strukturierten Effekt für zusätzliche visuelle Details hinzu.

Wenden Sie diese Eigenschaft an, um dem Fortschrittsbalken ein dynamischeres und taktileres Erscheinungsbild zu verleihen.

Thema

Vordefinierte Farbthemen, die die Art oder den Status des Fortschritts anzeigen. Verfügbare Themen sind Basis, Alt Inverse, Fehler, Information, Invertiert, Offline, Erfolg, und Warnung.

Wählen Sie ein Thema, um unterschiedliche Bedeutungen zu vermitteln — verwenden Sie beispielsweise Erfolg für abgeschlossene Aufgaben oder Warnung für ausstehende Aktionen.

Dicke

Passen Sie die Dicke des Fortschrittsbalkens an. Optionen sind Mittel, X-Klein, Klein, und Groß.

Wählen Sie die Dicke, die die Sichtbarkeit des Fortschrittsbalkens und die ästhetische Kompatibilität mit anderen Seitenelementen gewährleistet.

Zuletzt aktualisiert

War das hilfreich?