Progress experimental

Ark UI Progress 기반 wrapper입니다. 선형과 원형 진행 상태를 위한 root, label, track, range, value-text, view, circle anatomy를 제공합니다.

@ark-ui/svelte/progress Ark UI docs ↗

토큰 빌드 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'