Angular2 - 如何在数据网格控件中更改 DevExtreme 负载指示器的大小答案

【问题标题】：Angular2 - How to change the size of DevExtreme load indicator in datagrid controlAngular2 - 如何在数据网格控件中更改 DevExtreme 负载指示器的大小
【发布时间】：2017-03-09 10:48:07
【问题描述】：

https://js.devexpress.com/Documentation/16_2/ApiReference/UI_Widgets/dxDataGrid/

以上是 Devextreme 团队提供的 API 参考。我已使用 loadPanel 属性将微调器指示器更改为指向自定义 gif。这是 Devextreme 团队公开的属性

loadPanel: {
    enabled: "auto",
    height: 90,
    indicatorSrc: "",
    showIndicator: true,
    showPane: true,
    text: "Loading...",
    width: 200
}

我改成了类似的，

loadPanel: {
    enabled: "auto",
    height: 90,
    indicatorSrc: "images/MyCustom.gif",
    showIndicator: true,
    showPane: false,
    text: "Loading...",
    width: 200
}

但是，GIF 看起来缩小了，并且 height 和 width 属性仅适用于它周围框窗格的大小。尝试通过为指标类设置 CSS 样式来更改大小，但没有成功

/deep/ .dx-loadindicator-content {
    width: 200px;
    height: 200px;
}

谁能做到这一点？

【问题讨论】：

这个css规则你在哪里写的？
在组件的 CSS 中
链接失效

标签： angular devextreme dx-data-grid

【解决方案1】：

loadPanel.width 和 loadPanel.height 选项与负载面板几何形状直接相关。而且它们不会影响图标大小。但是您可以通过 CSS 自定义图标大小，正如您在问题中指出的那样。只需使用以下 CSS 选择器：

/deep/ .dx-datagrid .dx-loadindicator {
  width: 64px;
  height: 64px;
}

【讨论】：

那行得通。非常感谢。我猜我对 CSS 不好。 :)