如何创建这个 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类引起的，但我不知道它究竟来自哪里..

我怎样才能像示例中那样创建这种效果？

Answer 1

首先，覆盖代码中不应包含className，因为它是纯HTML <span> 标记。所以这可能没有正确设置类，没有显示覆盖。

但是，我遇到了同样的问题，加载程序非常糟糕且信息量不足。幸运的是，我可以使用以下 CSS 类（我从语义 UI 中窃取）来更改它：

.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>',

“Loading Rows ...”文本实际上根本不显示，您可以将其删除。

使用 API 显示覆盖：gridApi.showLoadingOverlay() 隐藏它：gridApi.hideOverlay()

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

希望这行得通。