Un groupe de boutons radio Vaadin peut-il être conçu comme un groupe de boutons ?

Question

Est-il possible de styliser les boutons radio dans vaadin comme un ensemble de boutons et de colorer un bouton sélectionné ?

Je souhaite utiliser un groupe de boutons comme les boutons radio. Un élément peut être vérifié et les autres ne peuvent pas être vérifiés.

Answer 1

En supposant Vaadin 23 (la structure des composants peut changer dans d'autres versions), cela semble réalisable.

Dans global styles.css, ajoutez :

vaadin-radio-group.buttons vaadin-radio-button {
    border: 1pt solid black;
    border-radius: 4px;
    --radio-button-wrapper-display: none;
}

vaadin-radio-group.buttons vaadin-radio-button[checked] {
    background: orange;
}

Dans theme components/vaadin-radio-button.css, ajoutez

.vaadin-radio-button-wrapper { display: var(--radio-button-wrapper-display,block); }

(Cela masquera le cercle radio, mais vous pouvez toujours le sélectionner en cliquant sur l'étiquette qui est encore visible)

et définissez la classe RadioButtonGroup sur buttons.