Divider 分隔线
分隔线是对列表和布局中的内容进行分组的一条细线。
分隔线可以将内容分成清晰的几组。
<List sx={style} component="nav" aria-label="mailbox folders">
<ListItem button>
<ListItemText primary="Inbox" />
</ListItem>
<Divider />
<ListItem button divider>
<ListItemText primary="Drafts" />
</ListItem>
<ListItem button>
<ListItemText primary="Trash" />
</ListItem>
<Divider light />
<ListItem button>
<ListItemText primary="Spam" />
</ListItem>
</List>- Photos
Jan 9, 2014
- Work
Jan 7, 2014
- Vacation
July 20, 2014
- Photos
Jan 9, 2014
- Divider
- Work
Jan 7, 2014
- Leisure
- Vacation
July 20, 2014
Toothbrush
$4.50
Pinstriped cornflower blue cotton blouse takes you on a walk to the park or just down the hall.
Select type
Extra Soft
Soft
Medium
Hard
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo.
Nulla ut facilisis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Sed malesuada lobortis pretium.
CENTER
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo.
Nulla ut facilisis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Sed malesuada lobortis pretium.
LEFT
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo.
Nulla ut facilisis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Sed malesuada lobortis pretium.
RIGHT
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo.
Nulla ut facilisis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Sed malesuada lobortis pretium.
CHIP
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo.
Nulla ut facilisis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Sed malesuada lobortis pretium.
<Root>
{content}
<Divider>CENTER</Divider>
{content}
<Divider textAlign="left">LEFT</Divider>
{content}
<Divider textAlign="right">RIGHT</Divider>
{content}
<Divider>
<Chip label="CHIP" />
</Divider>
{content}
</Root>请注意这其中使用了
flexItem属性来适应 flex 容器。
Vertical with variant middle
You can also render a vertical divider with variant="middle".
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo.
Nulla ut facilisis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Sed malesuada lobortis pretium.
VERTICAL
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo.
Nulla ut facilisis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Sed malesuada lobortis pretium.
<Grid container>
<Grid item xs>
{content}
</Grid>
<Divider orientation="vertical" flexItem>
VERTICAL
</Divider>
<Grid item xs>
{content}
</Grid>
</Grid>