office-ui-fabric - 在 UI 中心显示 Spinner

Question

如何在页面中心显示微调器，并且在显示微调器时页面中的所有内容都变得模糊？

标签： office-ui-fabric

Answer 1

您可以只使用 CSS，这是一个示例：https ://codepen.io/mohamedhmansour/pen/qJggma

基本上确保你的 html 和 body 最大化：

html {
  height: 100%;
}

body {
  background-color: #eee;
  height: inherit;
  margin: 0;
}

包裹微调器的 div 应该使内容居中。使用弹性盒：

#loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: inherit;
  background-color: white;
}

最后，您的组件如下所示：

let { Spinner, SpinnerSize } = window.Fabric;

ReactDOM.render((
  <Spinner size={SpinnerSize.large} />
), document.getElementById('loader'));

同样的事情也适用于 CSS-in-JS。