Divider 分割線

用一條線把內容區隔成不同段落或群組,可水平也可垂直。使用 Element Plus 的 el-divider。

設計準則

• 水平分割用來切開上下段落、卡片內的不同資訊區塊
• 垂直分割(direction="vertical")用來隔開同一行的並列項目,例如導覽連結、操作按鈕群
• 帶文字時,文字是「這一段的小標題」,用 content-position 決定靠左 / 置中 / 靠右;靠左最常見
• 分割線是輕量的區隔工具,間距已內建,不必再自己加上下 margin
• 不要濫用:同一畫面塞太多條線會顯得雜亂,能靠留白區隔就優先用留白

基本用法

上下兩段內容之間插入一條水平線。

loading

帶文字內容

在分割線中間放文字或圖標當作「小標題」,用 content-position 控制靠左 / 置中 / 靠右。

loading

線條樣式

用 border-style 換成虛線、點線或雙線,傳達不同的分隔強度。

loading

垂直分割

direction="vertical" 用來隔開同一行的並列項目,例如導覽連結或操作按鈕。

loading

Do / Don't

✅ Do	❌ Don't
用來區隔不同段落或群組	每兩行就插一條線,畫面被切碎
垂直分割隔開同一行的並列項目	拿來當裝飾線亂放
帶文字時把文字當小標題(多用靠左)	放一大段文字在線裡
靠內建間距,直接使用	額外再加一堆上下 margin

給工程師

• props:direction(horizontal / vertical,預設 horizontal)、content-position(left / center / right,預設 center)、border-style(CSS border-style,如 solid / dashed / dotted / double,預設 solid)
• 帶文字內容直接寫在 <el-divider>文字</el-divider> 之間;也可放圖標
• 顏色與間距沿用 EP 內建變數,深色模式自動同步,一般不需另外覆寫
• 完整 API 見 Element Plus Divider 文件。本站規範優先於 EP 文件中的視覺建議。