Divider

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

分隔线可以将内容分成清晰的几组。

列表分隔线

默认情况下，分割线会渲染成一个 <hr>。您可以使用 ListItem 组件上的 divider 属性来保存渲染此 DOM 元素。

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

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

Press Enter to start editing

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

文本分隔线

你也可以使用文本内容来渲染分隔线。

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

LEFT

RIGHT

CHIP

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

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

Press Enter to start editing

Accessibility tips: When using the Divider component for visual decoration, such as in a heading, explicitly specify role="presentation" to the divider to make sure screen readers can announce its content:

<Divider component="div" role="presentation">
  {/* any elements nested inside the role="presentation" preserve their semantics. */}
  <Typography variant="h2">My Heading</Typography>
</Divider>

垂直分隔线

You can also render a divider vertically using the orientation prop.

Vertical with variant middle

You can also render a vertical divider with variant="middle".

垂直的文本分隔线

You can also render a vertical divider with content.

VERTICAL

<Grid container>
  <Grid item xs>
    {content}
  </Grid>
  <Divider orientation="vertical" flexItem>
    VERTICAL
  </Divider>
  <Grid item xs>
    {content}
  </Grid>
</Grid>

<Grid container>
  <Grid item xs>
    {content}
  </Grid>
  <Divider orientation="vertical" flexItem>
    VERTICAL
  </Divider>
  <Grid item xs>
    {content}
  </Grid>
</Grid>

Press Enter to start editing

API

<Divider />