Primefaces SelectOneButton:更改单个按钮样式

Question

我正在使用primefaces selectOneButton.我想在selectOneButton中制作一些按钮,取决于某些支持bean值,它们与其他按钮的风格不同.例如,selectOneButton中3个按钮的文本需要是粗体,剩下的需要是正常的.

可能吗？

Primefaces 3.2

Answer 1

这就是我如何做到的:

将styleClass添加到selectOneButton:

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

Answer 2

没有“标准”方法可以做到这一点。常见的解决方法是拥有多个元素 -SelectItem在您的情况下 - 样式不同 - 并使用带有属性的表达式rendered来确定哪些元素可见。这适用于任何组件库，而不仅仅是 primefaces。

编辑：现在已经尝试过 - 看起来我根本无法影响所选项目的样式 - 至少不能在页面中声明。人们可以尝试调整主题或使用!important规则通过自定义样式覆盖 primefaces 选择器。但您仍然无法获得所选项目的独特样式。

所以请原谅我以前的自信，并将这个答案视为“不，你不能”。