如何使用 react-semantic-ui 创建响应式布局？

Question

如何创建如下所示的布局？

移动版A和B的布局必须依次叠加。在更大的屏幕上，布局 B 必须是可切换的。而 A 根据 B 的可见性调整为全屏或半屏。

我的代码示例

<Grid.Row>
  <Grid.Column computer={16} largeScreen={10}>
    <A />
  </Grid.Column>
  {showB && (
      <Grid.Column computer={16} largeScreen={6}>
        <B />
      </Grid.Column>
  )} 
</Grid>

Answer 1

您需要在变量中声明 A 列的宽度，该变量会根据 B 列是否打开而改变。这里有一个解决方案 https://codesandbox.io/s/8843zowzj9

由于 semantic-ui Grid.Row 可以有 16 个单位的宽度，A 列将从该宽度开始，如果您显示 B 列（按您想要的宽度）或增加，它会减少一旦你隐藏它。

Grid 标签中的 stackable columns={2} 属性使它足够聪明，一旦屏幕达到移动分辨率，它们也可以堆叠。

如何使用 react-semantic-ui 创建响应式布局？

How to create responsive layout with react-semantic-ui?

semantic-ui

semantic-ui-react