如何使用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列（按所需宽度），则列会减少，或者一旦您显示B列，则列会增加隐藏它。

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