跳转到内容

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>