分隔線

分隔線元件提供一條細且不顯眼的線條，用於將元素分組，以強化視覺層次結構。

簡介

Material UI 分隔線元件預設呈現為深灰色 <hr>，並具有多個實用的 props，可快速調整樣式。

基本用法

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

變體

分隔線元件支援三種變體：fullWidth (預設)、inset 和 middle。

方向

使用 orientation prop 將分隔線從水平變更為垂直。當使用垂直方向時，分隔線會呈現 <div> 以及對應的輔助功能屬性，而不是 <hr>，以符合 WAI-ARIA 規範。

彈性項目

當在彈性容器中使用分隔線時，請使用 flexItem prop 來顯示分隔線。

包含子元素

使用 textAlign prop 對齊由分隔線包裝的元素。

客製化

與列表一起使用

當使用分隔線分隔列表中的項目時，請使用 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 和 classes 的完整參考。

• <Divider />