在 `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?