Timer

A component for displaying a countdown or stopwatch timer.

<script setup lang="ts">
import { Timer } from '@destyler-ui/vue'
</script>

<template>
  <Timer.Root :countdown="true" :auto-start="true" :start-ms="60000">
    <Timer.Area>
      <Timer.Item type="days" />
      <Timer.Separator>:</Timer.Separator>
      <Timer.Item type="hours" />
      <Timer.Separator>:</Timer.Separator>
      <Timer.Item type="minutes" />
      <Timer.Separator>:</Timer.Separator>
      <Timer.Item type="seconds" />
    </Timer.Area>
    <Timer.Control>
      <Timer.ActionTrigger action="start">START</Timer.ActionTrigger>
      <Timer.ActionTrigger action="pause">PAUSE</Timer.ActionTrigger>
      <Timer.ActionTrigger action="resume">RESUME</Timer.ActionTrigger>
      <Timer.ActionTrigger action="reset">RESET</Timer.ActionTrigger>
    </Timer.Control>
  </Timer.Root>
</template>

import { Timer } from '@destyler-ui/react'

export function Basic() {
  return (
    <Timer.Root countdown autoStart startMs={60000}>
      <Timer.Area>
        <Timer.Item type="days" />
        <Timer.Separator>:</Timer.Separator>
        <Timer.Item type="hours" />
        <Timer.Separator>:</Timer.Separator>
        <Timer.Item type="minutes" />
        <Timer.Separator>:</Timer.Separator>
        <Timer.Item type="seconds" />
      </Timer.Area>
      <Timer.Control>
        <Timer.ActionTrigger action="start">START</Timer.ActionTrigger>
        <Timer.ActionTrigger action="pause">PAUSE</Timer.ActionTrigger>
        <Timer.ActionTrigger action="resume">RESUME</Timer.ActionTrigger>
        <Timer.ActionTrigger action="reset">RESET</Timer.ActionTrigger>
      </Timer.Control>
    </Timer.Root>
  )
}

import { Timer } from '@destyler-ui/solid/timer'

export function Basic() {
  return (
    <Timer.Root targetMs={60 * 60 * 1000}>
      <Timer.Area>
        <Timer.Item type="days" />
        <Timer.Separator>:</Timer.Separator>
        <Timer.Item type="hours" />
        <Timer.Separator>:</Timer.Separator>
        <Timer.Item type="minutes" />
        <Timer.Separator>:</Timer.Separator>
        <Timer.Item type="seconds" />
      </Timer.Area>
      <Timer.Control>
        <Timer.ActionTrigger action="start">Play</Timer.ActionTrigger>
        <Timer.ActionTrigger action="resume">Resume</Timer.ActionTrigger>
        <Timer.ActionTrigger action="pause">Pause</Timer.ActionTrigger>
      </Timer.Control>
    </Timer.Root>
  )
}

<script lang="ts">
  import { Timer } from '@destyler-ui/svelte'
</script>

<Timer.Root countdown autoStart startMs={60000}>
  <Timer.Area>
    <Timer.Item type="days" />
    <Timer.Separator>:</Timer.Separator>
    <Timer.Item type="hours" />
    <Timer.Separator>:</Timer.Separator>
    <Timer.Item type="minutes" />
    <Timer.Separator>:</Timer.Separator>
    <Timer.Item type="seconds" />
  </Timer.Area>
  <Timer.Control>
    <Timer.ActionTrigger action="start">START</Timer.ActionTrigger>
    <Timer.ActionTrigger action="pause">PAUSE</Timer.ActionTrigger>
    <Timer.ActionTrigger action="resume">RESUME</Timer.ActionTrigger>
    <Timer.ActionTrigger action="reset">RESET</Timer.ActionTrigger>
  </Timer.Control>
</Timer.Root>

Anatomy

<script setup lang="ts">
import { Timer } from '@destyler-ui/vue'
</script>

<template>
  <Timer.Root>
    <Timer.Area>
      <Timer.Item />
      <Timer.Separator />
    </Timer.Area>
    <Timer.Control>
      <Timer.ActionTrigger />
    </Timer.Control>
  </Timer.Root>
</template>

import { Timer } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Timer.Root>
      <Timer.Area>
        <Timer.Item />
        <Timer.Separator />
      </Timer.Area>
      <Timer.Control>
        <Timer.ActionTrigger />
      </Timer.Control>
    </Timer.Root>
  )
}

import { Timer } from '@destyler-ui/solid'

