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

Question

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

Answer 1

你可以只使用CSS，这里是一个例子:https://codepen.io/mohamedhmansour/pen/qJggma

基本上确保您的 html 和 body 最大化:

html {
  height: 100%;
}

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

包裹微调器的 div 应该使内容居中。使用 flexbox :

#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。