Marquee 跑马灯
水平跑马灯组件，能够将文本、图片或任意卡片内容在水平轨道上进行无限无缝循环滚动。适合在营销页、Hero 引导区展示推荐标语或合作品牌。支持双向滚动、悬停暂停和边缘淡化效果，并通过 CSS 媒体查询自动适配系统动效偏好设置。
预览
Preview
⚡️ 快速流畅💥 新野蛮主义🚀 VUE 3 + TAILWIND🔥 受 SHADCN 启发
💻 代码与 BUG🛠️ 从构建到发布🌟 开源
变体
默认变体DEFAULT
静音变体MUTED
尺寸
小尺寸SMALL
大尺寸LARGE
提示：本组件尊重系统的「减少动态效果」设置。启用后跑马灯将停止滚动并以静态形式展示内容。
安装
pnpm dlx brutx-vue@latest add marquee用法
vue
<script setup>
import { Marquee } from 'brutx-ui-vue'
</script>
<template>
<Marquee :speed="20" fade>
<span>⚡️ FAST AND FLUID</span>
<span>💥 NEO-BRUTALISM</span>
<span>🚀 VUE 3 + TAILWIND</span>
</Marquee>
</template>变体
通过 variant 属性控制跑马灯的背景色与文字色。
| 变体 | 说明 |
|---|---|
default | 背景色背景，深色文字 |
primary | 主色（珊瑚红）背景 |
accent | 强调色（黄色）背景 |
muted | 静音色（灰）背景 |
vue
<Marquee variant="primary">
<span>主色跑马灯</span>
</Marquee>尺寸
通过 size 属性控制文字大小与内边距。
| 尺寸 | 说明 |
|---|---|
sm | 小号文字，紧凑内边距 |
default | 默认大小 |
lg | 大号文字，宽松内边距 |
vue
<Marquee size="lg">
<span>大号跑马灯</span>
</Marquee>API 参考
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
direction | "right" | "left" | undefined | "left" | 设置循环滚动方向，left 向左、right 向右。 |
详情声明类型"right" | "left" | undefined 字面量
默认值详情
来源packages/ui/src/components/marquee/Marquee.vue | |||
speed | number | undefined | 20 | 设置一次循环动画的持续秒数，数值越小滚动越快；有效时长不会低于 0.1 秒。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/marquee/Marquee.vue | |||
pauseOnHover | boolean | undefined | false | 启用后，指针悬停在跑马灯上时暂停循环动画。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/marquee/Marquee.vue | |||
fade | boolean | undefined | false | 启用容器左右边缘的淡出遮罩效果。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/marquee/Marquee.vue | |||
variant | "accent" | "default" | "muted" | "primary" | undefined | "default" | 设置跑马灯容器的背景色与文字颜色变体。 |
详情声明类型NonNullable<"default" | "primary" | "accent" | "muted" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/marquee/Marquee.vue | |||
size | "default" | "lg" | "sm" | undefined | "default" | 设置内容文字大小与容器内边距级别。 |
详情声明类型NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/marquee/Marquee.vue | |||
class | string | undefined | undefined | 追加到跑马灯外层容器的 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/marquee/Marquee.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 提供随跑马灯轨道循环滚动的内容。 |
详情声明类型{}来源packages/ui/src/components/marquee/Marquee.vue | ||
可访问性
- 动效降级：组件尊重
prefers-reduced-motion系统设置。启用“减少动态效果”时，CSS 会停止轨道动画并隐藏重复轨道；重复轨道仍保留在 DOM 中，以保证 SSR 与客户端水合的结构一致。重复轨道带有aria-hidden和inert，不会重复暴露内容或交互元素。系统偏好切换时由 CSS 即时响应。
样式定制
| 变量 | 默认值 | 说明 |
|---|---|---|
--speed | 20s | 单次循环动画时长，由 speed 属性自动设置 |