You are here

Home » API reference » UIkit Components 8.3

uikit-countdown.html.twig in UIkit Components 8.3

Default theme implementation for a UIkit Countdown.

Available variables:

  • attributes: HTML attributes to be applied to the countdown.
  • separators: An associative array to insert a separator between each number, containing:

    • days_hours: The separator to insert between the days and hours.
    • hours_minutes: The separator to insert between hours and minutes.
    • minutes_seconds: The separator to insert between minutes and seconds.
  • labels: An associative array for labels to display below each number, containing:

    • days: The label to display for days.
    • hours: The label to display for hours.
    • minutes: The label to display for minutes.
    • seconds: The label to display for seconds.

See also

\Drupal\uikit_components\Element\UIkitCountdown

template_preprocess_uikit_countdown()

https://getuikit.com/docs/countdown

File

templates/components/uikit-countdown.html.twig
View source 
  1. {#

  2. /**

  3.  * @file

  4.  * Default theme implementation for a UIkit Countdown.

  5.  *

  6.  * Available variables:

  7.  * - attributes: HTML attributes to be applied to the countdown.

  8.  * - separators: An associative array to insert a separator between each number,

  9.      containing:

  10.  *   - days_hours: The separator to insert between the days and hours.

  11.  *   - hours_minutes: The separator to insert between hours and minutes.

  12.  *   - minutes_seconds: The separator to insert between minutes and seconds.

  13.  * - labels: An associative array for labels to display below each number,

  14.  *   containing:

  15.  *   - days: The label to display for days.

  16.  *   - hours: The label to display for hours.

  17.  *   - minutes: The label to display for minutes.

  18.  *   - seconds: The label to display for seconds.

  19.  *

  20.  * @see \Drupal\uikit_components\Element\UIkitCountdown

  21.  * @see template_preprocess_uikit_countdown()

  22.  * @see https://getuikit.com/docs/countdown

  23.  *

  24.  * @ingroup uikit_components_theme_render

  25.  */

  26. #}

  27. <div{{ attributes }}>

  28.   <div>

  29.     <div class="uk-countdown-number uk-countdown-days"></div>

  30.     {% if labels.days %}

  31.       <div class="uk-countdown-label uk-margin-small uk-text-center uk-visible@s">{{ labels.days }}</div>

  32.     {% endif %}

  33.   </div>

  34. 

  35.   {% if separators.days_hours %}

  36.     <div class="uk-countdown-separator">{{ separators.days_hours }}</div>

  37.   {% endif %}

  38. 

  39.   <div>

  40.     <div class="uk-countdown-number uk-countdown-hours"></div>

  41.     {% if labels.hours %}

  42.       <div class="uk-countdown-label uk-margin-small uk-text-center uk-visible@s">{{ labels.hours }}</div>

  43.     {% endif %}

  44.   </div>

  45. 

  46.   {% if separators.hours_minutes %}

  47.     <div class="uk-countdown-separator">{{ separators.hours_minutes }}</div>

  48.   {% endif %}

  49. 

  50.   <div>

  51.     <div class="uk-countdown-number uk-countdown-minutes"></div>

  52.     {% if labels.minutes %}

  53.       <div class="uk-countdown-label uk-margin-small uk-text-center uk-visible@s">{{ labels.minutes }}</div>

  54.     {% endif %}

  55.   </div>

  56. 

  57.   {% if separators.minutes_seconds %}

  58.     <div class="uk-countdown-separator">{{ separators.minutes_seconds }}</div>

  59.   {% endif %}

  60. 

  61.   <div>

  62.     <div class="uk-countdown-number uk-countdown-seconds"></div>

  63.     {% if labels.seconds %}

  64.       <div class="uk-countdown-label uk-margin-small uk-text-center uk-visible@s">{{ labels.seconds }}</div>

  65.     {% endif %}

  66.   </div>

  67. </div>

Related topics

Render API Overview
Overview of the UIkit Components Theme system and Render API.