交互控件DurationPickergooeysquircle弹簧

时长选择器

用弹簧和形变（gooey）动画输入小时与分钟的选择器，squircle 圆角平滑过渡。

小时

分钟

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

安装

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

npx shadcn@latest add swamimalode07/rare-ui/duration-picker

用法

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

duration-picker.tsx

1import { useState } from "react"
2import { DurationPicker, type DurationValue } from "@/components/ui/duration-picker"
3
4export function Demo() {
5  const [value, setValue] = useState<DurationValue>({ hours: 1, minutes: 30 })
6
7  return (
8    <DurationPicker
9      value={value}
10      onChange={setValue}
11      onConfirm={(v) => console.log(v)}
12      maxHours={23}
13      maxMinutes={59}
14      hoursLabel="小时"
15      minutesLabel="分钟"
16    />
17  )
18}

属性

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

属性	类型	默认值	说明
value	{ hours: number; minutes: number }	—	受控值。
defaultValue	DurationValue	—	非受控默认值。
onChange	(value: DurationValue) => void	—	值变化回调。
onConfirm	(value: DurationValue) => void	—	确认回调。
onEditingChange	(editing: boolean) => void	—	编辑态变化回调。
defaultEditing	boolean	—	初始是否处于编辑态。
maxHours	number	—	小时上限。
maxMinutes	number	—	分钟上限。
hoursLabel	string	—	小时单位文案。
minutesLabel	string	—	分钟单位文案。
disabled	boolean	—	禁用交互。