Zum Hauptinhalt springen

RadioButton

In ChatGPT öffnen
Shadow dwc-radio 23.01
Java API

Die RadioButton-Komponente ist ein Objekt, das ausgewählt oder abgewählt werden kann und seinen Status dem Benutzer anzeigt. Radiobuttons werden häufig verwendet, wenn sich gegenseitig ausschließend Optionen verfügbar sind, sodass der Benutzer eine einzelne Option aus einer Reihe von Auswahlmöglichkeiten auswählen kann.

Code anzeigen

Gruppierung von RadioButton-Komponenten

Verwenden Sie eine RadioButtonGroup, um eine Gruppe von Radiobuttons zu verwalten, wenn Sie möchten, dass die Benutzer eine einzige Option auswählen.

Verwendung​

Der RadioButton wird am besten in Szenarien verwendet, in denen Benutzer eine einzelne Auswahl aus einer vordefinierten Menge von Optionen treffen müssen. Hier sind einige Beispiele, wann der RadioButton verwendet werden sollte:

  1. Umfragen oder Fragebögen: Radiobuttons werden häufig in Umfragen oder Fragebögen verwendet, bei denen Benutzer eine einzige Antwort aus einer Liste von Optionen auswählen müssen.

  2. Einstellungseinstellungen: Anwendungen, die Einstellungs- oder Präferenzfenster beinhalten, verwenden häufig Radiobuttons, um den Benutzern zu ermöglichen, eine einzelne Option aus einer Gruppe von sich gegenseitig ausschließenden Auswahlmöglichkeiten zu wählen.

  3. Filtern oder Sortieren: Ein RadioButton kann in Anwendungen verwendet werden, die erfordern, dass Benutzer eine einzelne Filter- oder Sortierungsoption auswählen, wie das Sortieren einer Liste von Elementen nach verschiedenen Kriterien.

Text und Positionierung​

Radiobuttons können die Methode setText(String text) nutzen, die in der Nähe des Radiobuttons positioniert wird, gemäß der integrierten Position. Radiobuttons verfügen über eine integrierte Funktion, um Text anzuzeigen, der entweder rechts oder links von der Komponente angezeigt wird. Standardmäßig wird der Text rechts von der Komponente angezeigt. Die Positionierung des horizontalen Texts wird durch die Verwendung der Enum-Klasse HorizontalAlignment unterstützt. Nachfolgend sind die beiden Einstellungen aufgeführt:

Code anzeigen

Aktivierung​

Radiobuttons können mit zwei Arten von Aktivierungen gesteuert werden: manuelle Aktivierung und automatische Aktivierung. Diese bestimmen, wann sich ein RadioButton in seinem Status ändert.

Code anzeigen

Manuelle Aktivierung​

Wenn ein Radiobutton auf manuelle Aktivierung eingestellt ist, bedeutet dies, dass er nicht automatisch aktiviert wird, wenn er den Fokus erhält. Die manuelle Aktivierung ermöglicht es dem Benutzer, durch die Radiobutton-Optionen mit der Tastatur oder anderen Eingabemethoden zu navigieren, ohne sofort die ausgewählte Option zu ändern.

Wenn der Radiobutton Teil einer Gruppe ist, wird das Auswählen eines anderen Radiobuttons innerhalb der Gruppe automatisch den zuvor ausgewählten Radiobutton abwählen. Die manuelle Aktivierung bietet eine genauere Kontrolle über den Auswahlprozess, wobei eine ausdrückliche Handlung des Benutzers erforderlich ist, um die ausgewählte Option zu ändern.

Automatische Aktivierung​

Die automatische Aktivierung ist der Standardzustand für einen RadioButton und bedeutet, dass der Button aktiviert wird, wenn er aus irgendeinem Grund den Fokus erhält. Dies bedeutet, dass nicht nur das Klicken, sondern auch das Autofokus oder die Tab-Navigation den Button aktivieren.

