Как создать адаптивный макет с response-semantic-ui? - PullRequest
Новая
       12

Как создать адаптивный макет с response-semantic-ui?

0 голосов
/ 11 сентября 2018

Как создать макет, как указано ниже?

Semantic ui layout example

Раскладки 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>

1 Ответ

0 голосов
/ 11 сентября 2018

Вам необходимо объявить ширину столбца A в переменной, которая будет меняться в зависимости от того, открыт столбец B или нет.Решение для этого здесь https://codesandbox.io/s/8843zowzj9

Поскольку semantic-ui Grid.Row может иметь ширину 16 единиц, столбцы A будут начинаться с этой ширины и уменьшатся, если вы покажете столбец B (нажелаемой ширины) или увеличьте ее, как только вы ее спрячете.

Атрибуты stackable columns={2} в теге Grid делают это достаточно умным, чтобы они также складывались, как только экран достигнет мобильного разрешения.

...