v2.1.8
/
Use our Nuxt starter

Countdown

Countdown with options control.
GitHub
Demo

Usage

Use the seconds prop to set the number of seconds to Countdown.

02:00
{
  "wait": "Loading client-side content..."
}

Show minutes

Use the show-minutes property to show or hide the minutes in the Countdown. Default value: true.

120
{
  "wait": "Loading client-side content..."
}

Size

Use the size prop to change the size of the Countdown.

02:00
{
  "wait": "Loading client-side content..."
}

Use Circle

Use the useCircle property to display a circle around the Countdown.

:120
{
  "wait": "Loading client-side content..."
}

Icon

Use the icon prop to show an Icon.

02:00
{
  "wait": "Loading client-side content..."
}

Avatar

Use the avatar prop to show an Avatar.

02:00
{
  "wait": "Loading client-side content..."
}

Examples

Information displayed

You can manage information using the default slot.

Time Remaining：2 days, 0 hours, 0 minutes, 0 seconds. 
{
  "wait": "Loading client-side content..."
}

With interval

You can control the countdown interval using the interval prop.

New Year Countdown：36 days, 12 hours, 54 minutes, 6.6 seconds.
{
  "wait": "Loading client-side content..."
}

Handling countdown emits

Use emit start, end, abort, progress to respond to countdown events.

{
  "wait": "Loading client-side content..."
}

API

Props

Prop Default Type
as'span'any

The element or component this component should render as

size'md' "xs" | "sm" | "md" | "lg" | "xl"
emitEventstrueboolean

Emits the countdown events

seconds0 string | number

Number of seconds to countdown

showMinutestrueboolean

Should seconds be divided into minutes?

useCirclefalseboolean

Shows a Circle around the countdown

interval1000 number

The interval time (in milliseconds) of the countdown progress

needStartImmediatelytrueboolean

Starts the countdown automatically when initialized

nowDate.now() (): number

Generate the current time of a specific time zone

iconIconComponent

Display an icon on the left side.

avatar AvatarProps

Display an avatar on the left side.

b24ui { base?: ClassNameValue; label?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; circleBase?: ClassNameValue; circleGroup?: ClassNameValue; circleElement?: ClassNameValue; circlePath?: ClassNameValue; }

Slots

Slot Type
leading{ b24ui: object; }
defaultCountdownData & { formatTime: string; b24ui: object; }

Emits

Event Type
abort[]
progress[value: CountdownData]
start[]
end[]

Theme

