OverflowMarquee

콘텐츠가 컨테이너를 넘칠 때 자동으로 스크롤시키는 마르키 컴포넌트

OverflowMarquee#

CoOverflowMarquee는 자식 콘텐츠가 컨테이너를 넘칠 때 좌우(또는 상하)로 자동 스크롤시키는 마르키 레이아웃입니다. 곡 제목, 뉴스 티커, 긴 상태 라벨 등에 사용합니다.

Live Preview#

Web

A long running headline that overflows the box and scrolls.

Flutter

Loading Flutter...

class OverflowMarqueeDefaultExample extends StatelessComponent {
  const OverflowMarqueeDefaultExample({super.key});

  @override
  Component build(BuildContext context) {
    final cs = context.theme.colorScheme;
    final ts = context.theme.typography;
    return div(
      styles: Styles(raw: {'width': '${CoreSpace.space240}px'}),
      [
        CoOverflowMarquee(
          pauseOnHover: true,
          child: div(
            classes: 'text-${ts.bodyMedium} text-${cs.onSurface}',
            [
              Component.text(
                'A long running headline that overflows the box and scrolls.',
              ),
            ],
          ),
        ),
      ],
    );
  }
}

class OverflowMarqueeDefaultExample extends StatelessWidget {
  const OverflowMarqueeDefaultExample({super.key});

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final cs = theme.colorScheme;
    final ts = theme.typography;
    return SizedBox(
      width: CoreSpace.space240,
      child: CoOverflowMarquee(
        pauseOnHover: true,
        child: DefaultTextStyle.merge(
          style: ts.bodyMedium.copyWith(color: cs.onSurface),
          child: const Text(
            'A long running headline that overflows the box and scrolls.',
          ),
        ),
      ),
    );
  }
}

사용 시기#

제한된 공간에 긴 텍스트를 끊기지 않게 보여주고 싶을 때
뉴스 헤드라인이나 상태 메시지를 한 줄에 흘리는 UI
탭/카드 라벨의 truncation 대신 전체 텍스트를 회전시키고 싶을 때

기본 사용법#

SizedBox(
  width: CoreSpace.space240,
  child: CoOverflowMarquee(
    pauseOnHover: true,
    child: Text('A long running headline that overflows the box.'),
  ),
)

div(
  styles: Styles(raw: {'width': '\${CoreSpace.space240}px'}),
  [
    CoOverflowMarquee(
      pauseOnHover: true,
      child: div([Component.text('A long running headline that overflows the box.')]),
    ),
  ],
)

Props#

속성	타입	기본값	설명
`child`	`Widget` / `Component`	—	스크롤 대상 콘텐츠 (required)
`direction`	`CoreAxis`	`horizontal`	스크롤 축
`duration`	`Duration?`	`3000ms`	한 번 순회 시간
`delayDuration`	`Duration?`	`500ms`	순회 사이 일시정지
`step`	`double?`	`100`	속도 스케일 계수
`fadePortion`	`double?`	`24`	양끝 fade 폭 (px)
`curve`	`CoreMarqueeCurve?`	`linear`	이징 (`linear`/`easeIn`/`easeOut`/`easeInOut`)
`pauseOnHover`	`bool`	`false`	마우스 hover 시 일시정지

동작 차이#

Flutter: 자식이 실제로 넘칠 때만 스크롤. 끝에서 되돌아오는 왕복 애니메이션.
Web: 자식을 복제해 무한 루프로 스크롤 (@keyframes translateX). 넘치지 않더라도 루프가 계속됨.

어느 플랫폼이든 pauseOnHover/fadePortion/direction/duration/delayDuration API는 동일하게 적용됩니다.