Timer experimental
Ark UI Timer 기반 wrapper입니다. 카운트다운/카운트업으로 경과 시간을 표시하고 시작·정지·리셋 액션을 제공하는 타이머로, Root/Area/Item/Separator/Control/ActionTrigger anatomy를 제공합니다.
Preview
01
30
<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'