自定义PrimeFaces的PickList按钮的文本

问题描述 投票:0回答:2

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

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

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

picklist

jsf primefaces picklist
2个回答
3
投票

PrimeFaces 14+

自 PrimeFaces 14 起,文本属性已移至客户端区域设置。请参阅 https://primefaces.github.io/primefaces/14_0_0/#/../migrationguide/14_0_0?id=picklist

请阅读PrimeFaces 14 本地化文档

有许多开箱即用的语言环境支持。如果您的区域设置不受支持,或者您想要自定义属性,您只需使用以下 JavaScript 设置或覆盖该属性:

PrimeFaces.locales["en"]["startsWith"] = "My starts with";
PrimeFaces.locales["myLocale"]["startsWith"] = "My locale starts with value";

要全面了解此组件中使用的属性,请检查 widget JavaScript 源 并搜索

PrimeFaces.getAriaLabel('xxx')

14 版本之前

您可以简单地使用

labelDisplay="inline"
属性。

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

这将使用受支持语言的默认属性。例如,请参阅英语属性

您可以自定义标签,例如:

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

或覆盖属性。见

另请参阅:


3
投票

我也遇到过同样的情况,我的解决方案如下:

使用 CSS 样式表,您可以使用

content:'yourText'
属性更改内容。 然后,您只需使用
display:none
属性禁用按钮跨度标签之一中图标的背景图像。并使用 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 代码中。

buttons selection custom of PickList

© www.soinside.com 2019 - 2024. All rights reserved.