iter: d09 新增滑块 slider 组件
This commit is contained in:
+62
-4
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"$schema": "ui-arch-registry-index/0.1",
|
||||
"generatedAt": "2026-10-23T08:52:28.012Z",
|
||||
"generatedAt": "2026-10-23T08:53:00.281Z",
|
||||
"repoRoot": ".",
|
||||
"packages": [
|
||||
{
|
||||
@@ -130,7 +130,7 @@
|
||||
{
|
||||
"name": "@ui-arch/ui",
|
||||
"type": "skin-dom",
|
||||
"description": "DOM 皮肤组件库:button / textField / textarea / checkbox / switch / select / menu / radioGroup / accordion / breadcrumb / card / badge / alert / toast / tooltip / popover / skeleton / spinner / progress / tabs / pagination / modal / form / formItem / dataTable,构建在 @ui-arch/frame 与 @ui-arch/table-core 之上,样式只消费 --ua-* 令牌。",
|
||||
"description": "DOM 皮肤组件库:button / textField / textarea / slider / checkbox / switch / select / menu / radioGroup / accordion / breadcrumb / card / badge / alert / toast / tooltip / popover / skeleton / spinner / progress / tabs / pagination / modal / form / formItem / dataTable,构建在 @ui-arch/frame 与 @ui-arch/table-core 之上,样式只消费 --ua-* 令牌。",
|
||||
"tags": [
|
||||
"components",
|
||||
"dom",
|
||||
@@ -145,6 +145,7 @@
|
||||
"button(props):按钮,variant = primary | ghost | danger,disabled 支持布尔或信号禁用",
|
||||
"textField(props):文本输入,value 信号双向绑定,disabled 支持布尔或信号禁用",
|
||||
"textarea(props):多行输入,value 信号双向绑定,disabled 支持布尔或信号禁用",
|
||||
"slider(props):滑块,value 信号双向绑定,min/max/step 可配,原生 range 承载键盘交互,右侧可显示当前值",
|
||||
"checkbox(props):复选框,checked 信号双向绑定,disabled 支持布尔或信号禁用",
|
||||
"switchButton(props):开关,checked 信号双向绑定,disabled 支持布尔或信号禁用",
|
||||
"select(props):自绘下拉选择(非原生 select),value 信号双向绑定,点外部 / Esc 关闭,选项弹层带微动画,disabled 支持布尔或信号禁用",
|
||||
@@ -199,7 +200,8 @@
|
||||
"FormItemHandle",
|
||||
"FormProps",
|
||||
"DataTableProps",
|
||||
"PopoverProps"
|
||||
"PopoverProps",
|
||||
"SliderProps"
|
||||
]
|
||||
},
|
||||
"usage": "const checked = signal(false); checkbox({ label: '同意', checked }); const open = signal(false); modal({ title: '确认', open }, '内容')",
|
||||
@@ -209,7 +211,7 @@
|
||||
"语义色 variant 四档:default|info / success / warning / danger,一律来自令牌,禁止硬编码颜色"
|
||||
],
|
||||
"docs": {
|
||||
"intro": "24 个 DOM 组件,统一用法:组件是普通函数,传入 props 返回 DOM 节点;需要状态时先创建 signal 再双向绑定。引入 CSS:import '@ui-arch/ui/ui.css'(内部已消费 tokens)。",
|
||||
"intro": "25 个 DOM 组件,统一用法:组件是普通函数,传入 props 返回 DOM 节点;需要状态时先创建 signal 再双向绑定。引入 CSS:import '@ui-arch/ui/ui.css'(内部已消费 tokens)。",
|
||||
"steps": [
|
||||
"安装依赖:pnpm add @ui-arch/ui @ui-arch/frame(workspace 内自动链接)",
|
||||
"引入样式:在应用入口 import '@ui-arch/ui/ui.css',暗色主题在根元素设 data-theme='dark'",
|
||||
@@ -328,6 +330,62 @@
|
||||
"字数统计等派生逻辑直接在响应式文本里读 bio().length"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "slider",
|
||||
"title": "滑块 Slider",
|
||||
"demo": "sec-slider",
|
||||
"props": [
|
||||
{
|
||||
"n": "value",
|
||||
"t": "Signal<number>",
|
||||
"r": 1,
|
||||
"d": "当前值信号,双向绑定:拖动写回,外部赋值同步位置"
|
||||
},
|
||||
{
|
||||
"n": "min",
|
||||
"t": "number",
|
||||
"d": "最小值;缺省 0",
|
||||
"df": "0"
|
||||
},
|
||||
{
|
||||
"n": "max",
|
||||
"t": "number",
|
||||
"d": "最大值;缺省 100",
|
||||
"df": "100"
|
||||
},
|
||||
{
|
||||
"n": "step",
|
||||
"t": "number",
|
||||
"d": "步长;缺省 1",
|
||||
"df": "1"
|
||||
},
|
||||
{
|
||||
"n": "disabled",
|
||||
"t": "boolean | Signal<boolean>",
|
||||
"d": "禁用态:布尔直接置位,传信号则动态同步"
|
||||
},
|
||||
{
|
||||
"n": "showValue",
|
||||
"t": "boolean",
|
||||
"d": "是否右侧显示当前值;缺省 true",
|
||||
"df": "true"
|
||||
},
|
||||
{
|
||||
"n": "onChange",
|
||||
"t": "(value: number) => void",
|
||||
"k": 1,
|
||||
"d": "拖动回调"
|
||||
}
|
||||
],
|
||||
"example": "const vol = signal(40); slider({ value: vol, min: 0, max: 100, step: 5, onChange: (v) => console.log(v) })",
|
||||
"steps": [
|
||||
"创建数值信号(初值在 min/max 区间内),传入 value 完成双向绑定",
|
||||
"用 min / max / step 限定范围与粒度,如 step: 5 只取 5 的倍数",
|
||||
"拖动或按 ←→ 键改变值:原生 range 自带键盘与触屏交互,无需额外处理",
|
||||
"只想看拖动条不显示数字时传 showValue: false;需要自定义展示可自行读 signal",
|
||||
"禁用场景传 disabled(布尔或信号),置灰且不可拖"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "checkbox",
|
||||
"title": "复选框 Checkbox",
|
||||
|
||||
Reference in New Issue
Block a user