Umschalten
Überblick
Die Toggle-Komponente zeigt einen Schalter an, den Benutzer verschieben können, um zwischen zwei Zuständen umzuschalten. Wichtige Merkmale umfassen:
Klare visuelle Anzeige: Bietet eine sofortige visuelle Anzeige des aktuellen Zustands (ein oder aus).
Anpassbares Label: Fügen Sie ein Textlabel hinzu, um den Zweck des Schalters klar zu erklären.
Datenbindung: Der Zustand des Schalters (aktiviert oder deaktiviert) wird in einer Booleschen Variablenressource gespeichert, wodurch er leicht in bedingter Logik, Filtern und anderen Interaktionen verwendbar ist.
Anpassbare Nachrichten: Zeigt unterschiedliche Meldungen an, je nachdem, ob der Schalter aktiviert oder deaktiviert ist.
Stiloptionen: Steuern Sie die Größe und die Label-Variante.
Konfigurieren der Toggle-Komponente
Wählen Sie die Toggle-Komponente auf der Arbeitsfläche aus, um auf ihre Eigenschaften im Eigenschaften-Panel (rechter Bereich) zuzugreifen.
Grundlegende Eigenschaften
Diese Eigenschaften steuern die grundlegenden Daten und die Beschriftung des Toggles.
API-Name: (Text) Eine eindeutige Kennung für diese Komponenteninstanz (z. B. EnableFeatureToggle, ShowDetailsToggle).
Label: (Text) Das neben dem Schalter angezeigte Textlabel. Beispiel: "Funktion aktivieren", "Details anzeigen", "Aktiv". Seien Sie klar und prägnant.
Feldebene Hilfe: (Text, Optional) Hilfetext, der neben dem Label angezeigt wird und zusätzlichen Kontext oder Anweisungen bietet.
Wert (Aktiviert): (Boolean - Äußerst wichtig) Diese Eigenschaft enthält den aktuellen Zustand des Schalters:
true: Der Schalter ist aktiviert (ein).
false: Der Schalter 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 Schalters in anderen Teilen Ihrer Komponente zu verwenden.
Ihnen erlauben, einen Standardzustand festzulegen, indem Sie die Boolesche Variable initialisieren.
Erscheinungsbild-Eigenschaften
Diese Eigenschaften steuern die visuelle Darstellung des Toggles.
Variante: (Text - Aus Optionen wählen) Steuert den visuellen Stil und die Positionierung des Labels:
standard: Label wird über dem Schalter angezeigt.
label-inline: Label wird links vom Schalter angezeigt.
label-stacked: Label wird über dem Schalter angezeigt (ähnlich wie Standard).
label-hidden: Das Label ist verborgen. Verwenden Sie dies nur, wenn der Zweck des Schalters aus dem Kontext eindeutig ist.
Größe: (Text - Aus Optionen wählen) Wählen Sie eine Größe für Ihren Schalter.
Markierung ausblenden: (Boolean - Kontrollkästchen) Wenn aktiviert, blendet diese Einstellung die visuelle Markierung (Häkchen) im Inneren des Schalters aus. Die Schiebebewegung dient als Anzeige.
Verhaltens-Eigenschaften
Diese Einstellungen beeinflussen die Benutzerinteraktion.
Erforderlich: (Boolean - Kontrollkästchen) Wenn aktiviert, muss der Benutzer mit dem Schalter interagieren. Diese Einstellung wird nicht häufig verwendet.
Nur Lesen: (Boolean - Kontrollkästchen) Wenn aktiviert, kann der Benutzer den Zustand des Schalters 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 bedient werden.
Sichtbar: (Boolean) Steuert, ob die Toggle-Komponente auf der Seite sichtbar ist. Binden Sie dies an eine Boolesche Variable oder 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 der Schalter aktiviert (ein) ist.
Nachricht Toggle Inaktiv: (Text) Die Nachricht, die angezeigt wird, wenn der Schalter deaktiviert (aus) ist.
Beispiel: Steuerung der Komponenten-Sichtbarkeit
Dieses Beispiel zeigt, wie die Toggle-Komponente verwendet werden kann, um andere Komponenten bedingt anzuzeigen und so die Benutzererfahrung zu verbessern, indem Informationen nur bei Bedarf dargestellt werden.
Einen Toggle hinzufügen: Ziehen Sie eine Toggle-Komponente auf Ihre Arbeitsfläche.
API-Name: DetailsToggle
Label: "Details anzeigen"
Eine Datensatzdetail-Komponente hinzufügen (oder eine andere Komponente): Ziehen Sie eine Textkomponente (oder jede andere Komponente, die Sie bedingt anzeigen möchten) auf die Arbeitsfläche.
Wert: (Legen Sie dies auf den Inhalt fest, den Sie anzeigen/verbergen möchten)
Sichtbarkeit der Datensatzdetail-Komponente einstellen
Wählen Sie die Datensatzdetail-Komponente aus.
Suchen Sie im Eigenschaften-Panel die Eigenschaft Komponenten-Sichtbarkeit festlegen.
Binden Sie die Eigenschaft "checked" des Toggles an true.
Jetzt ist die Textkomponente nur sichtbar, wenn der Toggle eingeschaltet ist (und die "Aktiviert" Variable true ist).
Wichtige Ü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 der Schalter vorübergehend nicht verfügbar ist.
Anwendungsfälle: Erwägen Sie den Einsatz einer Toggle-Komponente, um die Sichtbarkeit von Komponenten zu steuern oder um eine Variable einzurichten.
Zuletzt aktualisiert
War das hilfreich?