menuMDUI文件
color_lens
基於 Material Design 3 與 Web Components 的全新 mdui 2 現已發佈,前往查看 mdui 2 開發文件

分隔線

分隔線用於管理和分隔清單和版面配置中的內容,以便讓內容具有更好的視覺效果和空間感。

呼叫方式

分隔線使用純 CSS 編寫,只需編寫 HTML 程式碼即可生效。

色彩

  • 深色分隔線,用於淺色背景
  • 淺色分隔線,用於深色背景
  • 自動調整顏色的分隔線,會根據頁面主題自動調整為深色或淺色

樣式

等屏寬分隔線

等屏寬分隔線會佔據 100% 的寬度。可以使用的類別名稱包括:

  • mdui-divider:在預設主題下為深色,在深色主題下為淺色。
  • mdui-divider-light:淺色的分隔線,用在深色背景上。
  • mdui-divider-dark:深色的分隔線,用在淺色背景上。
範例
<div class="mdui-divider"></div>

內凹分隔線

內凹分隔線距離左側有 72px 的距離,經常用在有頭像或圖示的清單中。可以使用的類別名稱包括:

  • mdui-divider-inset:在預設主題下為深色,在深色主題下為淺色。
  • mdui-divider-inset-light:淺色的分隔線,用在深色背景上。
  • mdui-divider-inset-dark:深色的分隔線,用在淺色背景上。
範例
<div class="mdui-divider-inset"></div>

CSS 類別清單

類別名稱說明
.mdui-divider定義分隔線。在預設主題下為深色,在深色主題下為淺色。
.mdui-divider-light定義淺色的分隔線,用於深色背景。
.mdui-divider-dark定義深色的分隔線,用於淺色背景。
.mdui-divider-inset定義內凹分隔線。在預設主題下為深色,在深色主題下為淺色。
.mdui-divider-inset-light定義淺色的內凹分隔線,用於深色背景。
.mdui-divider-inset-dark定義深色的內凹分隔線,用於淺色背景。