Timer experimental

Ark UI Timer 기반 wrapper입니다. 카운트다운/카운트업으로 경과 시간을 표시하고 시작·정지·리셋 액션을 제공하는 타이머로, Root/Area/Item/Separator/Control/ActionTrigger anatomy를 제공합니다.

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

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

<Timer.Root startMs={90000} countdown autoStart>
  <Timer.Area>
    <Timer.Item type="minutes" />
    <Timer.Separator>:</Timer.Separator>
    <Timer.Item type="seconds" />
  </Timer.Area>
  <Timer.Control>
    <Timer.ActionTrigger action="start">시작</Timer.ActionTrigger>
    <Timer.ActionTrigger action="pause">일시 정지</Timer.ActionTrigger>
    <!-- zag 머신은 paused 상태에서 start를 무시한다 — 재개는 별도 resume 액션 -->
    <Timer.ActionTrigger action="resume">재개</Timer.ActionTrigger>
    <Timer.ActionTrigger action="reset">초기화</Timer.ActionTrigger>
  </Timer.Control>
</Timer.Root>

Import

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

import * as Timer from '@odbd/svelte/timer'

import { Timer } from '@odbd/react/timer'