Steps experimental

Ark UI Steps 기반 wrapper입니다. 다단계 흐름의 진행 상태를 표시하는 root, list, item, trigger, indicator, separator, content, completed-content, next-trigger, prev-trigger, progress anatomy를 제공합니다.

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

디자인 토큰을 정의해요.

<script lang="ts">
  import * as Steps from '@odbd/svelte/steps'

  const items = [
    { title: '토큰', description: '디자인 토큰을 정의해요.' },
    { title: 'recipe', description: 'recipe CSS를 작성해요.' },
    { title: 'wrapper', description: 'wrapper를 연결해요.' },
  ]
</script>

<Steps.Root count={items.length} defaultStep={0}>
  <Steps.List>
    {#each items as item, index}
      <Steps.Item {index}>
        <Steps.Trigger>
          <Steps.Indicator>{index + 1}</Steps.Indicator>
          {item.title}
        </Steps.Trigger>
        <Steps.Separator />
      </Steps.Item>
    {/each}
  </Steps.List>

  {#each items as item, index}
    <Steps.Content {index}>{item.description}</Steps.Content>
  {/each}
  <Steps.CompletedContent>모든 단계를 마쳤어요.</Steps.CompletedContent>

  <div style="display: flex; gap: 0.5rem; align-items: center;">
    <Steps.PrevTrigger>이전</Steps.PrevTrigger>
    <Steps.NextTrigger>다음</Steps.NextTrigger>
    <Steps.Progress />
  </div>
</Steps.Root>

Import

Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.

import * as Steps from '@odbd/svelte/steps'

import { Steps } from '@odbd/react/steps'