Zum Hauptinhalt springen

ChoiceBox

In ChatGPT öffnen
Schatten dwc-choicebox 23.05
Java API

Die ChoiceBox-Komponente präsentiert eine Dropdown-Liste, aus der Benutzer eine einzelne Option auswählen können. Wenn eine Auswahl getroffen wird, wird der gewählte Wert im Button angezeigt. Sie eignet sich gut, wenn Benutzer aus einer festen Reihe vordefinierter Optionen wählen müssen, und die Pfeiltasten verwendet werden können, um durch die Liste zu navigieren.

Usages​

Inheritance

This class is a List component, and inherits its features and behaviors. For an overview of List properties, events, and other important information, please refer to the List documentation.

ChoiceBox-Komponenten werden für verschiedene Zwecke verwendet, wie z. B. zur Auswahl von Elementen aus einem Menü, zur Auswahl aus einer Liste von Kategorien oder zur Auswahl von Optionen aus vordefinierten Sets. Sie bieten eine organisierte und optisch ansprechende Möglichkeit für Benutzer, Auswahlen zu treffen, insbesondere wenn mehrere Optionen verfügbar sind. Häufige Verwendungen sind:

  1. Benutzerauswahl von Optionen: Der Hauptzweck einer ChoiceBox besteht darin, Benutzern zu ermöglichen, eine einzelne Option aus einer Liste auszuwählen. Dies ist wertvoll in Anwendungen, die von den Benutzern verlangen, Entscheidungen zu treffen, wie z. B.:

    • Auswahl aus einer Liste von Kategorien
    • Auswahl von Optionen aus vordefinierten Sets

  2. Formulareingaben: Bei der Gestaltung von Formularen, die von den Benutzern die Eingabe spezifischer Optionen erfordern, vereinfacht die ChoiceBox den Auswahlprozess. Ob es sich nun um die Auswahl eines Landes, eines Bundesstaates oder einer anderen Option aus einer vordefinierten Liste handelt, die ChoiceBox verbessert den Eingabeprozess.

  3. Filtern und Sortieren: Eine ChoiceBox kann für Filter- und Sortieraufgaben in Anwendungen verwendet werden. Benutzer können Filterkriterien oder Sortierpräferenzen aus einer Liste wählen, wodurch die Organisation und Navigation von Daten erleichtert wird.

  4. Konfiguration und Einstellungen: Wenn Ihre Anwendung Einstellungen oder Konfigurationsoptionen enthält, bietet die ChoiceBox eine unkomplizierte Möglichkeit für Benutzer, Präferenzen anzupassen. Benutzer können Einstellungen aus einer Liste auswählen, was es einfach macht, die Anwendung an ihre Bedürfnisse anzupassen.

Tipp

Die ChoiceBox ist dafür gedacht, verwendet zu werden, wenn eine vordefinierte Anzahl von Optionen verfügbar ist, und benutzerdefinierte Optionen sollten nicht erlaubt oder enthalten sein. Wenn es gewünscht ist, dass Benutzer benutzerdefinierte Werte eingeben können, verwenden Sie stattdessen eine ComboBox.

Die Verwendung der setDropdownType()-Methode weist dem type-Attribut einer ChoiceBox einen Wert zu und ebenso einen entsprechenden Wert für das data-dropdown-for-Attribut in der Dropdown-Liste der ChoiceBox. Dies ist hilfreich für das Styling, da das Dropdown aus seiner aktuellen Position im DOM entfernt und beim Öffnen ans Ende des Seitenkörpers verschoben wird.

Diese Abtrennung schafft eine Situation, in der es schwierig wird, das Dropdown mit CSS- oder Shadow-Part-Selektoren aus der übergeordneten Komponente direkt anzusprechen, es sei denn, Sie verwenden das Dropdown-Typ-Attribut.

Im Demo unten wird der Dropdown-Typ festgelegt und in der CSS-Datei verwendet, um eine Option zu vergrößern, wenn Sie mit der Maus darüber fahren.

Code anzeigen

Max row count​

Standardmäßig wird die Anzahl der in der Dropdown-Liste einer ChoiceBox angezeigten Zeilen erhöht, um den Inhalt anzupassen. Mit der setMaxRowCount()-Methode kann jedoch festgelegt werden, wie viele Elemente angezeigt werden.

Tipp

