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
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.
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?