参考
滚动横幅 Marquee
Marquee:跑马灯。方形 chip 排成一条横向长带,两端淡出而不是硬切断。部件:Root、Viewport、Content、Edge、Item。
Root · Viewport · Content · Edge · Item
#Content
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#Edge
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
side | Side | 边缘渐变显示的一侧 |
#Item
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#Root
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
autoFill | boolean | false | 是否复制内容填满容器 |
defaultPaused | boolean | false | 跑马灯是否默认暂停 |
delay | number | 0 | 动画开始前的延迟时间(秒) |
id | string | 组件内部状态机的唯一标识 | |
ids | Partial<{ root: string; viewport: string; content: (index: number) => string; }> | 跑马灯各元素的 id,便于组合使用 | |
loopCount | number | 0 | 动画循环次数;0 表示无限循环 |
paused | boolean | 跑马灯是否暂停 | |
pauseOnInteraction | boolean | false | 悬停或聚焦时是否暂停跑马灯 |
reverse | boolean | false | 是否反转动画方向 |
side | marquee.Side | "start" | 跑马灯滚动的方向 |
spacing | string | "1rem" | 跑马灯项之间的间距 |
speed | number | 50 | 跑马灯动画速度(像素 / 秒) |
translations | marquee.IntlTranslations | 本地化提示文案 |
| 事件 | 载荷 |
|---|---|
pauseChange | details: PauseStatusDetails |
complete | — |
loopComplete | — |
update:paused | paused: boolean |
#Viewport
纯造型的部件——自身没有属性,沿用部件结构的共享样式。