diff --git a/src/components/Ticker.module.css b/src/components/Ticker.module.css index dd01123..61b3a9e 100644 --- a/src/components/Ticker.module.css +++ b/src/components/Ticker.module.css @@ -24,13 +24,15 @@ animation-play-state: paused; } -/* 一份内容最少占满整条轨道,内容短的时候也不会挤成一小撮 */ +/* 一份内容:按 --ticker-gap 排布,尾部同样留一个间距, + 这样「最后一条 → 下一份第一条」的距离和条目之间一致,循环处不会突然变宽 */ .group { display: inline-flex; + flex: none; align-items: center; - justify-content: space-evenly; - gap: var(--su-space-8); - min-width: 100%; + justify-content: flex-start; + gap: var(--ticker-gap, var(--su-space-8)); + padding-right: var(--ticker-gap, var(--su-space-8)); } /* 位移量由组件量出「一份」的宽度写进 --ticker-shift;回退值只兜第一帧 */ diff --git a/src/components/Ticker.tsx b/src/components/Ticker.tsx index 65e1705..9b81aa8 100644 --- a/src/components/Ticker.tsx +++ b/src/components/Ticker.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, type ReactNode } from 'react' +import { useEffect, useRef, type CSSProperties, type ReactNode } from 'react' import styles from './Ticker.module.css' /** @@ -11,6 +11,8 @@ export type TickerProps = { children: ReactNode /** 滚完一份内容所需的秒数,默认 24(越大越慢) */ speed?: number + /** 内容条目之间的间距(px),默认用 --su-space-8 */ + gap?: number /** 暂停滚动(保留进度) */ paused?: boolean /** 读屏用的整体描述,如「运行状态」 */ @@ -19,7 +21,14 @@ export type TickerProps = { className?: string } -export function Ticker({ children, speed = 24, paused = false, label, className }: TickerProps) { +export function Ticker({ + children, + speed = 24, + gap, + paused = false, + label, + className, +}: TickerProps) { const trackRef = useRef(null) useEffect(() => { @@ -51,6 +60,7 @@ export function Ticker({ children, speed = 24, paused = false, label, className className={[styles.root, className].filter(Boolean).join(' ')} role="marquee" aria-label={label} + style={gap === undefined ? undefined : ({ '--ticker-gap': `${gap}px` } as CSSProperties)} >