Progress experimental
Ark UI Progress 기반 wrapper입니다. 선형과 원형 진행 상태를 위한 root, label, track, range, value-text, view, circle anatomy를 제공합니다.
Preview
토큰 빌드 72%
패키지 산출물을 생성하고 있어요. 패키지 산출물 생성을 완료했어요.
문서 동기화 42%
<script lang="ts">
import * as Progress from '@odbd/svelte/progress'
</script>
<div style="display: grid; gap: var(--odbd-space-5); max-width: 30rem;">
<Progress.Root value={72}>
<div
style="display: flex; align-items: center; justify-content: space-between; gap: var(--odbd-space-3);"
>
<Progress.Label>토큰 빌드</Progress.Label>
<Progress.ValueText />
</div>
<Progress.Track>
<Progress.Range />
</Progress.Track>
<Progress.View state="loading">패키지 산출물을 생성하고 있어요.</Progress.View>
<Progress.View state="complete">패키지 산출물 생성을 완료했어요.</Progress.View>
</Progress.Root>
<Progress.Root value={42} style="align-items: center;">
<Progress.Circle>
<Progress.CircleTrack />
<Progress.CircleRange />
</Progress.Circle>
<Progress.Label>문서 동기화</Progress.Label>
<Progress.ValueText />
</Progress.Root>
</div>
Import
Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.
import * as Progress from '@odbd/svelte/progress' import { Progress } from '@odbd/react/progress'