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

Question

我正在处理https://www.primefaces.org/showcase/ui/panel/dashboard.xhtml

这里我想修改 UI 并应用 CSS

• 设置板标签（Todo、In-progress、Done、Block）
• 在每个仪表板上应用自定义 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?