app.config.ts
export default defineAppConfig({
  b24ui: {
    countdown: {
      slots: {
        base: 'relative flex flex-row flex-nowrap items-center justify-between text-(--b24ui-typography-legend-color)',
        label: '',
        leadingIcon: 'shrink-0',
        leadingAvatar: 'shrink-0',
        leadingAvatarSize: '',
        circleBase: '-scale-x-100 absolute inset-x-0 inset-y-0',
        circleGroup: 'fill-none stroke-none',
        circleElement: 'stroke-transparent stroke-1',
        circlePath: 'stroke-[7px] rotate-90 origin-center stroke-current transition-all duration-1000 ease-linear'
      },
      variants: {
        size: {
          xs: {
            base: 'gap-0.5 text-(length:--ui-font-size-5xs)/(--ui-font-line-height-reset)',
            leadingIcon: 'size-sm',
            leadingAvatarSize: '3xs'
          },
          sm: {
            base: 'gap-1 text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset)',
            leadingIcon: 'size-sm2',
            leadingAvatarSize: '3xs'
          },
          md: {
            base: 'gap-1 text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)',
            leadingIcon: 'size-[16px]',
            leadingAvatarSize: '3xs'
          },
          lg: {
            base: 'gap-1 text-(length:--ui-font-size-lg)/(--ui-font-line-height-reset)',
            leadingIcon: 'size-[22px]',
            leadingAvatarSize: '2xs'
          },
          xl: {
            base: 'gap-1 text-(length:--ui-font-size-xl)/(--ui-font-line-height-reset)',
            leadingIcon: 'size-[26px]',
            leadingAvatarSize: 'xs'
          }
        },
        leading: {
          true: ''
        },
        useCircle: {
          true: {
            base: 'justify-center',
            circleBase: 'size-full'
          }
        }
      },
      compoundVariants: [
        {
          size: 'xs',
          useCircle: true,
          class: 'text-(length:--ui-font-size-7xs)/[normal] p-0.5'
        },
        {
          size: 'sm',
          useCircle: true,
          class: 'text-(length:--ui-font-size-6xs)/[normal] p-1.5'
        },
        {
          size: 'md',
          useCircle: true,
          class: 'text-(length:--ui-font-size-3xs)/[normal] p-1.5'
        },
        {
          size: 'lg',
          useCircle: true,
          class: 'text-(length:--ui-font-size-xs)/[normal] p-1.5 pb-2'
        },
        {
          size: 'xl',
          useCircle: true,
          class: 'text-(length:--ui-font-size-sm)/[normal] p-2 pb-2.5'
        }
      ],
      defaultVariants: {
        size: 'md'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        countdown: {
          slots: {
            base: 'relative flex flex-row flex-nowrap items-center justify-between text-(--b24ui-typography-legend-color)',
            label: '',
            leadingIcon: 'shrink-0',
            leadingAvatar: 'shrink-0',
            leadingAvatarSize: '',
            circleBase: '-scale-x-100 absolute inset-x-0 inset-y-0',
            circleGroup: 'fill-none stroke-none',
            circleElement: 'stroke-transparent stroke-1',
            circlePath: 'stroke-[7px] rotate-90 origin-center stroke-current transition-all duration-1000 ease-linear'
          },
          variants: {
            size: {
              xs: {
                base: 'gap-0.5 text-(length:--ui-font-size-5xs)/(--ui-font-line-height-reset)',
                leadingIcon: 'size-sm',
                leadingAvatarSize: '3xs'
              },
              sm: {
                base: 'gap-1 text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset)',
                leadingIcon: 'size-sm2',
                leadingAvatarSize: '3xs'
              },
              md: {
                base: 'gap-1 text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)',
                leadingIcon: 'size-[16px]',
                leadingAvatarSize: '3xs'
              },
              lg: {
                base: 'gap-1 text-(length:--ui-font-size-lg)/(--ui-font-line-height-reset)',
                leadingIcon: 'size-[22px]',
                leadingAvatarSize: '2xs'
              },
              xl: {
                base: 'gap-1 text-(length:--ui-font-size-xl)/(--ui-font-line-height-reset)',
                leadingIcon: 'size-[26px]',
                leadingAvatarSize: 'xs'
              }
            },
            leading: {
              true: ''
            },
            useCircle: {
              true: {
                base: 'justify-center',
                circleBase: 'size-full'
              }
            }
          },
          compoundVariants: [
            {
              size: 'xs',
              useCircle: true,
              class: 'text-(length:--ui-font-size-7xs)/[normal] p-0.5'
            },
            {
              size: 'sm',
              useCircle: true,
              class: 'text-(length:--ui-font-size-6xs)/[normal] p-1.5'
            },
            {
              size: 'md',
              useCircle: true,
              class: 'text-(length:--ui-font-size-3xs)/[normal] p-1.5'
            },
            {
              size: 'lg',
              useCircle: true,
              class: 'text-(length:--ui-font-size-xs)/[normal] p-1.5 pb-2'
            },
            {
              size: 'xl',
              useCircle: true,
              class: 'text-(length:--ui-font-size-sm)/[normal] p-2 pb-2.5'
            }
          ],
          defaultVariants: {
            size: 'md'
          }
        }
      }
    })
  ]
})

Collapsible

A collapsible component for showing or hiding its content.

FieldGroup

Organize several button-like elements into a group.

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24