修改素面rowToggler的图像 [英] Modify image of primefaces rowToggler

问题描述

我需要修改素面rowToggler的图像.这是我在css文件中尝试的内容:

I need to modify the image of primefaces rowToggler. This is what I'm trying in the css file:

.ui-datatable .ui-row-toggler {
   cursor: pointer;
   background-image: url("/resources/images/expand.jpg") ; 
}

我还尝试将网址更改为/images/expand.jpg、images/expand.jpg并仅将expand.jpg更改为.但是他们都找不到图像.

I have also tried changing the url to /images/expand.jpg, images/expand.jpg and simply expand.jpg. But none of them find the image.

我想念什么?

推荐答案

这是一个古老的话题:添加答案，以防其他人在Google上找到答案.问题来自以下事实:用于添加图标的类是硬编码的(请参见

This is an old thread: adding an answer in case anyone else finds this on Google. The problem comes from the fact that the class used for adding the icon is hardcoded (see the source code) to be the class ui-icon-circle-triangle-e when the row is collapsed, and ui-icon-circle-triangle-s when the row is expanded. So the way to do this is to override the definitions of those classes in your style sheet. Here is what worked for me:

.ui-icon-circle-triangle-e {
    background-image: url('../images/triangleRight.png') !important;
    background-position: 0px 0px;   
}

.ui-icon-circle-triangle-s {
    background-image: url('../images/triangleDown.png') !important;
    background-position: 0px 0px;
}

默认值看起来很像简单的要点-用户忽略了它们的可点击性.

The defaults looked too much like simple bullet points - users were overlooking that they were clickable.

这篇关于修改素面rowToggler的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！