Umschalter
Die Toggle-Komponente bietet eine benutzerfreundliche Möglichkeit, eine binäre Wahl (ein/aus, wahr/falsch) innerhalb Ihrer Dynamic Components darzustellen.
Übersicht
Die Toggle-Komponente zeigt einen Schalter, den Benutzer verschieben können, um zwischen zwei Zuständen zu wechseln. Wichtige Merkmale sind:
Klare visuelle Anzeige: Bietet eine sofortige visuelle Anzeige des aktuellen Zustands (an oder aus).
Anpassbares Label: Fügen Sie ein Textlabel hinzu, um den Zweck des Toggles klar zu erklären.
Datenbindung: Der Zustand des Toggles (aktiviert oder deaktiviert) wird in einer Booleschen Variablenressource gespeichert, wodurch er leicht in bedingter Logik, Filtern und anderen Interaktionen verwendet werden kann.
Anpassbare Nachrichten: Zeigt unterschiedliche Nachrichten an, je nachdem, ob das Toggle aktiviert oder deaktiviert ist.
Styling-Optionen: Steuern Sie die Größe und die Label-Variante.
Konfigurieren der Toggle-Komponente
Wählen Sie die Toggle-Komponente auf der Leinwand aus, um auf ihre Eigenschaften im Eigenschaftenfenster (rechte Leiste) zuzugreifen.
Grundlegende Eigenschaften
Diese Eigenschaften steuern die grundlegenden Daten und die Beschriftung des Toggles.
API-Namen: (Text) Eine eindeutige Kennung für diese Komponenteninstanz (z. B. EnableFeatureToggle, ShowDetailsToggle).
Beschriftung: (Text) Das neben dem Umschalter angezeigte Textlabel. Beispiel: "Funktion aktivieren", "Details anzeigen", "Aktiv". Seien Sie klar und präzise.
Feldhilfetext: (Text, optional) Hilfetext, der neben dem Label angezeigt wird und zusätzlichen Kontext oder Anweisungen bietet.
Wert (Checked): (Boolean - äußerst wichtig) Diese Eigenschaft enthält den aktuellen Zustand des Toggles:
true: Das Toggle ist aktiviert (an).
false: Das Toggle ist deaktiviert (aus).
Datenbindung: Sie müssen diese Eigenschaft an eine Boolesche Variablenressource binden. Diese Variable wird:
Die Auswahl des Benutzers speichern.
Ihnen erlauben, den Zustand des Toggles in anderen Teilen Ihrer Komponente zu verwenden.
Ihnen erlauben, einen Standardzustand festzulegen, indem Sie die Boolesche Variable initialisieren.
Aussehens-Eigenschaften
Diese Eigenschaften steuern die visuelle Darstellung des Toggles.
Variante: (Text - Auswahlmöglichkeiten) Steuert den visuellen Stil und die Positionierung des Labels:
standard: Label wird über dem Toggle angezeigt.
label-inline: Label wird links neben dem Toggle angezeigt.
label-stacked: Label wird über dem Toggle angezeigt (ähnlich wie standard).
label-hidden: Das Label ist ausgeblendet. Verwenden Sie dies nur, wenn der Zweck des Toggles aus dem Kontext klar ist.
Größe: (Text - Auswahlmöglichkeiten) Wählen Sie eine Größe für Ihr Toggle.
Markierung ausblenden: (Boolean - Kontrollkästchen) Wenn aktiviert, blendet diese Einstellung die visuelle Markierung (Häkchen) im Inneren des Toggles aus. Die Schiebanimation dient als Anzeige.
Verhaltens-Eigenschaften
Diese Einstellungen beeinflussen die Benutzerinteraktion.
Erforderlich: (Boolean - Kontrollkästchen) Wenn aktiviert, muss der Benutzer mit dem Toggle interagieren. Diese Einstellung wird nicht häufig verwendet.
Schreibgeschützt: (Boolean - Kontrollkästchen) Wenn aktiviert, kann der Benutzer den Zustand des Toggles sehen, ihn aber nicht ändern. Nützlich, um eine schreibgeschützte Einstellung anzuzeigen.
Deaktiviert: (Boolean - Kontrollkästchen) Wenn aktiviert, ist die Toggle-Komponente vollständig deaktiviert und kann nicht verwendet werden.
Sichtbar: (Boolean) Steuert, ob die Toggle-Komponente auf der Seite sichtbar ist. Binden Sie dies an eine Boolesche Variable oder eine Formel für dynamische Sichtbarkeit.
Benutzerdefinierte Nachrichten (optional)
Diese Eigenschaften ermöglichen es Ihnen, Nachrichten anzupassen.
Nachricht Toggle Aktiv: (Text) Die Nachricht, die angezeigt wird, wenn das Toggle aktiviert ist (an).
Nachricht Toggle Inaktiv: (Text) Die Nachricht, die angezeigt wird, wenn das Toggle deaktiviert ist (aus).
Beispiel: Steuern der Komponenten-Sichtbarkeit
Dieses Beispiel zeigt, wie Sie die Toggle-Komponente nutzen können, um andere Komponenten bedingt anzuzeigen und so die Benutzererfahrung zu verbessern, indem Informationen nur bei Bedarf dargestellt werden.
Fügen Sie ein Toggle hinzu: Ziehen Sie eine Toggle-Komponente auf Ihre Leinwand.
API-Name: DetailsToggle
Label: "Details anzeigen"
Fügen Sie eine Komponente für Datensatzdetails hinzu (oder eine andere Komponente): Ziehen Sie eine Textkomponente (oder jede andere Komponente, die Sie bedingt anzeigen möchten) auf die Leinwand.
Wert: (Legen Sie dies auf den Inhalt fest, den Sie anzeigen/ausblenden möchten)
Stellen Sie die Sichtbarkeit der Datensatzdetail-Komponente ein
Wählen Sie die Datensatzdetail-Komponente aus.
Suchen Sie im Eigenschaftenfenster die Eigenschaft Komponente Sichtbarkeit festlegen.
Binden Sie die Checked-Eigenschaft des Toggles an true.
Nun ist die Textkomponente nur sichtbar, wenn das Toggle eingeschaltet ist (und die "Checked" Variable wahr ist).
Wesentliche Überlegungen
Klare Beschriftung: Verwenden Sie ein klares und prägnantes Label, um den Zweck des Toggles zu erklären.
Berücksichtigen Sie Nur-Lesen/Deaktiviert: Verwenden Sie Nur-Lesen, um eine Einstellung anzuzeigen. Verwenden Sie Deaktiviert, um anzuzeigen, dass das Toggle vorübergehend nicht verfügbar ist.
Anwendungsfälle: Ziehen Sie in Betracht, eine Toggle-Komponente zu verwenden, um die Sichtbarkeit von Komponenten zu steuern oder eine Variable einzurichten.
Zuletzt aktualisiert
War das hilfreich?