在界面中心显示微调框

Question

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

Answer 1

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

基本上确保您的html和body都已最大化：

function findTargetImportItem(importedItems: Array<importItem>, outOfOrderItem: importItem) : void | importItem {
  /**
    * Return the import where the unordered imports will be moving towards
    */
  return importedItems.find((importedItem: importItem) => importedItem.rank > outOfOrderItem.rank);
}

包裹微调框的div应该居中放置内容。使用flexbox：

const defaultImportItem: importItem = ...;

function findTargetImportItem(importedItems: Array<importItem>, outOfOrderItem: importItem) : importItem {
  /**
    * Return the import where the unordered imports will be moving towards
    */
  const importedItem = importedItems.find((importedItem: importItem) => importedItem.rank > outOfOrderItem.rank);

  return importedItem === undefined
    ? defaultImportItem
    : importedItem;
}

最后，您的组件如下：

html {
  height: 100%;
}

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

CSS-in-JS同样适用。