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

组件的圆角大小。可以指定一个具体的像素值;但更推荐引用设计令牌

本页目录