feat(ui): Ticker 支持 gap 参数,条目不再被 space-evenly 拉开

- 新增 gap(px),走 --ticker-gap;不传时仍是 --su-space-8
- 一份内容改成 flex-start + 尾部同间距 padding,循环处不会突然变宽
- 位移仍按实测的一份宽度,接缝不变
This commit is contained in:
2026-11-01 20:44:29 +08:00
parent d5b7132605
commit 851b36abf1
2 changed files with 18 additions and 6 deletions
+6 -4
View File
@@ -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;回退值只兜第一帧 */
+12 -2
View File
@@ -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<HTMLDivElement>(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)}
>
<div
ref={trackRef}