Vaadin 單選按鈕組的樣式可以改為一組按鈕嗎？

Question

是否可以像一組按鈕一樣在vaadin中設定單選按鈕的樣式，並且選中一個按鈕將被著色？我希望使用像單選按鈕這樣的按鈕組。一項可以勾選，其他則不勾選。

P粉011360903 · Answer

假設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。