Vaadin 单选按钮组的样式可以改为一组按钮吗？

Question

是否可以将 vaadin 中的单选按钮设置为一组按钮，并选中其中一个按钮为彩色？

我希望使用像单选按钮这样的按钮组。一项可以检查，其他则不检查。

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。