YouTube ChannelSchedule a CallSubscribe for Updates

Komponenten-Sichtbarkeit

Übersicht

Dynamische Sichtbarkeit ist eine leistungsstarke Funktion, mit der Sie Benutzeroberflächen erstellen können, die sich an verschiedene Situationen anpassen. wann eine Komponente sichtbar sein sollte.

Hauptvorteile

  • Verbesserte Benutzererfahrung: Erstellen Sie übersichtlichere Oberflächen, indem Sie nur relevante Informationen zur richtigen Zeit anzeigen.

  • Verbesserte Leistung: Verborgene Komponenten werden nicht geladen, wodurch Seitenladezeiten und Serveranfragen reduziert werden.

  • Responsive Design: Passen Sie Layouts und Komponentenanzeige für verschiedene Geräte (Desktop, Tablet, Telefon) an.

  • Reaktionsfähigere UI: Die Oberfläche wirkt dynamisch, da Komponenten basierend auf Aktionen, Daten oder Gerät erscheinen/verschwinden.

  • Vereinfachte Logik: Erreichen Sie komplexe bedingte Darstellungen ohne aufwändige Interaktionen oder Code

Wie Dynamische Sichtbarkeit funktioniert

Jede Avonni-Komponente hat ein Komponente sichtbar setzen Eigenschaft (im Eigenschaftenbereich), die ihre Anzeige steuert. Sie können sie einstellen auf:

  • Immer sichtbar (true): Standard; die Komponente wird immer angezeigt.

  • Immer verborgen (false): Die Komponente wird niemals angezeigt.

  • Bedingte Sichtbarkeit: Die Komponente wird nur angezeigt, wenn bestimmte Bedingungen erfüllt sind.

Einrichten der bedingten Sichtbarkeit

Um die Sichtbarkeit einer Komponente bedingt zu machen:

  1. So konfigurieren Sie die Interaktion „Open Flow Dialog": Klicken Sie auf die Komponente in der Leinwand, deren Sichtbarkeit Sie steuern möchten.

  2. Suchen Sie die Eigenschaft "Komponenten-Sichtbarkeit festlegen": Im Eigenschaftenbereich (rechte Seite) finden Sie das Sichtbar Eigenschaft an.

  3. Klicken Sie auf den Ressourcen-Auswähler: Klicken Sie auf das Symbol neben der Sichtbar Eigenschaft (normalerweise ein Variablen-/Tag-Symbol). Dies öffnet das Ressourcen-Auswahlmenü. Geben Sie nicht einfach ein true oder false wenn Sie nicht möchten, dass die Komponente immer sichtbar oder immer verborgen ist.

  4. Wählen Sie Ihre Bedingung:

  • Komponentenattribut: Basieren Sie die Sichtbarkeit auf dem Zustand oder Wert von einer anderen Komponente (z. B. zeigen Sie Komponente B nur, wenn @MyCheckbox.checked wahr ist).

  • Variable: Verwenden Sie eine Boolean Variable-Ressource, die Sie erstellt haben. Die Komponente wird angezeigt, wenn die Variable true.

  • Formel: Verwenden Sie eine Formel Ressource, die zu true (sichtbar) oder false (verborgen) auswertet. Ermöglicht komplexe Logik.

  • Globale Variable: Verwenden Sie systembereitgestellte Informationen.

    • Neu: Für Gerätetyp: Wählen Sie $Component, wählen Sie dann das FormFactor Attribut. Dieses enthält den aktuellen Gerätetyp als Text: 'Desktop', 'Tablet', oder 'Phone'.

Beispiele

Bedingte Anzeige eines Kalenders

Lassen Sie uns ein Beispiel erstellen, bei dem eine Avonni-Kalenderkomponente nur sichtbar ist, wenn der Benutzer in einem Avonni-Button-Menü.

1

eine "Kalender"-Option auswählt.

  • Fügen Sie ein Button-Menü hinzu Button Menu Ziehen Sie eine Avonni-

  • Komponente auf die Leinwand. Elemente:

    • Konfigurieren Sie in ihren Eigenschaften das Fügen Sie ein Element mit, Beschriftung: Tabelle

    • Konfigurieren Sie in ihren Eigenschaften das Wert: table, Beschriftung: Kalender

  • Wert: calendar API-Namen (z. B., Geben Sie dem Button-Menü eine beschreibende).

2

ViewModeMenu

Fügen Sie ein Button-Menü hinzu Fügen Sie den Kalender Kalender

3

