更改 clr-dg-placeholder 图标或背景图像

Question

我正在使用 clr-dg-placeholder 在 Clarity Datagrid 中设置占位符，但我想更改背景图像或图标。

没有css可以吗？

Answer 1

对于其中包含数据网格并且还需要覆盖的组件，您必须关闭视图封装。

从“@angular/core”导入{组件，ViewEncapsulation}；

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent  {}

然后您可以直接定位 .datagrid-placeholder-image 元素并覆盖 background-image 属性

.datagrid-host .datagrid .datagrid-table .datagrid-placeholder-container .datagrid-placeholder-image{
  background-image: url('data:image/svg+xml;utf8,<svg height="100px" width="100px">YOUR SVG CODE HERE</svg>');
}

Here 是一个带有覆盖的运行 stackblitz。

更改 clr-dg-placeholder 图标或背景图像

Change clr-dg-placeholder icon or background image

vmware-clarity