iter(g53): 新增 tour 引导漫游组件
This commit is contained in:
@@ -65,7 +65,8 @@
|
||||
"autoComplete(props):输入联想,输入即过滤候选、↑↓ 环形高亮 / Enter 选中 / Esc 收起,options 可传函数做远程联想",
|
||||
"datePicker(props):日期选择,单月网格 + 翻月 / 今天快捷键,value 为 YYYY-MM-DD 信号,min/max 闭区间限制,方向键逐日逐周可导航",
|
||||
"backTop(props):返回顶部悬浮按钮,越过阈值才浮现,外环 conic-gradient 显示已滚比例,点击平滑回顶",
|
||||
"colorPicker(props):颜色选择,预设色板(缺省语义令牌色)+ 原生取色器 + 手输 CSS 颜色串,value 为颜色串信号"
|
||||
"colorPicker(props):颜色选择,预设色板(缺省语义令牌色)+ 原生取色器 + 手输 CSS 颜色串,value 为颜色串信号",
|
||||
"tour(props):引导漫游,返回 { el, start, close } 句柄;聚光框按 target 选择器定位,卡片自动选方位,Esc / 跳过走 onClose"
|
||||
],
|
||||
"keyTypes": [
|
||||
"ButtonProps",
|
||||
@@ -2244,6 +2245,42 @@
|
||||
"点色块即提交;手输框支持任意 CSS 颜色串(含 var(--ua-color-accent)),回车提交",
|
||||
"触发器左侧色块始终预览当前值,点击外部或 Esc 收起"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "tour",
|
||||
"title": "引导漫游 Tour",
|
||||
"demo": "sec-tour",
|
||||
"props": [
|
||||
{
|
||||
"n": "steps",
|
||||
"t": "TourStep[]",
|
||||
"r": 1,
|
||||
"d": "步骤序列:每步含 target 选择器、title、可选 description"
|
||||
},
|
||||
{
|
||||
"n": "padding",
|
||||
"t": "number",
|
||||
"d": "聚光区相对目标的外扩像素;缺省 6"
|
||||
},
|
||||
{
|
||||
"n": "onFinish",
|
||||
"t": "() => void",
|
||||
"d": "走完最后一步的回调"
|
||||
},
|
||||
{
|
||||
"n": "onClose",
|
||||
"t": "() => void",
|
||||
"d": "中途跳过(× 或 Esc)的回调"
|
||||
}
|
||||
],
|
||||
"example": "const t = tour({ steps: [{ target: '#sec-tour', title: '引导漫游', description: '按选择器定位' }], onFinish: () => toast.success('完成') }); document.body.append(t.el); t.start();",
|
||||
"steps": [
|
||||
"tour() 返回 { el, start, close } 句柄:el 必须挂到 body(fixed 定位,不占布局)",
|
||||
"start() 从第一步播放,可重复调用重播;close() 立即退出并按跳过处理",
|
||||
"聚光框按 target 选择器定位并外扩 padding,其余区域由超大 box-shadow 压暗(省掉独立遮罩层)",
|
||||
"卡片优先落在目标下方,空间不足自动翻到上方,左右夹在视口内;滚动 / 缩放会实时重算",
|
||||
"末步按钮文案变「完成」并触发 onFinish;× 或 Esc 触发 onClose,焦点归还开启前的元素"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user