Marquee

用于可暂停的辅助信息条，循环展示简短标签或标志。

预览

支持技术列表

使用本地化的运动控制按钮，循环展示技术名称。

无障碍Base UIReact 19Tailwind 4

正在加载预览。

安装

npx shadcn@latest add @neumorphism-ui/marquee

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

Registry JSON

用法

传入项目、区域名称及暂停和继续控件名称。重要信息也应能在其他位置读取，并尊重内置的减少动态效果行为。

"use client";

import { Marquee } from "@/components/ui/marquee";

export default function Example() {
  return <Marquee items={["React", "Base UI", "Tailwind CSS"]} label="Supported technologies" />;
}

API 参考

为连续移动复制一份视觉项目，但第二份通过 aria-hidden 从辅助技术中移除。用户可以暂停或继续，prefers-reduced-motion 会自动停止动画。

组件	属性	类型	默认值	说明
`Marquee`	`items`必填	`readonly ReactNode[]`	`—`	循环显示的项目列表。
`Marquee`	`duration`	`number`	`24`	设置单次动画周期的秒数。
`Marquee`	`defaultPaused`	`boolean`	`false`	初始以暂停状态启动。
`Marquee`	`label`	`string`	`"Scrolling content"`	为循环信息区域提供无障碍名称。
`Marquee`	`pauseLabel / resumeLabel`	`string`	`—`	本地化运动控制按钮的无障碍名称。