Illustration

Die Illustration-Komponente ermöglicht es Ihnen, vorgefertigte Illustrationen in Ihren Avonni Dynamic Components anzuzeigen.

Übersicht

Die Illustration-Komponente ist ein visuelles Element. Es wird hauptsächlich verwendet, um die Benutzeroberfläche zu verbessern und Informationen auf visuell ansprechende Weise zu vermitteln. Avonni stellt eine Bibliothek integrierter Illustrationen zur Verfügung, aus der Sie wählen können.

Anwendungsfälle

• Leere Zustände: Zeigen Sie eine Illustration an, wenn eine Datentabelle oder Liste keine Daten zum Anzeigen hat (z. B. eine Illustration eines leeren Posteingangs mit dem Text „Noch keine Nachrichten“).

• Erfolgs-/Bestätigungsnachrichten: Zeigen Sie eine Illustration an, um eine erfolgreiche Aktion zu bestätigen (z. B. eine Häkchen-Illustration, nachdem ein Datensatz gespeichert wurde).

• Fehler-/Warnmeldungen: Verwenden Sie eine Illustration, um einen Fehler- oder Warnzustand visuell darzustellen.

• Visuelle Unterbrechungen: Fügen Sie visuelles Interesse hinzu und unterbrechen Sie große Text- oder Datenblöcke.

• Branding: Verwenden Sie Illustrationen, die zum visuellen Stil Ihrer Marke passen.

• Seite nicht gefunden

Einrichten Ihrer Illustration

Eigenschaften

API-Namen

Eine eindeutige Kennung für die Komponente innerhalb Ihrer dynamischen Komponente.

Titel

Der Haupttiteltext, der als Teil der Illustration angezeigt wird. Dies kann statischer Text oder an einen dynamischen Wert gebunden sein (Variable, Formel, Komponentenattribut).

Inhalt

Zusätzlicher Textinhalt, der unter dem Titel angezeigt wird und oft für eine Beschreibung oder Nachricht verwendet wird. Dieser kann ebenfalls statisch oder dynamisch sein.

Variante

Wählt die spezifische Illustration aus, die angezeigt werden soll. Avonni stellt eine Reihe voreingestellter Illustrationen bereit, jede mit einem eindeutigen Namen (z. B. „desert“, „empty“, „no_access“ usw.). Weitere Informationen zu allen verfügbaren Varianten und den zugehörigen Bildern finden Sie in der Avonni-Dokumentation. Die verfügbaren Optionen sind nicht Freitext; Sie müssen aus der bereitgestellten Liste auswählen.

Größe

Steuert die Größe der Illustration. Gängige Optionen umfassen:

• Klein

• Mittel

• Groß

• (Weitere Größenoptionen können je nach Avonni-Version verfügbar sein).

Sichtbar

Es steuert die Sichtbarkeit und unterstützt dynamisches Ein- und Ausblenden.

Beispiele

Beispiel 1: Illustration für leeren Zustand

1. Fügen Sie eine Illustration-Komponente zu Ihrer Leinwand hinzu.

2. Setzen Sie die Variante auf „Kein Inhalt“ (oder eine ähnliche Variante, die für einen leeren Zustand geeignet ist).

3. Setzen Sie die Titel auf „Keine Datensätze gefunden“.

4. Setzen Sie die Inhalt auf „Derzeit sind keine Datensätze zum Anzeigen vorhanden.“

5. Stellen Sie die Größe auf mittel.

6. Konfigurieren Sie die Sichtbar Eigenschaft der Illustration-Komponente so, dass sie dynamisch gesteuert wird (z. B. die Illustration nur anzeigen, wenn eine Datentabelle keine Zeilen hat).

Wichtige Überlegungen

• Variantenauswahl: Wählen Sie eine Variante aus, die für die Botschaft, die Sie vermitteln möchten, geeignet ist. Verwenden Sie die Avonni-Dokumentation für visuelle Beispiele jeder Variante.

• Titel und Inhalt: Verwenden Sie die Titel und Inhalt Eigenschaften, um dem Benutzer klare und prägnante Nachrichten zu übermitteln.

• Dynamischer Text: Sie können Variablen, Formeln und Komponentenattribute verwenden, um den Titel und Inhalt dynamisch zu machen.

• Barrierefreiheit: Denken Sie an Benutzer mit Sehbehinderungen. Während Illustrationen hilfreich sein können, stellen Sie sicher, dass die wesentlichen Informationen auch durch Text vermittelt werden (z. B. durch effektive Nutzung der Titel und Inhalt Eigenschaften).

• Größe: Wählen Sie eine geeignete Größe für die Illustration basierend auf ihrem Kontext und den umgebenden Komponenten.

Zusammenfassung

Die Illustration-Komponente ermöglicht es Ihnen, ein Bild hinzuzufügen, um die visuellen Elemente Ihrer dynamischen Komponente zu verbessern. Anwendungsfälle für die Illustration-Komponenten umfassen die Anzeige eines leeren Zustands, einer Erfolgsmeldung oder einer „Nicht gefunden“-Information.