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 属性仅适用于它周围的框窗格的大小。试图通过为指标 class 设置 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;
}

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

Angular2 - How to change the size of DevExtreme load indicator in datagrid control

devextreme

dx-data-grid

angular