Corex.Timer (Corex v0.1.0-beta.3)

View Source

Phoenix implementation of Zag.js Timer.

Countdown-only leading-zero collapse (hide unused day/hour columns) is on by default when countdown is true. Override with collapse_leading_zeros={false} or with fixed segments.

Examples

Basic

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

Countdown

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

Fixed segments (always four columns)

<.timer id="t" countdown start_ms={@ms} segments={[:days, :hours, :minutes, :seconds]} class="timer" />

Separator slot

Omit :separator to render nothing between digit columns. Pass it to supply markup (for example : or ·) between segments.

<.timer id="t" start_ms={60_000} class="timer">
  <:separator>·</:separator>
</.timer>

Region label (a11y)

<.timer id="t" translation={%Corex.Timer.Translation{area_label: "Countdown"}} class="timer" />

Unit labels (optional)

Per-column caption under each digit cell (stacked column). Omit a slot to hide that unit’s label.

<.timer id="t" countdown start_ms={@ms} target_ms={0} class="timer">
  <:day_label>Days</:day_label>
  <:hour_label>Hours</:hour_label>
  <:minute_label>Minutes</:minute_label>
  <:second_label>Seconds</:second_label>
</.timer>

Action slots (:start_trigger, :pause_trigger, :resume_trigger, :reset_trigger) are optional.

Styling

[data-scope="timer"][data-part="root"] {}
[data-scope="timer"][data-part="area"] {}
[data-scope="timer"][data-part="item-label"] {}
[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"] {}
@import "../corex/components/timer.css";
<.timer class="timer timer--accent timer--lg">
</.timer>

Summary

Components

timer(assigns)
timer_skeleton(assigns)

Components

timer(assigns)

Attributes

  • id (:string)
  • countdown (:boolean) - Defaults to false.
  • start_ms (:integer) - Defaults to 0.
  • target_ms (:integer) - Defaults to nil.
  • auto_start (:boolean) - Defaults to true.
  • interval (:integer) - Defaults to 1000.
  • on_tick (:string) - Defaults to nil.
  • on_tick_client (:string) - Defaults to nil.
  • on_complete (:string) - Defaults to nil.
  • on_complete_client (:string) - Defaults to nil.
  • collapse_leading_zeros (:boolean) - When nil and countdown without fixed segments, leading zero units are hidden (minimum minutes and seconds visible). Defaults to nil.
  • segments (:list) - Fixed subset of [:days, :hours, :minutes, :seconds] in natural order; disables collapse when set. Defaults to nil.
  • translation (Corex.Timer.Translation) - Zag timer translations; supports area_label for the timer region aria-label. Defaults to nil.
  • dir (:string) - Text direction for styling; nil follows the document. Defaults to nil. Must be one of nil, "ltr", or "rtl".
  • orientation (:string) - Layout orientation for CSS. Defaults to "horizontal". Must be one of "horizontal", or "vertical".
  • Global attributes are accepted.

Slots

  • separator
  • day_label
  • hour_label
  • minute_label
  • second_label
  • start_trigger - Accepts attributes:
    • class (:string)
  • pause_trigger - Accepts attributes:
    • class (:string)
  • resume_trigger - Accepts attributes:
    • class (:string)
  • reset_trigger - Accepts attributes:
    • class (:string)

timer_skeleton(assigns)

Attributes

  • id (:string)
  • Global attributes are accepted.