Hinweis

Der Standardwert für die Aktivierung ist MANUAL Aktivierung.

Schalter​

Ein RadioButton kann auch als Schalter angezeigt werden, der eine alternative visuelle Darstellung für die Auswahl von Optionen bietet. Normalerweise sind Radiobuttons kreisförmig oder abgerundet und zeigen eine einzelne Wahl aus einer Gruppe von Optionen an.

Code anzeigen

Ein RadioButton kann in einen Schalter umgewandelt werden, der einem Kippschalter oder Schieberegler ähnelt, indem eine von zwei Methoden verwendet wird:

  1. Die Fabrikmethode: Der Radiobutton kann mit den folgenden Fabrikmethoden erstellt werden:
Switch(String text, boolean checked);
Switch(String text);
Switch();

Diese Methoden spiegeln einen RadioButton-Konstruktor wider und erstellen die Komponente mit der Schaltereigenschaft, die bereits aktiviert ist.

  1. Setter: Es ist auch möglich, einen bereits vorhandenen RadioButton in einen Schalter zu ändern, indem der entsprechende Setter verwendet wird:
myRadioButton.setSwitch(true);

Wenn ein RadioButton als Schalter angezeigt wird, hat er typischerweise eine längliche Form mit einem Indikator, der ein- oder ausgeschaltet werden kann. Diese visuelle Darstellung bietet den Benutzern eine intuitivere und vertrautere Benutzeroberfläche, ähnlich wie physische Schalter, die häufig in elektronischen Geräten zu finden sind.

Das Einstellen eines RadioButton zur Anzeige als Schalter kann die Benutzererfahrung verbessern, indem es eine klare und unkomplizierte Möglichkeit bietet, Optionen auszuwählen. Es kann die visuelle Anziehungskraft und Benutzerfreundlichkeit von Formularen, Einstellungsfenstern oder anderen Benutzerschnittstellenelementen, die mehrere Auswahlmöglichkeiten erfordern, erhöhen.

Info

Das Verhalten des RadioButton bleibt dasselbe, wenn es als Schalter gerendert wird, was bedeutet, dass innerhalb einer Gruppe nur eine Option ausgewählt werden kann. Das schalterähnliche Aussehen ist eine visuelle Transformation, die die Funktionalität eines RadioButton beibehält.


Styling​

Ausdehnungen​

Es gibt fünf Checkbox-Ausdehnungen, die unterstützt werden und eine schnelle Stilgestaltung ohne Verwendung von CSS ermöglichen. Ausdehnungen werden durch die Verwendung der Enum-Klasse Expanse unterstützt. Nachfolgend sind die unterstützten Ausdehnungen für die Checkbox-Komponente aufgeführt:

Loading...

Beste Praktiken​

Um ein optimales Benutzererlebnis bei der Verwendung der RadioButton-Komponente zu gewährleisten, sollten Sie die folgenden besten Praktiken berücksichtigen:

  1. Optionen deutlich kennzeichnen: Geben Sie klaren und präzisen Text für jede RadioButton-Option an, um die Wahl genau zu beschreiben. Der Text sollte leicht verständlich und voneinander zu unterscheiden sein.

  2. Radiobuttons gruppieren: Gruppieren Sie verwandte Radiobuttons, um ihre Zugehörigkeit anzuzeigen. Dies hilft den Benutzern, zu verstehen, dass innerhalb einer bestimmten Gruppe nur eine Option ausgewählt werden kann. Dies kann effektiv mit der RadioButtonGroup Komponente erreicht werden.

  3. Voreingestellte Auswahl bieten: Wenn anwendbar, sollten Sie in Betracht ziehen, eine voreingestellte Auswahl für Radiobuttons bereitzustellen, um die Benutzer zu leiten, wenn sie zum ersten Mal auf die Optionen stoßen. Die voreingestellte Auswahl sollte mit der häufigsten oder bevorzugten Wahl übereinstimmen.