在`Primefaces：dashboard`组件上添加标签和自定义CSS

Question

我正在研究https://www.primefaces.org/showcase/ui/panel/dashboard.xhtml

我想在此处修改UI并应用CSS

• 设置板的标签（Todo，进行中，完成，块）
• 在每个仪表板上应用自定义CSS

我尝试使用，但它适用于所有仪表板

.ui-dashboard-column::before{
  font-weight: bold;
  color: navy;
  content: "Todo List. ";
}

Answer 1

在定义DashBoardModel的过程中，您可以为每列设置styleClass：

DefaultDashboardColumn column1 = new DefaultDashboardColumn();
// ...
column1.setStyleClass("todo")
model.addColumn(column1);

然后将此styleClass与CSS选择器一起使用：

.ui-dashboard-column.todo::before{
 ...
}

另见

• How do I override default PrimeFaces CSS with custom styles?