export default function Basic() {
  return (
    <Timer.Root>
      <Timer.Area>
        <Timer.Item type="seconds" />
        <Timer.Separator />
      </Timer.Area>
      <Timer.Control>
        <Timer.ActionTrigger action="start">Start</Timer.ActionTrigger>
      </Timer.Control>
    </Timer.Root>
  )
}

<script lang="ts">
  import { Timer } from '@destyler-ui/svelte'
</script>

<Timer.Root countdown autoStart startMs={60000}>
  <Timer.Area>
    <Timer.Item type="days" />
    <Timer.Separator>:</Timer.Separator>
    <Timer.Item type="hours" />
    <Timer.Separator>:</Timer.Separator>
    <Timer.Item type="minutes" />
    <Timer.Separator>:</Timer.Separator>
    <Timer.Item type="seconds" />
  </Timer.Area>
  <Timer.Control>
    <Timer.ActionTrigger action="start">START</Timer.ActionTrigger>
    <Timer.ActionTrigger action="pause">PAUSE</Timer.ActionTrigger>
    <Timer.ActionTrigger action="resume">RESUME</Timer.ActionTrigger>
    <Timer.ActionTrigger action="reset">RESET</Timer.ActionTrigger>
  </Timer.Control>
</Timer.Root>

Examples

Basic

<script setup lang="ts">
import { Timer } from '@destyler-ui/vue'
</script>

<template>
  <Timer.Root :countdown="true" :auto-start="true" :start-ms="60000">
    <Timer.Area>
      <Timer.Item type="days" />
      <Timer.Separator>:</Timer.Separator>
      <Timer.Item type="hours" />
      <Timer.Separator>:</Timer.Separator>
      <Timer.Item type="minutes" />
      <Timer.Separator>:</Timer.Separator>
      <Timer.Item type="seconds" />
    </Timer.Area>
    <Timer.Control>
      <Timer.ActionTrigger action="start">START</Timer.ActionTrigger>
      <Timer.ActionTrigger action="pause">PAUSE</Timer.ActionTrigger>
      <Timer.ActionTrigger action="resume">RESUME</Timer.ActionTrigger>
      <Timer.ActionTrigger action="reset">RESET</Timer.ActionTrigger>
    </Timer.Control>
  </Timer.Root>
</template>

import { Timer } from '@destyler-ui/react'

export function Basic() {
  return (
    <Timer.Root countdown autoStart startMs={60000}>
      <Timer.Area>
        <Timer.Item type="days" />
        <Timer.Separator>:</Timer.Separator>
        <Timer.Item type="hours" />
        <Timer.Separator>:</Timer.Separator>
        <Timer.Item type="minutes" />
        <Timer.Separator>:</Timer.Separator>
        <Timer.Item type="seconds" />
      </Timer.Area>
      <Timer.Control>
        <Timer.ActionTrigger action="start">START</Timer.ActionTrigger>
        <Timer.ActionTrigger action="pause">PAUSE</Timer.ActionTrigger>
        <Timer.ActionTrigger action="resume">RESUME</Timer.ActionTrigger>
        <Timer.ActionTrigger action="reset">RESET</Timer.ActionTrigger>
      </Timer.Control>
    </Timer.Root>
  )
}

import { Timer } from '@destyler-ui/solid/timer'

export function Basic() {
  return (
    <Timer.Root targetMs={60 * 60 * 1000}>
      <Timer.Area>
        <Timer.Item type="days" />
        <Timer.Separator>:</Timer.Separator>
        <Timer.Item type="hours" />
        <Timer.Separator>:</Timer.Separator>
        <Timer.Item type="minutes" />
        <Timer.Separator>:</Timer.Separator>
        <Timer.Item type="seconds" />
      </Timer.Area>
      <Timer.Control>
        <Timer.ActionTrigger action="start">Play</Timer.ActionTrigger>
        <Timer.ActionTrigger action="resume">Resume</Timer.ActionTrigger>
        <Timer.ActionTrigger action="pause">Pause</Timer.ActionTrigger>
      </Timer.Control>
    </Timer.Root>
  )
}

<script lang="ts">
  import { Timer } from '@destyler-ui/svelte'
</script>

