参考
走马灯 Carousel
Carousel:轮播组件。幻灯片在一条由发丝线裁边的轨道中切换,切换按钮是低调的 outline 控件,只有当前指示器使用墨色。部件:Root、Control、PrevTrigger、NextTrigger、ItemGroup、Item、IndicatorGroup、Indicator、AutoplayTrigger、ProgressText。
Root · ItemGroup · Item · Control · NextTrigger · PrevTrigger · IndicatorGroup · Indicator · AutoplayTrigger · ProgressText
#AutoplayIndicator
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
fallback | string | 自动播放暂停时显示的备用内容 |
#AutoplayTrigger
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#Control
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#IndicatorGroup
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#Indicator
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
index | number | 指示器索引 | |
readOnly | boolean | undefined | false | 指示器是否只读 |
#ItemGroup
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#Item
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
index | number | 条目索引 | |
snapAlign | "start" | "end" | "center" | undefined | "start" | 条目的吸附对齐方式 |
#NextTrigger
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#PrevTrigger
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#ProgressText
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#Root
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
allowMouseDrag | boolean | false | 是否允许用鼠标拖拽滚动 |
autoplay | boolean | { delay: number; } | false | 是否自动滚动;默认延迟 4000ms |
autoSize | boolean | false | 是否允许幻灯片使用不同宽度 |
defaultPage | number | 0 | 初始滚动到的页码;无需控制轮播页码时使用 |
id | string | 组件内部状态机的唯一标识 | |
ids | Partial<{ root: string; item(index: number): string; itemGroup: string; nextTrigger: string; prevTrigger: string; indicatorGroup: string; indicator(index: number): string; }> | 轮播内各元素的 id;便于组合使用 | |
inViewThreshold | number | number[] | 0.6 | 判断条目是否进入可视区域的阈值 |
loop | boolean | false | 轮播是否循环 |
orientation | 'horizontal' | 'vertical' | "horizontal" | 轮播方向,可为 horizontal 或 vertical |
padding | string | 滚动区域四周的额外空间;用于让相邻条目部分保持可见 | |
page | number | 轮播的受控页码 | |
slideCount | number | 幻灯片总数;用于 SSR 渲染初始吸附点状态 | |
slidesPerMove | number | 'auto' | "auto" | 每次滚动的幻灯片数量;设为 auto 时,由 slidesPerPage 决定 |
slidesPerPage | number | 1 | 同时显示的幻灯片数量 |
snapType | 'proximity' | 'mandatory' | "mandatory" | 条目的吸附类型 |
spacing | string | "0px" | 条目间距 |
translations | carousel.IntlTranslations | 本地化文案 |
| 事件 | 载荷 |
|---|---|
autoplayStatusChange | details: AutoplayStatusDetails |
dragStatusChange | details: DragStatusDetails |
pageChange | details: PageChangeDetails |
update:page | page: number |