如何创建此 ag-grid 加载叠加层

Question

我在这里看到了一个反应 ag 网格的加载覆盖示例：

https://www.ag-grid.com/documentation/react/overlays/#example

当按下“显示加载覆盖”按钮时，我不确定如何调用这种效果，它有点添加透明的白色屏幕和上面的一些文字。

从代码中我们可以看出组件本身就是：

'<span className="ag-overlay-loading-center">Please wait while your rows are loading</span>'

我猜测背景中的透明白屏是由于那个“ag-overlay-loading-center”css class造成的，但我不知道它在哪里完全来自..

如何创建示例中的效果？

Answer 1

首先，覆盖代码中不应包含 className，因为它是普通的 HTML <span> 标记。所以这可能不会正确设置 classes，不会显示叠加层。

但是，我遇到了同样的问题，加载程序非常糟糕并且没有提供信息。幸运的是，我可以使用以下 CSS class（我从 semanticUI 中窃取）来更改它：


.loadingx:before {
  position: absolute;
  content: '';
  top: 0%;
  left: 0%;
  background: rgba(255, 255, 255, 0.8);
  width: 100%;
  height: 100%;
  border-radius: 0.28571429rem;
  z-index: 100;
}

.loadingx:after {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  margin: -1.5em 0em 0em -1.5em;
  width: 3em;
  height: 3em;
  -webkit-animation: segment-spin 0.6s linear;
  animation: segment-spin 0.6s linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  border-radius: 500rem;
  border-color: #223088 rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
  border-style: solid;
  border-width: 0.2em;
  box-shadow: 0px 0px 0px 1px transparent;
  visibility: visible;
  z-index: 101;
}

@-webkit-keyframes segment-spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes segment-spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

编辑： 这就是我使用它的方式：

overlayLoadingTemplate:
      '<div class="loadingx" style="margin: 7em"></div> <span class="ag-overlay-loading-center " style="font-size: 18px; z-index: 100000"> Loading Rows ...</span>',

“正在加载行...”文本实际上根本不显示，您可以将其删除。

用于使用 API 显示叠加层：gridApi.showLoadingOverlay() 隐藏它：gridApi.hideOverlay()

将此 class 添加到加载器跨度（使用 class="loadingx"）会立即显示灰色叠加层和中间的圆形加载器。

希望这能奏效。

如何创建此 ag-grid 加载叠加层

how to create this ag-grid loading overlay

javascript

css

ag-grid

ag-grid-react