Marquee experimental
Ark UI Marquee 기반 wrapper입니다. 흐르는 콘텐츠 영역과 가장자리 페이드 표시를 구성하며 Root, Viewport, Content, Item, Edge anatomy를 제공합니다.
Preview
<script lang="ts">
import * as Marquee from '@odbd/svelte/marquee'
const updates = [
{
title: '토큰',
body: 'semantic 토큰 변경은 migration note와 함께 기록해요.',
},
{
title: 'Wrapper',
body: 'React와 Svelte anatomy parity를 먼저 확인해요.',
},
{
title: '접근성',
body: 'focus ring은 app theme에서도 유지해요.',
},
]
const translations = {
root: '디자인 시스템 작업 흐름 알림',
}
</script>
<Marquee.Root
class="marquee-demo"
speed={36}
spacing="0.75rem"
pauseOnInteraction
autoFill
{translations}
>
<Marquee.Edge side="start" />
<Marquee.Viewport>
<Marquee.Content>
{#each updates as update}
<Marquee.Item>
<span class="marquee-demo-title">{update.title}</span>
<span>{update.body}</span>
</Marquee.Item>
{/each}
</Marquee.Content>
</Marquee.Viewport>
<Marquee.Edge side="end" />
</Marquee.Root>
<style>
:global(.marquee-demo.odbd-marquee) {
max-width: 30rem;
}
.marquee-demo-title {
color: var(--odbd-color-accent);
font-weight: 700;
}
</style>
Import
Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.
import * as Marquee from '@odbd/svelte/marquee' import { Marquee } from '@odbd/react/marquee'