feat(ui): Ticker 支持 gap 参数,条目不再被 space-evenly 拉开
- 新增 gap(px),走 --ticker-gap;不传时仍是 --su-space-8 - 一份内容改成 flex-start + 尾部同间距 padding,循环处不会突然变宽 - 位移仍按实测的一份宽度,接缝不变
This commit is contained in:
@@ -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;回退值只兜第一帧 */
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user