Как правильно реализовать этот макет с помощью компонента Material-UI Grid

Question

Я пытаюсь реализовать этот макет в Material-UI с помощью компонента Grid.

Я выделил границу контейнера красным, чтобы было понятнее, где находятся границы.

• Кнопка «Добавить» должна находиться на правом конце контейнера.
• Фишки должны быть выровнены по левому краю и занимать как можно больше места по горизонтали

• Когда фишки складываются, кнопка «Добавить» должна быть выровнена по вертикали относительно дна контейнера

Мне удалось реализовать это с помощью вложенных сеток, как в этом примере:

import React, { useState } from 'react'
import { Button, Grid, Chip, Box } from '@material-ui/core'

export default function App() {
  const [chips, setChips] = useState(1)

  const addChip = () => setChips(c => c + 1)
  const removeChip = i => setChips(c => c - 1)

  const renderChips = () =>
    Array(chips)
      .fill(null)
      .map((_, i) => (
        <Grid item key={i}>
          <Chip label={`Chip ${i}`} onDelete={() => removeChip(i)} />
        </Grid>
      ))

  return (
    <Box border="1px solid red">
      <Grid container wrap="nowrap" spacing={2}>
        <Grid item xs>
          <Grid container spacing={1}>
            {renderChips()}
          </Grid>
        </Grid>
        <Grid item display="flex" component={Box}>
          <Grid container alignItems="flex-end">
            <Grid item>
              <Button variant="contained" color="primary" onClick={addChip}>
                Add
              </Button>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Box>
  )
}

Я бы хотел избежать вложить компоненты сетки больше, чем необходимо. В частности, я хотел бы использовать <Grid item container> вместо <Grid container>, содержащего <Grid item>, но, используя этот подход, я не могу достичь такой схемы расширения раздела микросхем слева и удерживания кнопки справа, сохраняя он выровнен по низу по вертикали.

Answer 1

Структура вашей сетки не соответствует тому, что вы пытаетесь получить:

|-----------------------------|-----|
| item1 | item2 | item3 |     |     |  
| item4 | item... | item 20   |     |
| item 21 ...                 | Add |
|-----------------------------|-----|

Если вы разделите ее на два столбца - кнопка Add никогда не выровняется так, как вы хотите.

Вместо этого - Add не должен иметь свой собственный столбец - но должен быть частью основного блока (тот же поток ваших элементов). Единственное, что вам нужно сделать, это убедиться, что он расположен с правой стороны, и вы можете получить это с помощью margin-left: auto:

<Box border="1px solid red">
  <Grid container wrap="nowrap" spacing={2}>
    <Grid item xs>
      <Grid container spacing={1}>
        {renderChips()}
        <Grid item style={{ marginLeft: "auto" }}>
          <Button variant="contained" color="primary" onClick={addChip}>
            Add
          </Button>
        </Grid>
      </Grid>
    </Grid>
  </Grid>
</Box>

Вот реализация выше, основанная на вашей исходной песочнице. : https://codesandbox.io/s/grid-item-stick-to-right-3xzj2?file= / src / App. js

Answer 2

Попробуйте использовать следующий блок

<Box border="1px solid red" style={{'postion':'relative'}}>
      <Grid container spacing={2} style={{'padding': '1px 80px 1px 1px'}}>
            {renderChips()}
      </Grid>
      <Button variant="contained" color="primary" onClick={addChip} style={{'position':'relative', 'float': 'right', 'bottom': '35px'}}>
                Add
      </Button>    
</Box>

вместо

<Box border="1px solid red">
      <Grid container wrap="nowrap" spacing={2}>
        <Grid item xs>
          <Grid container spacing={1}>
            {renderChips()}
          </Grid>
        </Grid>
        <Grid item display="flex" component={Box}>
          <Grid container alignItems="flex-end">
            <Grid item>
              <Button variant="contained" color="primary" onClick={addChip}>
                Add
              </Button>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Box>