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 分钟 · 期间订单系统不可用 · 请提前安排

src/App.vue

<script setup lang="ts">
import { CfMarquee } from '@chufix-design/vue';
</script>
<template>
  <CfMarquee :duration="20">
    <span style="color: var(--fg-1);">📢 系统将于今晚 23:00 进行升级维护，预计 30 分钟 · 期间订单系统不可用 · 请提前安排</span>
  </CfMarquee>
</template>

<script setup>
import { CfMarquee } from '@chufix-design/vue';
</script>
<template>
  <CfMarquee :duration="20">
    <span style="color: var(--fg-1);">📢 系统将于今晚 23:00 进行升级维护，预计 30 分钟 · 期间订单系统不可用 · 请提前安排</span>
  </CfMarquee>
</template>

import { CfMarquee } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfMarquee duration={20}>
      📢 The system will undergo maintenance tonight at 23:00...
      </CfMarquee>
    </>
  );
}

API

Prop	Type	Default	Description
`content`	`string`	`—`	Simple text content; rich content can also be passed via the default slot / children
`duration`	`number`	`20`	Seconds per loop; smaller is faster
`direction`	`'left' \| 'right'`	`'left'`	Scroll direction
`pauseOnHover`	`boolean`	`true`	Pause animation on hover
`gap`	`number`	`40`	Pixels of whitespace between the end of content and the next loop’s start