iter(g29): 新增 carousel 轮播组件
This commit is contained in:
+29
-1
@@ -1,6 +1,6 @@
|
||||
# @ui-arch 组件库 Agent 文档(无图形版)
|
||||
|
||||
> 自动生成于 2026-10-26T03:38:39.607Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 自动生成于 2026-10-26T03:39:41.448Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
|
||||
|
||||
## 快速上手
|
||||
@@ -1036,6 +1036,33 @@ list({ header: '待办', bordered: true, items: [{ title: '报销单 RB-2048', d
|
||||
|
||||
现场演示:apps/docs/demo.html#sec-list
|
||||
|
||||
### carousel — 轮播 Carousel
|
||||
|
||||
参数:
|
||||
|
||||
- items(必填):unknown[] —— 每张幻灯片内容,顺序即播放顺序
|
||||
- index:Signal<number> —— 当前下标信号;不传则内部维护
|
||||
- autoplay:number —— 自动前进间隔(毫秒);缺省不自动播放
|
||||
- height:number —— 固定高度像素;缺省由内容撑开
|
||||
- label:string —— 区域无障碍名称;缺省「轮播」
|
||||
- onChange(回调):(index: number) => void —— 切换回调:点击指示点/箭头/键盘/自动前进都会触发
|
||||
|
||||
示例:
|
||||
|
||||
```
|
||||
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) })
|
||||
```
|
||||
|
||||
手把手:
|
||||
|
||||
1. items 每项是任意节点(图、卡片、文字均可),顺序即播放顺序
|
||||
2. index 传自己的信号即可外部受控(外部改信号轮播会跟),不传则由组件内部维护
|
||||
3. height 控固定高度(缺省随内容撑开);autoplay 传毫秒数自动前进,鼠标悬停自动暂停
|
||||
4. 键盘:聚焦轮播后 ←→ 切换,事件不冒泡避免连带切换外层 tabs/menu
|
||||
5. 指示点与箭头都可点击,末张下一张环形回到首张
|
||||
|
||||
现场演示:apps/docs/demo.html#sec-carousel
|
||||
|
||||
API 速览:
|
||||
|
||||
- button(props):按钮,variant = primary | ghost | danger,disabled 支持布尔或信号禁用
|
||||
@@ -1079,6 +1106,7 @@ API 速览:
|
||||
- descriptions(props):描述列表,items(label/value/span) 铺进 column 列网格,bordered 切表格形态,窄屏自动单列
|
||||
- statistic(props):统计数值,标题 + 大号数字 + 前后缀 + 环比趋势,value 变化时 rAF 滚动过渡(400ms easeOutCubic),减弱动效偏好下直落终值
|
||||
- list(props):列表,header/footer 外壳 + 条目 avatar/title/description/extra,onItemClick 让条目可点击,items 为空回落空状态
|
||||
- carousel(props):轮播,items 横排位移,指示点/箭头/←→ 键切换,autoplay 毫秒自动前进且悬停暂停,index 信号可外部受控
|
||||
|
||||
一行用法:
|
||||
|
||||
|
||||
Reference in New Issue
Block a user