Die Verwendung einer Zahl, die kleiner oder gleich 0 ist, führt dazu, dass diese Eigenschaft zurückgesetzt wird.

Code anzeigen

Opening and closing​

Die Sichtbarkeit der Optionen für eine ChoiceBox kann programmgesteuert mit den Methoden open() und close() gesteuert werden. Diese Methoden ermöglichen es Ihnen, die Liste der Auswahlmöglichkeiten anzuzeigen oder auszublenden, je nach Bedarf, und bieten so eine größere Flexibilität bei der Verwaltung des Verhaltens einer ChoiceBox.

Darüber hinaus verfügt webforJ über Ereignislistener, die ausgeführt werden, wenn die ChoiceBox geschlossen und wenn sie geöffnet wird, wodurch Sie mehr Kontrolle haben, um spezifische Aktionen auszulösen.

//Fokus oder öffne das nächste Element in einem Formular
ChoiceBox university = new ChoiceBox("Universität");
ChoiceBox major = new ChoiceBox("Hauptfach");
Button submit = new Button("Absenden");

//... Fügen Sie Listen von Universitäten und Hauptfächern hinzu

university.onClose(e ->{
  major.focus();
});

major.onClose(e ->{
  submit.focus();
});

Opening dimensions​

Die ChoiceBox-Komponente verfügt über Methoden, die die Manipulation der Dropdown-Dimensionen ermöglichen. Die maximale Höhe und minimale Breite des Dropdowns können jeweils mit den Methoden setOpenHeight() und setOpenWidth() festgelegt werden.

Tipp

Das Übergeben eines String-Wertes an eine dieser Methoden ermöglicht die Anwendung von beliebigen gültigen CSS-Einheiten, wie z. B. Pixel, Viewport-Dimensionen oder andere gültige Regeln. Das Übergeben eines int setzt den übergebenen Wert in Pixeln.

Prefix and suffix​

Slots bieten flexible Optionen zur Verbesserung der Funktionalität einer ChoiceBox. Sie können Icons, Labels, Ladeanzeigen, die Möglichkeit zum Löschen/Zurücksetzen, Avatar-/Profilbilder und andere nützliche Komponenten innerhalb einer ChoiceBox haben, um den Benutzern zusätzliche Klarheit über die beabsichtigte Bedeutung zu geben. Die ChoiceBox hat zwei Slots: die prefix- und suffix-Slots. Verwenden Sie die Methoden setPrefixComponent() und setSuffixComponent(), um verschiedene Komponenten vor und nach der angezeigten Option innerhalb einer ChoiceBox einzufügen.

ComboBox choiceBox = new ChoiceBox());
  choiceBox.setPrefixComponent(TablerIcon.create("box"));
  choiceBox.setSuffixComponent(TablerIcon.create("box"));

Styling​

Loading...

Best practices​

Um ein optimales Benutzererlebnis bei der Verwendung der ChoiceBox-Komponente zu gewährleisten, sollten die folgenden bewährten Verfahren berücksichtigt werden:

  1. Klare und begrenzte Optionen: Halten Sie die Liste der Optionen so prägnant wie möglich und relevant für die Aufgabe des Benutzers. Eine ChoiceBox eignet sich hervorragend für die Präsentation einer klaren Liste von Optionen.

  2. Benutzerfreundliche Labels: Stellen Sie sicher, dass die angezeigten Labels für jede Option benutzerfreundlich und selbsterklärend sind. Stellen Sie sicher, dass die Benutzer den Zweck jeder Auswahl leicht verstehen können.

  3. Vorauswahl: Stellen Sie eine Vorauswahl ein, wenn die ChoiceBox zunächst angezeigt wird. Dies gewährleistet eine vorab ausgewählte Option, wodurch die Anzahl der erforderlichen Interaktionen zur Auswahl einer Option verringert wird.

  4. ChoiceBox vs. Andere Listenelemente: Eine ChoiceBox ist die beste Wahl, wenn Sie die Benutzereingabe auf eine einzige Auswahl aus einer Liste vordefinierter Optionen beschränken müssen. Ein anderes Listenelement eignet sich möglicherweise besser, wenn die folgenden Verhaltensweisen erforderlich sind:

    • Mehrfachauswahl und Anzeige aller Elemente auf einmal: ListBox
    • Ermöglichen Sie benutzerdefinierte Eingaben: ComboBox