数据与反馈@neumorphism-ui/marquee

Marquee

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

@neumorphism-ui/marquee

Registry JSON

预览

无障碍Base UIReact 19Tailwind 4

安装

npx shadcn@latest add @neumorphism-ui/marquee

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置。

用法

Import

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

Example

export default function Example() {
  return <Marquee items={["无障碍", "Base UI", "React 19", "Tailwind 4"]} label="支持的技术" pauseLabel="暂停动画" resumeLabel="继续动画" />;
}

API 参考

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