ElyriProgress
进度条：确定与不确定两种形态，四档语义配色，可显示百分比，暴露标准 progressbar 语义。
安装
添加组件
pnpm dlx @elyri/cli@latest add progress示例
基础用法
设置 value 与无障碍 label，可同时显示百分比。
import { Progress } from './components/elyri/Progress';
export function Example() {
return <Progress value={60} label="Progress" showValue />;
}不确定进度
不确定进度：循环动画，不暴露具体数值。
import { Progress } from './components/elyri/Progress';
export function Example() {
return <Progress indeterminate label="Loading" />;
}尺寸
两档粗细：sm / md。
import { Progress } from './components/elyri/Progress';
export function Example() {
return (
<div className="demo-ui-stack">
<Progress value={60} size="sm" label="Small" showValue />
<Progress value={60} size="md" label="Medium" showValue />
</div>
);
}全部变体
四档语义配色：accent / success / warning / danger。
import { Progress } from './components/elyri/Progress';
export function Example() {
return (
<div className="demo-ui-stack">
<Progress value={60} variant="accent" label="Accent" showValue />
<Progress value={60} variant="success" label="Success" showValue />
<Progress value={60} variant="warning" label="Warning" showValue />
<Progress value={60} variant="danger" label="Danger" showValue />
</div>
);
}属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | number | 0 | 当前值，范围 0–max |
max | number | 100 | 最大值，默认 100 |
indeterminate | boolean | false | 不确定进度：循环动画，不暴露具体数值 |
size | 'sm' | 'md' | 'md' | 粗细：sm / md |
variant | 'accent' | 'success' | 'warning' | 'danger' | 'accent' | 颜色：accent / success / warning / danger |
showValue | boolean | false | 在右侧显示百分比 |
label | string | — | 无障碍名称 |
...rest | HTMLAttributes | — | 其余属性透传给原生 div |