如何使用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（按您想要的宽度），它会减少，或者一旦隐藏它就会增加。

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