Как мне создать этот «макет» с помощью Material-UI Grid? - PullRequest
Новая
       5

Как мне создать этот «макет» с помощью Material-UI Grid?

1 голос
/ 15 января 2020

Я пытаюсь создать следующий макет с использованием сетки Material-UI ... и до сих пор удалось показать, насколько мало я понимаю все это.

Что я ищу создать это:

Desired Outcome

Что я думаю, что соответствует этому дизайну:

Basic Plan

Итак, мое мышление было этой структурой ... 

<Grid container xs={12} spacing={3}>

  <Grid item xs={12} >
    <Paper className={classes.paper}>
      Top Bar
    </Paper>
  </Grid>

  <Grid container xs={12} spacing={3}>    
      <Grid container spacing={3}>
        <Paper className={classes.paper}>

          <Grid item xs={4}>
            Main Field
          </Grid>

          <Grid container xs={8}>
            <Grid container item xs={8}>
              <Grid item xs={4}>
                field 1 row 1
              </Grid>
              <Grid item xs={4}>
                field 2 row 1
              </Grid>
            </Grid>
            <Grid container item xs={8}>
              <Grid item xs={4}>
                field 1 row 2
              </Grid>
              <Grid item xs={4}>
                field 2 row 2
              </Grid>
            </Grid>
            <Grid container item xs={8}>
              <Grid item xs={4}>
                field 1 row 3
              </Grid>
              <Grid item xs={4}>
                field 2 row 3
              </Grid>
            </Grid>
          </Grid>
        </Paper>
      </Grid>
    </Grid>
  </Grid>

</Grid>

... которая не имела ничего общего с этим. Я не могу заставить его отображаться во всю ширину, чтобы начать с.

Я пытался добавить width={1} реквизит к различным элементам безрезультатно. Кто-нибудь может направить меня в правильном направлении, или, что еще лучше, есть какой-то инструмент разработки, который мне не хватает для создания «макетов» с сеткой Material-UI, или что-то подобное?

1 Ответ

1 голос
/ 17 января 2020

Мне удалось создать ваш макет, начав использовать ссылки Grid в разделе сложной сетки документации.

Путем объединения направлений row и column в качестве реквизита на внутренних гридах и помещая внутрь дочерних гридов внешние компоненты Paper в качестве заполнителей, мы можем достичь того, что вы ищете.

Код будет выглядеть примерно так: 

export default function ComplexGrid() {
  return (
    <div>
      <Paper>
        <Grid container spacing={3}>
          <Grid item xs={12}>
            <Paper>xs=12</Paper>
          </Grid>
          <Grid item xs={12} container>
            <Grid item xs container direction="column" spacing={3}>
              <Grid item xs={4}>
                <Paper>xs=4</Paper>
              </Grid>
              <Grid item xs={8}>
                <Paper>
                  <Grid item xs container direction="column" spacing={2}>
                    <Grid item xs={12}>
                      <Paper>
                        <Grid item xs container direction="row" spacing={1}>
                          <Grid item xs={6}>
                            <Paper>xs=4</Paper>
                          </Grid>
                          <Grid item xs={6}>
                            <Paper>xs=4</Paper>
                          </Grid>
                        </Grid>
                      </Paper>
                    </Grid>
                    <Grid item xs={12}>
                      <Paper>
                        <Grid item xs container direction="row" spacing={1}>
                          <Grid item xs={6}>
                            <Paper>xs=4</Paper>
                          </Grid>
                          <Grid item xs={6}>
                            <Paper>xs=4</Paper>
                          </Grid>
                        </Grid>
                      </Paper>
                    </Grid>
                    <Grid item xs={12}>
                      <Paper>
                        <Grid item xs container direction="row" spacing={1}>
                          <Grid item xs={6}>
                            <Paper>xs=4</Paper>
                          </Grid>
                          <Grid item xs={6}>
                            <Paper>xs=4</Paper>
                          </Grid>
                        </Grid>
                      </Paper>
                    </Grid>
                  </Grid>
                </Paper>
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </Paper>
    </div>
  );
}

Вот codesandbox с рабочим примером кода вместе с некоторыми не очень хорошими стилями для статьи, но служить только в качестве доказательства концепции. Тогда, конечно, вы можете изменить поля, отступы, размеры и все остальное в соответствии с вашими потребностями.

...