我正在尝试使用MaterialUI Grid组件和字段来构造以下表单布局:
+-----------------------------------------+
|Form |
| |
| +--------------+ +----------------+ |
| |Field_1 | |Field_2 | |
| +--------------+ +----------------+ |
| +--------------+ +---------+ +--------+ |
| |TextArea | |Popup_A1 | |Popup_A2| |
| | | +---------+ +--------+ |
| | | +---------+ +--------+ |
| | | |Popup_B1 | |Popup_B2| |
| | | +---------+ +--------+ |
| | | +---------+ +--------+ |
| | | |Popup_C1 | |Popup_C2| |
| | | +---------+ +--------+ |
| | | |
| +--------------+ |
+-----------------------------------------+
我的理解可能有些奇怪,并且弹出窗口显示为最小正方形。页面结构如下所示(简化):
<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>
有人可以让我摆脱痛苦,让我知道我做错了什么吗,或者可能将我指向构建此类表格的资源?
编辑
我已经在Venkovsky的MenuItem
元素中添加了非常有用的代码沙箱...,它恰好说明了我的意思。弹出窗口非常非常狭窄。 :-(