如何在MaterialUI中布局表单? [英] How do I layout forms in MaterialUI?

问题描述

我正在尝试使用MaterialUI Grid组件和字段来构造以下表单布局:

I'm trying to structure the following form layout using MaterialUI Grid components and fields:

+-----------------------------------------+
|Form                                     |
|                                         |
| +--------------+ +----------------+     |
| |Field_1       | |Field_2         |     |
| +--------------+ +----------------+     |
| +--------------+ +---------+ +--------+ |
| |TextArea      | |Popup_A1 | |Popup_A2| |
| |              | +---------+ +--------+ |
| |              | +---------+ +--------+ |
| |              | |Popup_B1 | |Popup_B2| |
| |              | +---------+ +--------+ |
| |              | +---------+ +--------+ |
| |              | |Popup_C1 | |Popup_C2| |
| |              | +---------+ +--------+ |
| |              |                        |
| +--------------+                        |
+-----------------------------------------+

我的理解可能有些奇怪，并且弹出窗口显示为最小正方形.页面结构如下所示(简化):

My understanding may be a bit wonky, and the Popups are showing up as minimal squares. The page structure looks like this (simplified):

<Form>
  <Grid container direction="row" justify="flex-start" alignItems="flex-start" spacing={1}>
    <Grid container xs="12" spacing="1">
      <Grid item xs={12} sm={6}>
        <Field name="Field1" ... fullWidth />
      </Grid>
      <Grid item xs={12} sm={6}>
        <Field name="Field2" ... fullWidth />
      </Grid>
    </Grid>
    <Grid container xs={12} >
      <Grid container xs={4} sm={4} >
        <Field  fullWidth multiline component={TextField} />
      </Grid>

      <Grid container xs={8} sm={8}>
        <Grid container >
          <Grid item>
            <TextField name="Popup_A1" fullWidth select>
              <MenuItem key="1" value="1">
                Large Text
              </MenuItem>
              <MenuItem key="2" value="2">
                Ooh Some Large Text
              </MenuItem>
              <MenuItem key="3" value="3">
                Another Large Text Choice
              </MenuItem>
              <MenuItem key="4" value="4">
                No, LOOOONG Text
              </MenuItem>
            </TextField>
          </Grid>
          <Grid item>
            <TextField name="Popup_A2" fullWidth select>
              <MenuItem key="1" value="1">
                Large Text
              </MenuItem>
              <MenuItem key="2" value="2">
                Ooh Some Large Text
              </MenuItem>
              <MenuItem key="3" value="3">
                Another Large Text Choice
              </MenuItem>
              <MenuItem key="4" value="4">
                No, LOOOONG Text
              </MenuItem>
            </TextField>
          </Grid>
        </Grid>
      </Grid>

      <Grid container xs={8} sm={8}>
        <Grid container >
          <Grid item>
            <Field name="Popup_B1" ... fullWidth select >....</Field>
          </Grid>
          <Grid item>
            <Field name="Popup_B2" ... fullWidth select >....</Field>
          </Grid>
        </Grid>
      </Grid>

      ...

    </Grid>
 </Grid>
</Form>

有人可以让我摆脱痛苦，让我知道我在做错什么吗，或者可能将我指向构建这样的表单的资源?

Can someone put me out of my misery and let me know what I'm doing wrong, or possibly point me at a resource for structuring forms like this?

我已将 MenuItem 元素添加到Venkovsky非常有用的代码沙箱中...它正好说明了我的意思.弹出窗口非常非常狭窄.:-(

I've added in the MenuItem elements to Venkovsky very helpful code sandbox... and it illustrates exactly what I mean. The pop-ups are very, very narrow. :-(

推荐答案

以防万一其他人遇到类似的问题，这是起作用的代码的基础.我认为问题在于将字段包装在<网格项目sm = {6}> 的字段中:

Just in case anyone else has a similar issue, here's the basics of the code that worked. I think that the issue was wrapping the fields in <Grid item sm={6}>'s:

<Form>
  <Grid container direction="row" justify="flex-start" alignItems="flex-start" spacing={1}>
    <Grid container spacing={1}>
      <Grid item sm={6}>
        <Field name="requestor" ... />
      </Grid>
      <Grid item sm={6}>
        <Field name="status" .../>
      </Grid>
    </Grid>
    <Grid container >
      <Grid item sm={3}>
        <Field name="materials" type="text" label="Materials" variant="outlined" rowsMax={10} rows={20} margin="normal" fullWidth multiline  ... />
      </Grid>
      <Grid item sm={1}>
      </Grid>
      <Grid item sm={8}>
        <Grid container spacing={1}>
          <Grid item sm={6}>
            <TextField name="reviewer_2" ... />
          </Grid>
          <Grid item sm={6}>
            <TextField name="approver_1" ... />
          </Grid>
        </Grid>
        <Grid container spacing={1}>
          <Grid item sm={6}>
            <TextField name="reviewer_2" ... />
          </Grid>
          <Grid item sm={6}>
          <TextField name="approver_2" ... />
          </Grid>
        </Grid>
        <Grid container spacing={1}>
          <Grid item sm={6}>
            <TextField name="reviewer_3" ... />
          </Grid>
          <Grid item sm={6}>
            <TextField name="approver_3" ... />
          </Grid>
        </Grid>
      </Grid>
    </Grid>
    <Button type="submit" > Submit </Button>
  </Grid>
</Form>

这篇关于如何在MaterialUI中布局表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！