Phoenix implementation of Zag.js Timer.

Examples

Basic

<.timer id="t" start_ms={60_000} class="timer">
  <:start_trigger><.icon name="hero-play" class="icon" /></:start_trigger>
  <:pause_trigger><.icon name="hero-pause" class="icon" /></:pause_trigger>
  <:resume_trigger><.icon name="hero-play" class="icon" /></:resume_trigger>
  <:reset_trigger><.icon name="hero-arrow-path" class="icon" /></:reset_trigger>
</.timer>

Countdown

<.timer id="t" countdown start_ms={90_000} target_ms={0} auto_start class="timer">
  <:start_trigger><.icon name="hero-play" class="icon" /></:start_trigger>
  <:pause_trigger><.icon name="hero-pause" class="icon" /></:pause_trigger>
  <:resume_trigger><.icon name="hero-play" class="icon" /></:resume_trigger>
  <:reset_trigger><.icon name="hero-arrow-path" class="icon" /></:reset_trigger>
</.timer>

Required slots: :start_trigger, :pause_trigger, :resume_trigger, :reset_trigger.

Styling

Use data attributes to target elements:

[data-scope="timer"][data-part="root"] {}
[data-scope="timer"][data-part="area"] {}
[data-scope="timer"][data-part="item"] {}
[data-scope="timer"][data-part="separator"] {}
[data-scope="timer"][data-part="control"] {}
[data-scope="timer"][data-part="action-trigger"] {}

If you wish to use the default Corex styling, you can use the class timer on the component. This requires to install Mix.Tasks.Corex.Design first and import the component css file.

@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/timer.css";

You can then use modifiers

<.timer class="timer timer--accent timer--lg">
</.timer>

Learn more about modifiers and Corex Design