iter(g29): 新增 carousel 轮播组件

This commit is contained in:
HIsheR
2026-10-26 11:40:07 +08:00
parent 84f83df615
commit e5ed297842
13 changed files with 312 additions and 9 deletions
+49 -1
View File
@@ -53,7 +53,8 @@
"segmented(props):分段控制器,胶囊分段 + 滑动滑块,value 信号双向绑定,←→ 环形导航,整组或单项可禁用",
"descriptions(props):描述列表,items(label/value/span) 铺进 column 列网格,bordered 切表格形态,窄屏自动单列",
"statistic(props):统计数值,标题 + 大号数字 + 前后缀 + 环比趋势,value 变化时 rAF 滚动过渡(400ms easeOutCubic),减弱动效偏好下直落终值",
"list(props):列表,header/footer 外壳 + 条目 avatar/title/description/extra,onItemClick 让条目可点击,items 为空回落空状态"
"list(props):列表,header/footer 外壳 + 条目 avatar/title/description/extra,onItemClick 让条目可点击,items 为空回落空状态",
"carousel(props):轮播,items 横排位移,指示点/箭头/←→ 键切换,autoplay 毫秒自动前进且悬停暂停,index 信号可外部受控"
],
"keyTypes": [
"ButtonProps",
@@ -1684,6 +1685,53 @@
"需要点击时传 onItemClick(item, index),条目自动加 hover 底色;bordered: true 给外边框与分隔线",
"items 为空数组时自动渲染 empty 占位,文案可用 emptyText 覆盖"
]
},
{
"id": "carousel",
"title": "轮播 Carousel",
"demo": "sec-carousel",
"props": [
{
"n": "items",
"t": "unknown[]",
"r": 1,
"d": "每张幻灯片内容,顺序即播放顺序"
},
{
"n": "index",
"t": "Signal<number>",
"d": "当前下标信号;不传则内部维护"
},
{
"n": "autoplay",
"t": "number",
"d": "自动前进间隔(毫秒);缺省不自动播放"
},
{
"n": "height",
"t": "number",
"d": "固定高度像素;缺省由内容撑开"
},
{
"n": "label",
"t": "string",
"d": "区域无障碍名称;缺省「轮播」"
},
{
"n": "onChange",
"t": "(index: number) => void",
"k": 1,
"d": "切换回调:点击指示点/箭头/键盘/自动前进都会触发"
}
],
"example": "const i = signal(0); carousel({ items: [h('div', null, 'A'), h('div', null, 'B')], index: i, height: 150, autoplay: 4000, onChange: (k) => console.log(k) })",
"steps": [
"items 每项是任意节点(图、卡片、文字均可),顺序即播放顺序",
"index 传自己的信号即可外部受控(外部改信号轮播会跟),不传则由组件内部维护",
"height 控固定高度(缺省随内容撑开);autoplay 传毫秒数自动前进,鼠标悬停自动暂停",
"键盘:聚焦轮播后 ←→ 切换,事件不冒泡避免连带切换外层 tabs/menu",
"指示点与箭头都可点击,末张下一张环形回到首张"
]
}
]
}