iter(g29): 新增 carousel 轮播组件
This commit is contained in:
@@ -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",
|
||||
"指示点与箭头都可点击,末张下一张环形回到首张"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user