as

Settings
Sign out
Notifications
Alexa
亚马逊应用商店
Ring
AWS
文档
Support
Contact Us
My Cases
新手入门
设计和开发
应用发布
参考
支持

ProgressBar

ProgressBar

Progress Bar组件显示进度条以示出正在进行的活动。未定义时,进度条显示不确定的指示器。

用法

导入

复制到剪贴板。

import { ProgressBar } from '@amazon-devices/kepler-ui-components';

示例

已复制到剪贴板。

<ProgressBar
    progress={50}
    size={"xl"}
/>

属性

属性 类型 默认值 是否必需 描述
progress 数字 (不适用) 从0到100的数字,表示进度百分比。如果未定义,则显示不确定的进度指示器。
animationDuration 数字 确定时为250毫秒,不确定时为1000毫秒 进度动画的持续时间,以毫秒为单位
indicatorColor ColorValue 由主题决定 进度指示器的颜色
trackColor ColorValue 由主题决定 进度轨道(容器)的颜色
size SizeVariantAll "md" 进度条的大小。支持'xs''sm''md''lg''xl''xxl'
barStyle ViewStyle 由主题决定 进度条(也称为轨道或容器)的样式覆盖项
indicatorStyle ViewStyle 由主题决定 指示器的样式覆盖项

自定义

可以使用以下属性自定义进度条:progressanimationDurationindicatorColortrackColorsizebarStyleindicatorStylertl

主题支持可用,目前适用于组件的borderRadiusheightwidthbackgroundColor样式。

交互性

模态 是否可用
方向键
触摸
语音

无障碍功能

属性 是否可用
accessible
accessibilityRole
accessibilityLabel
accessibilityValue
accessibilityActions
accessibilityState

用户界面体验

确定

本视频演示了确定进度条。

不确定

本视频演示了不确定进度条。

切换

本视频演示了在运行时于不确定和确定指示器之间动态切换的流程。


Last updated: 2026年6月23日