дизайн макета сетки материалов - PullRequest
Новая
       45

дизайн макета сетки материалов

0 голосов
/ 21 февраля 2020

Я совершенно новичок в пользовательском интерфейсе материалов, и я пытаюсь использовать концепцию Grid, чтобы позиционировать мои компоненты очень динамично c. Я хотел бы создать сетки по следующему шаблону, и я застрял в поиске решения для создания сетки из двух столбцов с различным количеством строк или элементов.

Ниже приведен пример макета, который я пытаюсь разработать используя сетки, может, кто-нибудь, пожалуйста, поделитесь какими-нибудь идеями для достижения этого?

Пример кода будет более полезным. Скриншот моего запланированного дизайна

1 Ответ

0 голосов
/ 22 февраля 2020

Чтобы получить формат сетки в пользовательском интерфейсе материала, выполните следующие действия: docs . Вы можете попробовать это с несколькими вложенными сеточными контейнерами, чтобы достичь того, что вы ожидаете.

Edit Material demo 

   <div>
      <Grid
        container
        spacing={1}
        direction="row"
        justify="flex-start"
        alignItems="flex-start"
      >
        <Grid container item xs={4} spacing={1}>
          <Grid item xs={12}>
          <Paper>Some Text </Paper>
          </Grid>
          <Grid item xs={12}>
          <Paper  style={{height:400}}>Component A</Paper>
          </Grid>
        </Grid>
        <Grid container item xs={8} spacing={1} >
        <Grid item xs={12}>
            <Paper  style={{height:200}}>Component B</Paper>
          </Grid>
          <Grid item xs={12}>
            <Paper  style={{height:200}}>Component C</Paper>
          </Grid>
        </Grid>
      </Grid>
    </div>
...