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

Question

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;
}

谁能做到这一点？

Answer 1

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

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