daisyUI Kit 🌼

Countdown

Countdown is a wrapping container for Counter components which give transition effects between numbers. When combined with the headless component, CountdownTimers, you can easily create lovely countdown timers.

Code Example 
<CountdownTimers :duration-in-seconds="95">
  <template v-slot="{ totalSeconds }">
    <Countdown>
      <Counter :value="totalSeconds" />
    </Countdown>
  </template>
</CountdownTimers>

Components

The Countdown components include the following:

Countdown

The Countdown component can wrap one or more Counter components. It has one prop for customizing its tag:

PropTypeDescription
is
string
allows specifying the HTML tag to be used

Counter

The Counter component does the actual counting. It has a prop to provide the initial time value.

PropTypeDescription
is
string
allows specifying the HTML tag to be used
value
number
the time from which to count downwards

CountdownTimers

CountdownTimers is a headless component. It accepts either a duration-in-seconds or until-date prop, and provides a number of values in its default slot scope:

PropTypeDescription
duration-in-seconds
number
the number of seconds in the future for the target time
until-date
Date
a Date object representing the future target time

CountdownTimers Scope

The following properties are made available in the CountdownTimers default slot scope:

  • targetDate returns target date. This may be of value when using duration.
  • totalSeconds returns the total number of whole seconds until the target date.
  • totalMinutes returns the total number of whole minutes until the target date.
  • totalHours returns the total number of whole hours until the target date.
  • totalDays returns the total number of whole days until the target date.
  • totalWeeks returns the total number of whole weeks until the target date.
  • totalMonths returns the total number of whole months until the target date.
  • split returns an object containing days, hours, minutes, and seconds until the target time.

CountdownTimers Events

The CountdownTimer component emits the following event:

  • done When the counter reaches 0, the done event will be emitted with no arguments.

Split Timers

The split object from the CountdownTimers Scope is useful for showing compound countdowns:

: :
Code Example 
<CountdownTimers :duration-in-seconds="3901">
  <template v-slot="{ split }">
    <Countdown>
      <Counter :value="split.hours" /> :
      <Counter :value="split.minutes" /> :
      <Counter :value="split.seconds" />
    </Countdown>
  </template>
</CountdownTimers>

Large Text

Countdown uses Vue's dynamic Component element, making it easy to customize its display. Here's an example that uses the Text component.

Code Example 
<CountdownTimers :duration-in-seconds="99">
  <template v-slot="{ totalSeconds }">
    <Countdown :is="Text" size="6xl" mono>
      <Counter :value="totalSeconds" />
    </Countdown>
  </template>
</CountdownTimers>