Slide: Countdown

The "Countdown" slide displays a countdown until your presentation starts.

It could be handy, for example when you organize a meetup, to display a countdown until the event start.

Table of contents

Layout

slot="title"

slot="hours"

0
1

slot="minutes"

0
0

slot="seconds"

0
5
0%0/0

Installation

This template could be added to your presentation using the following methods.

If you are using our Starter Kit, no need to worry about this, this template is included, therefore you could skip the "Installation" chapter.

From a CDN

It's recommended to use unpkg if you want to use this template from a CDN. To do so, add the following include script in the main HTML file of your project:

<script type="module" src="https://unpkg.com/@deckdeckgo/slide-countdown@latest/dist/deckdeckgo-slide-countdown/deckdeckgo-slide-countdown.esm.js"></script> <script nomodule="" src="https://unpkg.com/@deckdeckgo/slide-countdown@latest/dist/deckdeckgo-slide-countdown/deckdeckgo-slide-countdown.js"></script>

From NPM

To install this template in your project from npm run the following command:

npm install @deckdeckgo/slide-countdown

Framework integration

The Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.

That being said, commonly, you might either import or load it:

Import

import '@deckdeckgo/slide-countdown';

Loader

import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-countdown/dist/loader'; deckDeckGoSlideElement();

Usage

The "Countdown" slide's Web Component could be integrated using the tag <deckgo-slide-countdown/>.

Usage

<deckgo-deck> <deckgo-slide-countdown until="2019-08-05T23:25:59.000+02:00"> <h1 slot="title">My presentation starts at</h1> <p slot="days">Days</p> <p slot="hours">Hours</p> <p slot="minutes">Minutes</p> <p slot="seconds">Seconds</p> </deckgo-slide-countdown> </deckgo-deck>

Slots

The slots title as well as days, hours, minutes and seconds are optional.

Attributes

The time until your presentation should be provided to render the countdown. This value could be either passed through attributes days, hours, minutes and seconds or as a particular date using until.

This components exposes the following attributes:

AttributeTypeDefaultDescription
daysnumber0The amount of days before your presentations (max. 99 will be displayed)
hoursnumber0The amount of hours before your presentations (max. 23)
minutesnumber0The amount of minutes before your presentations (max. 59)
secondsnumber0The amount of seconds before your presentations (max. 59)
untilstringA specific date and time until when your presentation will start
custom-backgroundbooleanfalseIf you would provide a background for the all deck and a specific one for this slide, set this option to true
custom-actionsbooleanfalseIf you would provide actions for the all deck and a specific one for this slide, set this option to true

If you would provide a date using until, note that the format should be provided as a valid and parsable date. See Date.parse() for more information about the format.

Example without any slots

<deckgo-deck> <deckgo-slide-countdown hours="0" minutes="10" seconds="45"> </deckgo-slide-countdown> </deckgo-deck>

Theming

The following theming options will affect this component if set on its host or parent.

CSS4 variableDefaultNote
--background
--color
--slide-padding-top16pxPadding top of the all slide
--slide-padding-end32pxPadding right of the all slide
--slide-padding-bottom16pxPadding bottom of the all slide
--slide-padding-start32pxPadding left of the all slide
--slide-countdown-container-padding-bottom64pxThe bottom padding of the displayed time container
--slide-countdown-digits-max-width36emThe max width of the container containing all digits
--slide-countdown-digits-minmax-width12emThe grid minmax value of one of the three columns of digits
--slide-countdown-digits-width4emThe width of one of the (two) digits
--slide-countdown-digits-height4mThe height of the (two) digits
--slide-countdown-digits-backgroundThe background color of the (two) digits
--slide-countdown-digits-border-radiusThe border-radius of the (two) digits
--slide-countdown-digits-box-shadow0 3px 4px 0 rgba(0, 0, 0, .2), inset 2px 4px 0 0 rgba(255, 255, 255, .08)The box-shadow of the (two) digits
--slide-countdown-digit-margin-right0.625emThe space between two digits
--slide-countdown-digits-font-size3emThe border-radius of the (two) digits
--slide-countdown-digits-font-weightThe font-weight of the (two) digits
--slide-countdown-digits-colorThe color of the (two) digits