Erstellung eine Radio-Button-Liste

Es gibt 5 Möglichkeiten eine Radio-Button-Liste zu erstellen.

Screenshot Frontend Radio Button List Variants:

Man legt zuerst eine Section an und in diese fügt man eine Radio button list ein.

Variante 1

Auf die Section setzt man die CSS-Klasse „lan-form-styles__radiolist“ und

Screenshot Backend Section für Radio Button List Normal:

auf die Radio button list setzt man die CSS- Klasse „lan-form-styles__radiolist-label“ als Label-Klasse.

Screenshot Backend Radio Button List Label:

Der Hintergrund der Radio Buttons wird beim Anhaken rot.

Screenshot Frontend Radio Button List Normal:

Variante 2

Bei der Variante 2 baut man die Radio button list genauso wie Variante 1 auf und setzt zusätzlich die CSS-Klasse „lan-form-styles_inverted“ auf die Section.

Screenshot Backend Section für Radio Button List Inverted:

Der Hintergrund der Radio buttons wird beim Anhaken weiß.

Screenshot Frontend Radio Button List Inverted:

Variante 3

Bei der Variante 3 baut man die Radio button list genauso wie Variante 1 auf und setzt zusätzlich die CSS-Klasse „checkboxliststyle“ auf die Section.

Screenshot Backend Section für Radio Button List Inverted:

Die Radio buttons werden nun wie Checkboxen dargestellt, haben aber immer noch die Funktionalität von Radio Buttons, man kann also immer nur eine Auswahl treffen. Der Hintergrund der Radio buttons bzw. Checkboxen wird beim Anhaken rot.

Screenshot Frontend Radio Button List As Checkboxes:

Variante 4

Bei der Variante 4 setzt man auf die Section die CSS-Klasse „lan-form-styles__radio“ und

Screenshot Backend Section für Radio Button List as Buttons:

auf die Radio button list setzt man als CSS- Klasse „lan-form-styles__radio-button-label“ als Label-Klasse.

Screenshot Backend Radio Button List Label:

Die Radio Buttons werden nebeneinander als Buttons dargestellt, die je nach Text unterschiedlich breit sind. Ein inaktiver Button hat eine graue Schrift, ein aktivierter Button hat einen roten Hintergrund und eine weiße Schrift und beim Hover mit der Mouse wird die Schrift schwarz und die Umrandung des Buttons rot hervorgehoben.

Screenshot Frontend Radio Button List as Buttons:

Variante 5

Bei der Variante 5 baut man die Radio button list genauso auf wie bei Variante 4 und setzt die Section in eine weitere Section, die die CSS-Klasse „lan-form-styles__size-full“ bekommt.

Screenshot Backend Section um Section für Radio Button List as Buttons:

Die Radio buttons werden untereinander in voller Breite als Buttons dargestellt.

Screenshot Frontend Radio Button List as Buttons Below: