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 规范

在一个列表中，请确保您将 Divider 渲染成一个 <li> 元素，这样才能遵循 HTML5 规范。下面的例子展示了两种实现方式。

内凹分隔线

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

垂直分隔线

您也可以使用 orientation 属性将分割线渲染成垂直形状。请注意这其中使用了 flexItem 属性来适应 flex 容器。

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

API

<Divider />