Divider 分隔线

分隔线是对列表和布局中的内容进行分组的一条细线。

分隔线可以将内容分成清晰地小组。

列表分隔线

默认情况下，分隔符呈现为 <hr>。您可以使用 ListItem 组件上的 divider 属性来保存渲染此DOM元素。

<List component="nav" className={classes.root} 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>

HTML5 规范

In a list, you should ensure the Divider is rendered as an <li> to match the HTML5 specification. 该示例演示了实现此目的的两种方法。

内嵌分隔线

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

Vertical Dividers

You can also render a divider vertically using the orientation prop. Note the use of the flexItem prop to accommodate for the flex container.

<Grid container alignItems="center" className={classes.root}>
  <FormatAlignLeftIcon />
  <FormatAlignCenterIcon />
  <FormatAlignRightIcon />
  <Divider orientation="vertical" flexItem />
  <FormatBoldIcon />
  <FormatItalicIcon />
  <FormatUnderlinedIcon />
</Grid>

API

<Divider />