nb-countdown
This is a countdown component for Vue.js 3+.
Look at the console to see the triggered event
Installation
Yarn
yarn add @vlalg-nimbus/nb-time
Usage
Vue 3
import { createApp } from 'vue'
import App from './App.vue'
import NbTimeComponents from '@vlalg-nimbus/nb-time'
import "@vlalg-nimbus/nb-time/dist/style.css";
const app = createApp(App)
app.use(NbTimeComponents)
app.mount('#app')
To use, simply call the component, in this case it will be NbCountdown or nb-countdown.
Mode 1
<template>
<NbCountdown />
</template>
Preview & Playground
Select the component you want to edit/test
Loading Sandbox...
Props
Items with an (*) mean they are required
| name | Value type | Default | Description |
|---|---|---|---|
| nbId (*) | String | Sets the id attribute to differentiate from other components | |
| textColor | String | '#000' | Defines the text color. Accepts Color name and Hex |
| numberColor | String | '#000' | Defines the number text color. Accepts Color name and Hex |
| separatorColor | String | '#000' | Defines the separator color. Accepts Color name and Hex |
| border | Boolean | true | Defines whether the countdown has a border. |
| borderColor | String | '#000' | Defines the border color. Accepts Color name and Hex |
| day | Number | 1 | Defines the countdown day. Accepts numbers between 1 and 31, numbers from 1 to 9 do not need to be supplied with 0 before. |
| month | String | 'jan' | Defines the countdown month. Defines the countdown month. Accepted jan, feb, mar, apr, may, jun, jul, aug, sept, oct, nov or dec. |
| year | Number | 9999 | Defines the countdown month. Accepts any year equal to or greater than the current year, but with 4 characters (xxxx). |
| hour | Number | 0 | Defines the countdown hour. Accepts numbers between 0 and 23, numbers from 1 to 9 do not need to be supplied with 0 before. |
| minute | Number | 0 | Defines the countdown minute. Accepts numbers between 0 and 59, numbers from 1 to 9 do not need to be supplied with 0 before. |
| second | Number | 0 | Defines the countdown second. Accepts numbers between 0 and 59, numbers from 1 to 9 do not need to be supplied with 0 before. |
| daysText | String | 'days' | Defines the text that appears below the number of days. |
| hoursText | String | 'hours' | Defines the text that appears below the number of hours. |
| minutesText | String | 'minutes' | Defines the text that appears below the number of minutes. |
| secondsText | String | 'seconds' | Defines the text that appears below the number of seconds. |
| showDays | Boolean | true | Defines whether the number of days should be shown. |
| showHours | Boolean | true | Defines whether the number of hours should be shown. |
| showMinutes | Boolean | true | Defines whether the number of minutes should be shown. |
| showSeconds | Boolean | true | Defines whether the number of seconds should be shown. |
| separator | Boolean | true | Defines whether the separator should be shown. |
| separatorType | String | '/' | Defines the separator. |
| fontFamily | String | "'Lato', sans-serif" | Defines the font-family |
| fontSizeNumber | Number | 2.5 | Defines the number text font-size |
| fontSizeText | Number | 1.3 | Defines the text font-size |
| fontSizeSeparator | Number | 3 | Defines the separator font-size |
| fontWeightNumber | Number | 900 | Defines the number font-weight |
| fontWeightText | Number | 300 | Defines the text font-weight |
| fontWeightSeparator | Number | 900 | Defines the number font-weight |
| containerWidth | Number | 256 | Defines width. Used to fix wrapper size when changing fontSizeNumber, fontSizeText, fontSizeSeparator, fontWeightNumber, fontWeightText and fontWeightSeparator props. You may not need to change if you use the default settings. |
| containerHeight | Number | 43 | Defines height. Used to fix wrapper size when changing fontSizeNumber, fontSizeText, fontSizeSeparator, fontWeightNumber, fontWeightText and fontWeightSeparator props. You may not need to change if you use the default settings. |
Events
| name | Return type | Description |
|---|---|---|
| started | nothing | Fired when the countdown is started, returns nothing. |
| finished | nothing | Fired when the countdown is finished, returns nothing. |
Table of Contents