自定义 PrimeFaces 的 PickList 按钮的文本

Question

我想知道遇到此问题的人是否能够更改选项列表按钮的文本。 有时由于可访问性问题，我们可能需要更改它以满足此要求。

选项列表的选择按钮带有图标，但在 primefaces 文档中，我看不到它们如何更改文本，或者是否不可能。

[更新：我正在使用 Primefaces 6.2 版]

Answer 1

您可以简单地使用labelDisplay="inline" 属性。

<p:pickList ...
            labelDisplay="inline"/>

这将使用受支持语言的默认属性。参见例如English properties。

您可以自定义标签，如：

<p:pickList ...
            addLabel="Voeg toe"
            addAllLabel="Voeg alles toe"
            removeLabel="Verwijder"
            removeAllLabel="Verwijder alles"
            labelDisplay="inline"/>

或覆盖属性。见

• https://github.com/primefaces/primefaces/tree/master/primefaces/src/main/resources/org/primefaces

另见：

• https://primefaces.github.io/primefaces/10_0_0/#/components/picklist

Answer 2

我也遇到过，我的解决方法如下：

使用 CSS 样式表，您可以通过 content:'yourText' 属性更改内容。 然后，您只需使用 display:none 属性禁用按钮的 span 标签之一中的图标的背景图像。并使用 content 属性在每个按钮中添加文本。

有趣的是能够为多语言做好准备。我认为通过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 代码中。