分隔符

分隔符组件提供一条纤细、不显眼的线条，用于对元素进行分组，以增强视觉层次结构。

简介

Material UI 分隔符组件默认渲染为深灰色 <hr>，并提供多个有用的 props 用于快速样式调整。

基础用法

import Divider from '@mui/material/Divider';

变体

分隔符组件支持三种变体：fullWidth (默认), inset 和 middle。

方向

使用 orientation prop 将分隔符从水平更改为垂直。当使用垂直方向时，分隔符会渲染为带有相应可访问性属性的 <div> 而不是 <hr>，以符合 WAI-ARIA 规范。

Flex 项目

当分隔符在 flex 容器中使用时，使用 flexItem prop 来显示它。

带有子元素

使用 textAlign prop 来对齐由分隔符包裹的元素。

自定义

在 List 中使用

当在 List 中使用分隔符分隔项目时，请使用 component prop 将其渲染为 <li>——否则它将不是有效的 HTML 元素。

图标分组

下面的演示展示了如何组合使用 variant="middle" 和 orientation="vertical" 这两个 props。

可访问性

由于其隐含的 separator 角色，分隔符（即 <hr> 元素）将被屏幕阅读器宣布为“水平分隔符”（如果使用 orientation prop 则是垂直分隔符）。

如果您将其用作纯粹的样式元素，我们建议设置 aria-hidden="true"，这将使屏幕阅读器跳过它。

<Divider aria-hidden="true" />

如果您使用分隔符来包裹其他元素，例如文本或纸片，我们建议使用 component prop 将其渲染元素更改为普通的 <div>，并设置 role="presentation"。这确保了它不会被屏幕阅读器宣布，同时仍然保留其中元素的语义。

<Divider component="div" role="presentation">
  <Typography>Text element</Typography>
</Divider>

结构

分隔符组件由一个根 <hr> 组成。

<hr class="MuiDivider-root">
  <!-- Divider children goes here -->
</hr>

API

请参阅下面的文档，以获得此处提及的组件的所有可用 props 和类的完整参考。

• <Divider />