交互控件StepPlayer分段进度播放控制flubber

步骤播放器

iOS 风格的分段进度轨道，带播放、暂停与重播控制。当前步骤会拉伸成一条正在填充的进度条。

上面的组件正在页面上实时运行，可以直接交互。

安装

在项目根目录执行下面的命令，组件源码会写入 @/components/ui/step-player.tsx。

npx shadcn@latest add swamimalode07/rare-ui/step-player

用法

组件默认导出（或具名导出）即可直接使用，不需要额外的 Provider。

step-player.tsx

1import { StepPlayer } from "@/components/ui/step-player"
2
3export function Demo() {
4  return (
5    <StepPlayer
6      steps={[
7        { label: "解析需求" },
8        { label: "生成代码" },
9        { label: "运行测试" },
10        { label: "部署上线" },
11      ]}
12      duration={4}
13      loop
14      seekable
15      controlPosition="left"
16    />
17  )
18}

属性

下表列出了该组件公开的主要属性，所有未列出的原生属性都会透传到根元素。

属性	类型	默认值	说明
steps	number \| { duration?; label? }[]	4	步骤数量或步骤定义。
value	number	—	受控当前步骤。
onValueChange	(value: number) => void	—	步骤变化回调。
playing	boolean	—	受控播放状态。
defaultPlaying	boolean	—	非受控初始播放状态。
duration	number	—	每一步的时长（秒）。
loop	boolean	—	播放结束后是否循环。
onComplete	() => void	—	全部播完回调。
size	number	—	轨道高度。
showControl	boolean	true	是否显示控制按钮。
controlPosition	"left" \| "right"	—	控制按钮位置。
seekable	boolean	true	是否可点击跳转步骤。