Ticker

React 新闻滚动条：一条由短讯组成的横带，在屏幕顶部循环滚动；指针悬停时暂停，开启「减少动态效果」时保持静止。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/ticker

示例

港口公告栏上的通知

Live
Ferry Lumen leaves pier 306:40
Crane B back in service+2
Fog over the outer mole40 m
Night shift signs off18
Berth 9 cleared for the Ostra07:15

ticker-harbour.tsx

import {  Ticker,  TickerItem,  TickerLive,  TickerValue,} from "@/components/zero/ticker";const notices = [  { line: "Ferry Lumen leaves pier 3", value: "06:40" },  { line: "Crane B back in service", value: "+2" },  { line: "Fog over the outer mole", value: "40 m" },  { line: "Night shift signs off", value: "18" },  { line: "Berth 9 cleared for the Ostra", value: "07:15" },];export default function TickerHarbour() {  return (    <Ticker aria-label="Harbour notices" duration={40} className="w-full">      <TickerLive />      {notices.map((notice) => (        <TickerItem key={notice.line}>          {notice.line}          <TickerValue>{notice.value}</TickerValue>        </TickerItem>      ))}    </Ticker>  );}

行为

条目渲染两遍，整行平移自身宽度的一半，因此循环首尾无缝衔接。第二份副本设为 aria-hidden 与 inert：读屏软件对每个条目只朗读一次，按 Tab 也不会重复经过。

指针位于其上或焦点位于其中时停止滚动，以便阅读并访问条目中的链接。开启「减少动态效果」时完全不移动，改为可手动横向滚动。duration 是完整滚动一轮所需的秒数：条目越多，时间应越长，阅读速度才能保持一致。

请用 aria-label 为其命名；它是一个 section 元素，会出现在页面的地标（landmark）中。

属性

Ticker

属性	类型	默认值	说明
duration	number	80	完整滚动一轮所需的秒数。
aria-label	string	—	说明这条滚动条的内容。

TickerItem / TickerValue / TickerLive

属性	类型	默认值	说明
children	ReactNode	TickerLive: "Live"	条目的文字（其中的链接带样式）、条目后的数值，或实时标记上的文字。