chore(docs): 同步配方 13 的索引产物
This commit is contained in:
+10
-4
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"$schema": "ui-arch-registry-index/0.1",
|
"$schema": "ui-arch-registry-index/0.1",
|
||||||
"generatedAt": "2026-10-26T11:52:57.122Z",
|
"generatedAt": "2026-10-26T11:59:09.023Z",
|
||||||
"repoRoot": ".",
|
"repoRoot": ".",
|
||||||
"packages": [
|
"packages": [
|
||||||
{
|
{
|
||||||
@@ -267,7 +267,7 @@
|
|||||||
"无障碍基线:装饰性占位(skeleton)aria-hidden、加载指示(spinner)role=status、关闭按钮必须 aria-label、弹层弹窗 aria-haspopup/expanded、读屏可见的状态一律同步 aria-*"
|
"无障碍基线:装饰性占位(skeleton)aria-hidden、加载指示(spinner)role=status、关闭按钮必须 aria-label、弹层弹窗 aria-haspopup/expanded、读屏可见的状态一律同步 aria-*"
|
||||||
],
|
],
|
||||||
"docs": {
|
"docs": {
|
||||||
"intro": "28 个 DOM 组件,统一用法:组件是普通函数,传入 props 返回 DOM 节点;需要状态时先创建 signal 再双向绑定。引入 CSS:import '@ui-arch/ui/ui.css'(内部已消费 tokens)。\n\n阴影对照表:下拉弹层=shadow-2 / 浮层与悬浮按钮=shadow-3 / 模态弹窗与抽屉及通知=shadow-4 / 卡片与输入组轻浮起=shadow-1;主按钮与强调件的主题色投影=shadow-accent / shadow-accent-strong,组件内不得再手写 box-shadow 字面值。",
|
"intro": "70 个 DOM 组件,统一用法:组件是普通函数,传入 props 返回 DOM 节点;需要状态时先创建 signal 再双向绑定。引入 CSS:import '@ui-arch/ui/ui.css'(内部已消费 tokens)。\n\n阴影对照表:下拉弹层=shadow-2 / 浮层与悬浮按钮=shadow-3 / 模态弹窗与抽屉及通知=shadow-4 / 卡片与输入组轻浮起=shadow-1;主按钮与强调件的主题色投影=shadow-accent / shadow-accent-strong,组件内不得再手写 box-shadow 字面值。\n\n浮层入场统一:新弹层用 animation: ua-pop-drop var(--ua-duration-fast) var(--ua-ease-out) both(自上而下 4px 淡入),弹层翻到触发器上方时叠 .is-flip 覆盖成 ua-pop-rise(自下而上),不要再为单个组件自造 keyframes——方向与时长各写一份就会出现「翻转后还朝下入场」的错位。",
|
||||||
"steps": [
|
"steps": [
|
||||||
"安装依赖:pnpm add @ui-arch/ui @ui-arch/frame(workspace 内自动链接)",
|
"安装依赖:pnpm add @ui-arch/ui @ui-arch/frame(workspace 内自动链接)",
|
||||||
"引入样式:在应用入口 import '@ui-arch/ui/ui.css',暗色主题在根元素设 data-theme='dark'",
|
"引入样式:在应用入口 import '@ui-arch/ui/ui.css',暗色主题在根元素设 data-theme='dark'",
|
||||||
@@ -3798,6 +3798,11 @@
|
|||||||
"t": "number",
|
"t": "number",
|
||||||
"d": "分钟步长;缺省 5,超过 30 按 30 处理(如 15 只有 00/15/30/45)"
|
"d": "分钟步长;缺省 5,超过 30 按 30 处理(如 15 只有 00/15/30/45)"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"n": "clearable",
|
||||||
|
"t": "boolean",
|
||||||
|
"d": "显示清空按钮 ×(仅在有值时出现);缺省 false,键盘 Delete / Backspace 等价"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"n": "placeholder",
|
"n": "placeholder",
|
||||||
"t": "string",
|
"t": "string",
|
||||||
@@ -3817,10 +3822,11 @@
|
|||||||
"example": "const at = signal('09:30'); timePicker({ value: at, minuteStep: 15, onChange: (t) => toast.info(`定在 ${t}`) })",
|
"example": "const at = signal('09:30'); timePicker({ value: at, minuteStep: 15, onChange: (t) => toast.info(`定在 ${t}`) })",
|
||||||
"steps": [
|
"steps": [
|
||||||
"创建信号 at = signal('09:30') 并传入 value:组件读它显示、选完写回,双向绑定",
|
"创建信号 at = signal('09:30') 并传入 value:组件读它显示、选完写回,双向绑定",
|
||||||
"点触发器展开时 / 分两列,当前值所在格高亮并自动滚到列中部,不必手动找",
|
"点触发器展开时 / 分两列:当前值所在格高亮并自动滚到列中部;还没选过时停在此刻(当前小时 / 当前分钟档),打开即可就近选",
|
||||||
"先点时列定小时(分默认落到首个步长值,值立刻可用),再点分列即完成并收起,焦点回到触发器",
|
"先点时列定小时(分默认落到首个步长值,值立刻可用),再点分列即完成并收起,焦点回到触发器",
|
||||||
"列内可用 ↑↓ 环形移动、Home/End 直达首末;Tab、Esc、点击外部都能正常进出与收起",
|
"列内可用 ↑↓ 环形移动、Home/End 直达首末;Tab、Esc、点击外部都能正常进出与收起",
|
||||||
"需要 15 分钟一档就传 minuteStep: 15,步长只影响分列的可选值,时列始终 24 档"
|
"需要 15 分钟一档就传 minuteStep: 15,步长只影响分列的可选值,时列始终 24 档",
|
||||||
|
"需要允许回到「未选」态就传 clearable: true:有值时触发器右侧出现 ×(不进 Tab 序),聚焦触发器按 Delete / Backspace 也能清空,回调收到空串"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -160,3 +160,4 @@
|
|||||||
- 配方 10:暗色主题切换(只切 data-theme,不改令牌名)(3 条要点)
|
- 配方 10:暗色主题切换(只切 data-theme,不改令牌名)(3 条要点)
|
||||||
- 配方 11:数据看板筛选区(区间滑块 + 日期预设 + 分组下拉)(3 条要点)
|
- 配方 11:数据看板筛选区(区间滑块 + 日期预设 + 分组下拉)(3 条要点)
|
||||||
- 配方 12:命令面板(⌘K 全局操作入口)(6 条要点)
|
- 配方 12:命令面板(⌘K 全局操作入口)(6 条要点)
|
||||||
|
- 配方 13:预约时点(日期 + 时间两段拼装)(5 条要点)
|
||||||
|
|||||||
Reference in New Issue
Block a user