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。