Divider 分隔線

分隔線組件用於分隔內容區塊，提供視覺上的內容劃分。

基本用法

最基本的分隔線用法，用於分隔不同的內容區塊。

第一段內容

第二段內容

帶文字的分隔線

分隔線中間可以加入文字說明。

這是一些內容

或

這是另一些內容

重要分隔

更多內容在這裡

垂直分隔線

設置 orientation="vertical" 可以創建垂直分隔線。

Blog

部落格

Docs

文檔

Source

原始碼

自定義顏色

可以通過 color 屬性自定義分隔線的顏色。

不同顏色的分隔線

預設顏色 (#e5e7eb)

紅色 (#ef4444)

藍色 (#3b82f6)

綠色 (#10b981)

紫色 (#8b5cf6)

使用 CSS 變數 (var(--primary-color))

帶文字的彩色分隔線

紅色分隔線

藍色分隔線

綠色分隔線

垂直彩色分隔線

左側內容

中間內容

右側內容

組合使用

結合不同顏色和文字來創建豐富的內容分割效果。

產品介紹

這是一個很棒的產品

特色功能

• 功能一
• 功能二
• 功能三

價格資訊

基礎版$29/月

API

Props

屬性名	類型	預設值	說明
orientation	'horizontal' | 'vertical'	'horizontal'	分隔線方向
color	string	'#e5e7eb'	分隔線顏色
class	string	—	自定義類名

Slots

插槽名	說明
default	分隔線中間的文字內容

使用場景

• 內容分隔：將不同主題的內容進行視覺分隔
• 導航分隔：在導航欄中分隔不同的導航項目
• 表單分組：在長表單中分隔不同的輸入區塊
• 列表分隔：在列表項目之間添加分隔線

樣式自定義

組件提供了 CSS 類名和 CSS 變數供樣式自定義：

CSS 類名

• .sh-divider - 分隔線容器
• .sh-divider[data-orientation='horizontal'] - 水平分隔線
• .sh-divider[data-orientation='vertical'] - 垂直分隔線

CSS 變數

• --sh-divider-color - 分隔線顏色，可透過 color 屬性或 CSS 變數覆蓋