MDUI文件
複製 llms.txt 連結複製 llms-full.txt 連結以 Markdown 格式檢視此頁與 ChatGPT 討論此頁內容與 ChatGPT 討論專案完整文件
預設顏色
自選顏色
從桌布擷取顏色
請選擇一張桌布
開發指南
AI 輔助開發
樣式
與框架整合
元件
Avatar 頭像Badge 徽章BottomAppBar 底部應用程式列Button 按鈕ButtonIcon 圖示按鈕Card 卡片Checkbox 核取方塊Chip 標籤CircularProgress 環形進度條Collapse 收合區塊Dialog 對話框Divider 分隔線Dropdown 下拉元件Fab 浮動動作按鈕Icon 圖示Layout 版面配置LinearProgress 線性進度條List 清單Menu 選單NavigationBar 底部導覽列NavigationDrawer 導覽抽屜NavigationRail 側邊導覽列Radio 單選按鈕RangeSlider 範圍滑桿Select 選擇框SegmentedButton 分段按鈕Slider 滑桿Snackbar 消息條Switch 切換開關Tabs 分頁TextField 文字欄位Tooltip 工具提示TopAppBar 頂部應用程式列
函式
獨立程式庫

Divider分隔線

分隔線是一條細線,用來在清單和容器中分隔內容。

使用方法

按需引入元件:

import 'mdui/components/divider.js';

按需引入元件的 TypeScript 型別:

import type { Divider } from 'mdui/components/divider.js';

使用範例:

<mdui-divider></mdui-divider>

範例

垂直分隔線

加上 vertical 屬性,可讓分隔線垂直顯示。

左側縮排

加上 inset 屬性,可讓分隔線左側縮排。這通常用於清單中,以便讓分隔線和左側文字對齊。

兩側縮排

加上 middle 屬性,可讓分隔線兩側縮排。

API

屬性

HTML 屬性JavaScript 屬性Reflect型別預設值
verticalverticalbooleanfalse

是否為垂直分隔線

insetinsetbooleanfalse

是否進行左側縮排

middlemiddlebooleanfalse

是否進行左右兩側縮排

本頁目錄