Komponente zur Leinwand hinzu

  • Wählen Sie die Fügen Sie den Kalender Komponente ausgelöst.

  • Stellen Sie die Sichtbarkeit des Kalenders ein Sichtbar Eigenschaft an.

  • Im Eigenschaftenbereich finden Sie das

  • Wählen Sie Komponentenattribut.

  • Klicken Sie auf das Symbol des Ressourcen-Auswählers. Geben Sie dem Button-Menü eine beschreibende).

  • Wählen Sie Ihre Button-Menü-Komponente (z. B., Wählen Sie das Attribut zu verwenden.

  • Wert gleich

  • Setzen Sie den Wert auf Stellen Sie den Operator auf.

So funktioniert es

calendar Sichtbar Die Wählen Sie das der Geben Sie dem Button-Menü eine beschreibende Eigenschaft des Kalenders ist jetzt direkt mit dem Wählen Sie das Button-Menü verknüpft. Wenn der Benutzer im Button-Menü "Kalender" auswählt, wird das zu'calendar' true, wird die Bedingung zu falseausgewertet, und die Kalenderkomponente wird angezeigt. Wenn eine andere Option ausgewählt ist, wird die Bedingung , und der Kalender wird.

nicht geladen

Gerätespezifisches Layout

1

Zeigen wir eine detaillierte Datentabelle auf Desktops/Tablets, aber eine einfachere Listenkomponente auf Telefonen.

Daten-Tabelle hinzufügen Fügen Sie Ihre Datentabelle-Komponente hinzu (z. B.,).

2

MyDataTable

  • Wählen Sie Fügen Sie Ihre Datentabelle-Komponente hinzu (z. B.,.

  • Im Sichtbar Stellen Sie die Sichtbarkeit der Datentabelle ein Eigenschaft, setzen Sie die Bedingung: Globale Variable $Component.FormFactor 'Phone'.

3

ungleich

Listenkomponente hinzufügen Fügen Sie Ihre Listenkomponente hinzu (z. B.,MyList

4

) die für die mobile Anzeige konzipiert ist.

  • Wählen Sie Fügen Sie Ihre Listenkomponente hinzu (z. B.,.

  • Im Sichtbar Stellen Sie die Sichtbarkeit der Datentabelle ein Eigenschaft, setzen Sie die Bedingung: Globale Variable gleich 'Phone'.

Ergebnis: Stellen Sie die Sichtbarkeit der Liste ein

Benutzer auf Desktops oder Tablets sehen die Datentabelle, während Benutzer auf einem Telefon die Listenkomponente sehen, wodurch eine optimierte Ansicht für jeden Gerätetyp bereitgestellt wird.

  • Häufige Anwendungsfälle Bedingte Formulare:

  • Zeigen/Verbergen von Formularfeldern basierend auf vorherigen Auswahlmöglichkeiten. Personalisierte Dashboards:

  • Zeigen Sie verschiedene Komponenten basierend auf Benutzerrolle oder Profil an. Progressive Offenlegung:

  • Enthüllen Sie Informationen schrittweise, während der Benutzer interagiert. Fehlermeldungen:

  • Zeigen Sie Fehlermeldungen nur an, wenn ein Fehler auftritt. Ladeanzeigen:

  • Zeigen Sie eine Ladeanzeige, während Daten abgerufen werden, und verbergen Sie sie dann und zeigen Sie die Datenkomponente an. Erstellen von responsiven Layouts

die sich an Desktop-, Tablet- und Telefonbildschirme anpassen

  • Tipps Einfach anfangen:

  • Beginnen Sie mit einfachen Bedingungen und erhöhen Sie die Komplexität schrittweise. Gründlich testen:

  • Testen Sie Ihre Sichtbarkeitsbedingungen mit unterschiedlichen Daten und Benutzerinteraktionen. Formeln mit Bedacht verwenden:

  • Obwohl leistungsfähig, können komplexe Formeln schwerer zu warten sein. Verwenden Sie boolesche Variablen:

Zusammenfassung

Erstellen Sie boolesche Variablen, um die Lesbarkeit zu erhöhen. Sichtbar Dynamische Sichtbarkeit ist eine Kernfunktion von Avonni Dynamic Components und bietet eine leistungsstarke Möglichkeit, responsive und effiziente Benutzeroberflächen zu erstellen. Durch das Verknüpfen der Globale Variable Eigenschaft mit Daten, Komponentenattributen, Formeln oder der neuen

Zuletzt aktualisiert

War das hilfreich?