Kann eine Vaadin-Optionsfeldgruppe als Gruppe von Schaltflächen gestaltet werden?

Question

Ist es möglich, Optionsfelder in Vaadin wie eine Reihe von Schaltflächen zu gestalten und eine ausgewählte Schaltfläche farbig zu gestalten?

Ich möchte eine Schaltflächengruppe wie Optionsfelder verwenden. Ein Element kann überprüft werden, die anderen können nicht überprüft werden.

Answer 1

假设Vaadin 23（其他版本中组件的结构可能会改变），似乎是可行的。

在全局styles.css中，添加：

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;
}

在主题组件/vaadin-radio-button.css中，添加

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

（这将隐藏单选圆圈，但您仍然可以通过单击仍然可见的标签来选择它）

并将RadioButtonGroup类设置为buttons。