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 由主题决定 否 指示器的样式覆盖项

自定义

可以使用以下属性自定义进度条:progress、animationDuration、indicatorColor、trackColor、size、barStyle、indicatorStyle和rtl。

主题支持可用,目前适用于组件的borderRadius、height、width和backgroundColor样式。

交互性

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

无障碍功能

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

用户界面体验

确定

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

不确定

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

切换

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


Last updated: 2026年6月23日