Elements

参考

走马灯 Carousel

Carousel:轮播组件。幻灯片在一条由发丝线裁边的轨道中切换,切换按钮是低调的 outline 控件,只有当前指示器使用墨色。部件:Root、Control、PrevTrigger、NextTrigger、ItemGroup、Item、IndicatorGroup、Indicator、AutoplayTrigger、ProgressText。

Root · ItemGroup · Item · Control · NextTrigger · PrevTrigger · IndicatorGroup · Indicator · AutoplayTrigger · ProgressText

#AutoplayIndicator

属性类型默认值描述
fallbackstring自动播放暂停时显示的备用内容

#AutoplayTrigger

纯造型的部件——自身没有属性,沿用部件结构的共享样式。

#Control

纯造型的部件——自身没有属性,沿用部件结构的共享样式。

#IndicatorGroup

纯造型的部件——自身没有属性,沿用部件结构的共享样式。

#Indicator

属性类型默认值描述
indexnumber指示器索引
readOnlyboolean | undefinedfalse指示器是否只读

#ItemGroup

纯造型的部件——自身没有属性,沿用部件结构的共享样式。

#Item

属性类型默认值描述
indexnumber条目索引
snapAlign"start" | "end" | "center" | undefined"start"条目的吸附对齐方式

#NextTrigger

纯造型的部件——自身没有属性,沿用部件结构的共享样式。

#PrevTrigger

纯造型的部件——自身没有属性,沿用部件结构的共享样式。

#ProgressText

纯造型的部件——自身没有属性,沿用部件结构的共享样式。

#Root

属性类型默认值描述
allowMouseDragbooleanfalse是否允许用鼠标拖拽滚动
autoplayboolean | { delay: number; }false是否自动滚动;默认延迟 4000ms
autoSizebooleanfalse是否允许幻灯片使用不同宽度
defaultPagenumber0初始滚动到的页码;无需控制轮播页码时使用
idstring组件内部状态机的唯一标识
idsPartial<{ root: string; item(index: number): string; itemGroup: string; nextTrigger: string; prevTrigger: string; indicatorGroup: string; indicator(index: number): string; }>轮播内各元素的 id;便于组合使用
inViewThresholdnumber | number[]0.6判断条目是否进入可视区域的阈值
loopbooleanfalse轮播是否循环
orientation'horizontal' | 'vertical'"horizontal"轮播方向,可为 horizontal 或 vertical
paddingstring滚动区域四周的额外空间;用于让相邻条目部分保持可见
pagenumber轮播的受控页码
slideCountnumber幻灯片总数;用于 SSR 渲染初始吸附点状态
slidesPerMovenumber | 'auto'"auto"每次滚动的幻灯片数量;设为 auto 时,由 slidesPerPage 决定
slidesPerPagenumber1同时显示的幻灯片数量
snapType'proximity' | 'mandatory'"mandatory"条目的吸附类型
spacingstring"0px"条目间距
translationscarousel.IntlTranslations本地化文案
事件载荷
autoplayStatusChangedetails: AutoplayStatusDetails
dragStatusChangedetails: DragStatusDetails
pageChangedetails: PageChangeDetails
update:pagepage: number