<Timer.Root countdown autoStart startMs={60000}>
  <Timer.Area>
    <Timer.Item type="days" />
    <Timer.Separator>:</Timer.Separator>
    <Timer.Item type="hours" />
    <Timer.Separator>:</Timer.Separator>
    <Timer.Item type="minutes" />
    <Timer.Separator>:</Timer.Separator>
    <Timer.Item type="seconds" />
  </Timer.Area>
  <Timer.Control>
    <Timer.ActionTrigger action="start">START</Timer.ActionTrigger>
    <Timer.ActionTrigger action="pause">PAUSE</Timer.ActionTrigger>
    <Timer.ActionTrigger action="resume">RESUME</Timer.ActionTrigger>
    <Timer.ActionTrigger action="reset">RESET</Timer.ActionTrigger>
  </Timer.Control>
</Timer.Root>

API Reference

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`autoStart`	—	`false \| true` Whether the timer should start automatically
`countdown`	—	`false \| true` Whether the timer should countdown, decrementing the timer on each tick.
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ root: string; area: string; }>` The ids of the timer parts
`interval`	`250`	`number` The interval in milliseconds to update the timer count.
`startMs`	—	`number` The total duration of the timer in milliseconds.
`targetMs`	—	`number` The minimum count of the timer in milliseconds.

Emit	Event
`complete`	`[]` Function invoked when the timer is completed
`tick`	`[details: TickDetails]` Function invoked when the timer ticks

ActionTrigger

Prop	Default	Type
`action*`	—	`TimerAction`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Area

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

No serializable props or emits are declared for this part.

Control

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
`type*`	—	`keyof Time<number>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`MachineApi<PropTypes>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Separator

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`autoStart`	—	`false \| true` Whether the timer should start automatically
`countdown`	—	`false \| true` Whether the timer should countdown, decrementing the timer on each tick.
`ids`	—	`Partial<{ root: string; area: string; }>` The ids of the timer parts
`interval`	`250`	`number` The interval in milliseconds to update the timer count.
`onComplete`	—	`() => void` Function invoked when the timer is completed
`onTick`	—	`(details: timer.TickDetails) => void` Function invoked when the timer ticks
`startMs`	—	`number` The total duration of the timer in milliseconds.
`targetMs`	—	`number` The minimum count of the timer in milliseconds.

ActionTrigger

Prop	Default	Type
`action*`	—	`TimerAction`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Area

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseTimerContext) => ReactNode`

Control

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
`type*`	—	`keyof Time<number>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseTimerReturn`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Separator

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js295.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`autoStart`	—	`false \| true` Whether the timer should start automatically
`countdown`	—	`false \| true` Whether the timer should countdown, decrementing the timer on each tick.
`ids`	—	`Partial<{ root: string; area: string; }>` The ids of the timer parts
`interval`	`250`	`number` The interval in milliseconds to update the timer count.
`onComplete`	—	`() => void` Function invoked when the timer is completed
`onTick`	—	`(details: TickDetails) => void` Function invoked when the timer ticks
`startMs`	—	`number` The total duration of the timer in milliseconds.
`targetMs`	—	`number` The minimum count of the timer in milliseconds.

ActionTrigger

Prop	Default	Type
`action*`	—	`TimerAction`
`asChild`	—	`(props: (userProps?: solid_js295.JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Area

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js295.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseTimerContext) => Element`

Control

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js295.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
`type*`	—	`keyof Time<number>`
`asChild`	—	`(props: (userProps?: solid_js295.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseTimerReturn`
`asChild`	—	`(props: (userProps?: solid_js295.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Separator

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js295.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`autoStart`	—	`false \| true` Whether the timer should start automatically
`children`	—	`Snippet<[]> \| undefined`
`countdown`	—	`false \| true` Whether the timer should countdown, decrementing the timer on each tick.
`id`	—	`string`
`ids`	—	`Partial<{ root: string; area: string; }>` The ids of the timer parts
`interval`	`250`	`number` The interval in milliseconds to update the timer count.
`onComplete`	—	`() => void` Function invoked when the timer is completed
`onTick`	—	`(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").TimerTickDetails) => void` Function invoked when the timer ticks
`startMs`	—	`number` The total duration of the timer in milliseconds.
`targetMs`	—	`number` The minimum count of the timer in milliseconds.

ActionTrigger

Prop	Default	Type
`action*`	—	`TimerAction`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`

Area

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Context

Prop	Default	Type
`api`	—	`Snippet<[UseTimerContext]>`

Control

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Item

Prop	Default	Type
`type*`	—	`keyof Time<number>`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

RootProvider

Prop	Default	Type
`value*`	—	`UseTimerReturn`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Separator

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`