Marquee
连续重复水平或垂直内容带，并可在悬停时暂停。
适用场景
- 当界面需要以下行为时使用 Marquee：连续重复水平或垂直内容带，并可在悬停时暂停。
安装
选择安装方式，用法示例将同步更新导入路径。
$ bunx --bun shadcn-vue@2.8.2 add https://orvui.efu.me/r/marquee.json
首次使用时，将安装的 src/components/orvui/styles.css 导入项目样式入口。
示例
预览
Vercel
Linear
Stripe
Figma
GitHub
Notion
Loom
Raycast
packages/vue/src/motion/marquee/demo.vue
<script setup lang="ts">
import { Marquee } from "@/components/orvui/motion/marquee";
const names = "Vercel,Linear,Stripe,Figma,GitHub,Notion,Loom,Raycast".split(",");
</script>
<template>
<div class="w-full"><Marquee :speed="25">
<div v-for="name in names" :key="name" class="mx-4 flex h-12 items-center justify-center rounded-lg border border-border bg-card px-6 text-sm font-medium text-foreground">{{ name }}</div>
</Marquee></div>
</template>
packages/vue/src/motion/marquee/src/Marquee.vue
状态与事件
此示例组合没有声明成对的受控属性与 update 事件。使用已列出的属性、原生事件和插槽组合内容；不要为它添加未公开的 v-model。
API 参考
direction?"left" | "right" | "up" | "down""left"speed?number30pauseOnHover?booleantruegap?string"1rem"fade?booleantrue无障碍
为交互控件提供明确的无障碍名称。保留文档中的键盘路径、可见焦点与减少动态效果状态；自定义插槽应继续保留所替代部件的语义。
常见问题
- 如何配置 Marquee？
- 通过 direction、speed、pauseOnHover、gap、fade 配置 Marquee；API 表列出其类型与默认值。
- 如何连接到应用状态？
- 通过文档中的组合方式提供内容，应用副作用由调用方管理。
- 可以在服务端渲染吗？
- 可以在 Vue SSR 应用中正常渲染。服务端与客户端的初始 props 应保持一致；浏览器测量与交互资源在挂载后启动。
更新于
来源与许可 ↗MIT · 0.1.1