jsf - Primefaces SelectOneButton : Change individual button styles

Question

我正在使用primefaces selectOneButton。我想让 selectOneButton 中的一些按钮与其他按钮的样式不同，这取决于一些支持 bean 的值。比如selectOneButton中3个按钮的文字需要加粗，剩余的文字需要正常。

是否可以？

素面 3.2

Answer 1

我是这样制作的:

向 selectOneButton 添加一个 styleClass:

<p:selectOneButton styleClass="yourStyleClass" value="#{yourBean.yourValue}" > ...

然后在样式表中，您可以获得如下所示的渲染按钮(我为每个按钮添加了一个图标 - 随心所欲):

.yourStyleClass div:first-child span {
    background-image: url('logo.png') !important;
    background-position: left center;
    background-repeat: no-repeat;
    margin-left: 6px;
    padding-left: 23px;
}

.yourStyleClass div:nth-child(2) span {
    background-image: url('picture.png') !important;
    background-position: left center;
    background-repeat: no-repeat;
    margin-left: 6px;
    padding-left: 23px;
}

.yourStyleClass div:nth-child(3) span {
    background-image: url('video.png') !important;
    background-position: left center;
    background-repeat: no-repeat;
    margin-left: 6px;
    padding-left: 23px;
}