Изменение порядка размещения элементов сетки в Material-UI - PullRequest
Новая
       78

Изменение порядка размещения элементов сетки в Material-UI

0 голосов
/ 16 февраля 2019

У меня проблема с порядком размещения элементов сетки при уменьшении размера браузера.

Это то, что я хочу на обычном экране рабочего стола (lg): 

---------------------------------------------
|   col 1     |         col 2       | col 3 |
---------------------------------------------

Но после сжатия браузера я получаю следующий результат: 

-------------------------
|     col 1             |
-------------------------
-------------------------
|     col 2             |
-------------------------
-------------------------
|     col 3             |
-------------------------

Можно ли с помощью пользовательского интерфейса макета сетки добиться этого на экране мобильного телефона: 

-------------------------
|     col 1             |
-------------------------
-------------------------
|     col 3             |
-------------------------
-------------------------
|     col 2             |
-------------------------

Я читал статьи об изменении порядка CSS-сеток по той же теме, но как этого добиться с помощью Material-UIРаскладка сетки.

Edit material-ui Grid Stacking

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

В ответ на вопросы Оливье Material-UI активно использует макет флексбокса CSS в своей реализации.Как указано в документации, цитаты

Контейнер flex - это блок, сгенерированный элементом с вычисленным отображением flex или inline-flex.Дочерние элементы в потоке flex-контейнера называются flex-элементами и размещаются с использованием модели flex-макета.

Таким образом, элементы Grid являются элементами flex, а контейнер Grid является контейнером flexbox на языке неспециалистов .Следовательно, мы можем использовать свойство order для элементов Grid, чтобы изменить их относительный порядок появления при изменении размеров Box или Grid Container.Таким образом, передача стиля следующим образом в элемент сетки должна сработать 

  itemStyle: {
    order: ${Desired_order_before_Shrinking},

    [theme.breakpoints.up('${DesiredScreenSize}')]: {
      order: ${Desired_order_after_Shrinking},
    },

  }

Наконец, выполнение <Grid item xs={12} md={6} className={this.props.classes.itemStyle}> переупорядочит этот элемент.Надеюсь, это поможет лучше понять.

0 голосов
/ 19 февраля 2019

Опция № 1 

const styles = theme => ({
  item2: {
    order: 3,
    [theme.breakpoints.up('sm')]: {
      order: 2,
    },
  },
  item3: {
    order: 2,
    [theme.breakpoints.up('sm')]: {
      order: 3,
    },
  },
});

// ...

<Grid container spacing={16} justify="flex-start">
  <Grid item xs={12} sm={6} md={4} lg={4}>
    <Paper className={classes.paper}>
      <h1>{1}</h1>
    </Paper>
  </Grid>
  <Grid item xs={12} sm={6} md={4} lg={4} className={classes.item2}>
    <Paper className={classes.paper}>
      <h1>{2}</h1>
    </Paper>
  </Grid>
  <Grid item xs={12} sm={6} md={4} lg={4} className={classes.item3}>
    <Paper className={classes.paper}>
      <h1>{3}</h1>
    </Paper>
  </Grid>
</Grid>

https://codesandbox.io/s/m5plooxxoj

Опция № 2 

    <Grid container spacing={16} justify="flex-start">
      <Grid item xs={12} sm={6} md={4} lg={4}>
        <Paper className={classes.paper}>
          <h1>{1}</h1>
        </Paper>
      </Grid>
      <Box clone order={{ xs: 3, sm: 2 }}>
        <Grid item xs={12} sm={6} md={4} lg={4}>
          <Paper className={classes.paper}>
            <h1>{2}</h1>
          </Paper>
        </Grid>
      </Box>
      <Box clone order={{ xs: 2, sm: 3 }}>
        <Grid item xs={12} sm={6} md={4} lg={4}>
          <Paper className={classes.paper}>
            <h1>{3}</h1>
          </Paper>
        </Grid>
      </Box>
    </Grid>

https://codesandbox.io/s/xvv7o07614

...