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 頂部應用程式列
函式
獨立程式庫

LinearProgress線性進度條

線性進度條是一種橫向的指示器,用來向使用者展示任務的執行進度,如資料載入或表單提交等。

使用方法

按需引入元件:

import 'mdui/components/linear-progress.js';

按需引入元件的 TypeScript 型別:

import type { LinearProgress } from 'mdui/components/linear-progress.js';

使用範例:

<mdui-linear-progress></mdui-linear-progress>

範例

設定進度

線性進度條預設為不確定的進度,你可以透過 value 屬性來設定目前的進度,預設的進度最大值為 1

你也可以透過 max 屬性來設定進度的最大值。

API

屬性

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

進度條的最大值。預設為 1

valuevaluenumber-

進度條的目前值。如果未指定該值,則處於不確定狀態

CSS Parts

名稱
indicator

指示器部分

CSS 自訂屬性

名稱
--shape-corner

元件的圓角大小。可以指定一個具體的像素值;但更推薦引用設計令牌

本頁目錄