自定义 PrimeFaces 的 PickList 按钮的文本
Customize the text of the PickList buttons of PrimeFaces
我想知道是否有人遇到过这个问题能够更改选择列表按钮的文本。
有时由于可访问性问题,我们可能需要更改它以满足此要求。
选项列表的选择按钮显示有图标,但在 primefaces 文档中我看不到如何更改文本或是否无法更改它们。
[更新:我正在使用 Primefaces 版本 6.2]
我也遇到过同样的情况,我的解决方法如下:
使用 CSS 样式表 您可以使用 content:'yourText'
属性 更改内容。
然后,您只需使用 display:none
属性 禁用按钮的 span 标签之一中图标的背景图像。并在每个按钮中添加内容为 属性.
的文本
有趣的是能够为多语言做好准备。我觉得通过JavaScript可以做到。
我将示例与使用 PrimeFaces 网络展示的解决方案放在一起。
.ui-picklist-buttons .ui-button-text.ui-c {
display: none !important;
}
.ui-picklist-buttons .ui-button-icon-left {
display: none !important;
}
.ui-picklist-button-add::after {
content: 'Add';
}
.ui-picklist-button-add-all::after {
content: 'Add all';
}
.ui-picklist-button-remove::after {
content: 'Remove';
}
.ui-picklist-button-remove-all::after {
content: 'Remove all';
}
注意:我还增加了按钮的宽度以使它们在图像中看起来不错,尽管我没有将其包含在捕获或 css 代码中。
您可以简单地使用 labelDisplay="inline"
属性.
<p:pickList ...
labelDisplay="inline"/>
这将使用支持语言的默认属性。例如参见 [=13=].
您可以自定义标签,例如:
<p:pickList ...
addLabel="Voeg toe"
addAllLabel="Voeg alles toe"
removeLabel="Verwijder"
removeAllLabel="Verwijder alles"
labelDisplay="inline"/>
或覆盖属性。参见
另请参阅:
我想知道是否有人遇到过这个问题能够更改选择列表按钮的文本。 有时由于可访问性问题,我们可能需要更改它以满足此要求。
选项列表的选择按钮显示有图标,但在 primefaces 文档中我看不到如何更改文本或是否无法更改它们。
[更新:我正在使用 Primefaces 版本 6.2]
我也遇到过同样的情况,我的解决方法如下:
使用 CSS 样式表 您可以使用 content:'yourText'
属性 更改内容。
然后,您只需使用 display:none
属性 禁用按钮的 span 标签之一中图标的背景图像。并在每个按钮中添加内容为 属性.
有趣的是能够为多语言做好准备。我觉得通过JavaScript可以做到。
我将示例与使用 PrimeFaces 网络展示的解决方案放在一起。
.ui-picklist-buttons .ui-button-text.ui-c {
display: none !important;
}
.ui-picklist-buttons .ui-button-icon-left {
display: none !important;
}
.ui-picklist-button-add::after {
content: 'Add';
}
.ui-picklist-button-add-all::after {
content: 'Add all';
}
.ui-picklist-button-remove::after {
content: 'Remove';
}
.ui-picklist-button-remove-all::after {
content: 'Remove all';
}
注意:我还增加了按钮的宽度以使它们在图像中看起来不错,尽管我没有将其包含在捕获或 css 代码中。
您可以简单地使用 labelDisplay="inline"
属性.
<p:pickList ...
labelDisplay="inline"/>
这将使用支持语言的默认属性。例如参见 [=13=].
您可以自定义标签,例如:
<p:pickList ...
addLabel="Voeg toe"
addAllLabel="Voeg alles toe"
removeLabel="Verwijder"
removeAllLabel="Verwijder alles"
labelDisplay="inline"/>
或覆盖属性。参见
另请参阅: