Preview Updated 2026-05-10

Marquee

Horizontally scrolling text or elements at a constant speed; for announcement bars, tickers, and logo walls.

Basic usage

duration controls seconds per full loop; default direction is right-to-left. pauseOnHover is on by default and pauses on mouse hover.

📢 系统将于今晚 23:00 进行升级维护,预计 30 分钟 · 期间订单系统不可用 · 请提前安排
<CfMarquee :duration="20">
📢 The system will undergo maintenance tonight at 23:00...
</CfMarquee>
<CfMarquee duration={20}>
📢 The system will undergo maintenance tonight at 23:00...
</CfMarquee>

API

PropTypeDefaultDescription
contentstringSimple text content; rich content can also be passed via the default slot / children
durationnumber20Seconds per loop; smaller is faster
direction'left' | 'right''left'Scroll direction
pauseOnHoverbooleantruePause animation on hover
gapnumber40Pixels of whitespace between the end of content and the next loop’s start

反馈与讨论

Marquee · Discussion

0
0 / 600
一键发送
正在加载评论...