iter(g213): 新增 timePicker 时间选择组件
This commit is contained in:
+28
-1
@@ -1,6 +1,6 @@
|
||||
# @ui-arch 组件库 Agent 文档(无图形版)
|
||||
|
||||
> 自动生成于 2026-10-26T11:50:16.380Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 自动生成于 2026-10-26T11:52:57.122Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
|
||||
|
||||
## 快速上手
|
||||
@@ -1986,6 +1986,32 @@ const cmdk = commandPalette({ open: signal(false), items: [{ id: 'save', label:
|
||||
|
||||
现场演示:apps/docs/demo.html#sec-cmdk
|
||||
|
||||
### timePicker — 时间选择 TimePicker
|
||||
|
||||
参数:
|
||||
|
||||
- value:Signal<string> —— 选中时间信号(HH:mm);不传则内部维护
|
||||
- minuteStep:number —— 分钟步长;缺省 5,超过 30 按 30 处理(如 15 只有 00/15/30/45)
|
||||
- placeholder:string —— 未选时占位文案;缺省「请选择时间」
|
||||
- disabled:boolean | Signal<boolean> —— 禁用触发器
|
||||
- onChange:(time: string) => void —— 写回回调:选时即触发一次(分默认 00),选完分再触发一次
|
||||
|
||||
示例:
|
||||
|
||||
```
|
||||
const at = signal('09:30'); timePicker({ value: at, minuteStep: 15, onChange: (t) => toast.info(`定在 ${t}`) })
|
||||
```
|
||||
|
||||
手把手:
|
||||
|
||||
1. 创建信号 at = signal('09:30') 并传入 value:组件读它显示、选完写回,双向绑定
|
||||
2. 点触发器展开时 / 分两列,当前值所在格高亮并自动滚到列中部,不必手动找
|
||||
3. 先点时列定小时(分默认落到首个步长值,值立刻可用),再点分列即完成并收起,焦点回到触发器
|
||||
4. 列内可用 ↑↓ 环形移动、Home/End 直达首末;Tab、Esc、点击外部都能正常进出与收起
|
||||
5. 需要 15 分钟一档就传 minuteStep: 15,步长只影响分列的可选值,时列始终 24 档
|
||||
|
||||
现场演示:apps/docs/demo.html#sec-timepicker
|
||||
|
||||
API 速览:
|
||||
|
||||
- button(props):按钮,variant = primary | ghost | danger,disabled 支持布尔或信号禁用;type 缺省 button(表单内不隐式提交)
|
||||
@@ -2059,6 +2085,7 @@ API 速览:
|
||||
- avatarGroup(props):头像组,横向叠放并在超出 max 时折叠成 +N,整组 title 列出全部姓名
|
||||
- virtualList(props):虚拟列表,固定行高长列表只渲染可视窗口 + 上下缓冲条,万级数据滚动不随总量掉帧;返回 { el, scrollTo } 句柄
|
||||
- commandPalette(props):命令面板,⌘K / Ctrl+K 唤起,输入即过滤(主文案/说明/关键词三层),↑↓ 环形选择 + 回车执行 + Esc 收起,选中与关闭都归还焦点;返回 { el, open, close } 句柄
|
||||
- timePicker(props):时间选择,时 / 分两列弹层,value 信号双向绑定 HH:mm,分钟可配步长,Esc 收起
|
||||
|
||||
一行用法:
|
||||
|
||||
|
||||
Reference in New Issue
Block a user