nb-checkbox

This is a countdown component for Vue.js 3+.

Installation

Yarn
yarn add @vlalg-nimbus/nb-inputs
NPM
npm install @vlalg-nimbus/nb-inputs

Usage

Vue 3
import { createApp } from 'vue'
import App from './App.vue'

import NbInputComponents from '@vlalg-nimbus/nb-inputs'
import "@vlalg-nimbus/nb-inputs/dist/style.css";

const app = createApp(App)
app.use(NbInputComponents)
app.mount('#app')
Nuxt 3
import NbInputComponents from '@vlalg-nimbus/nb-inputs'
import "@vlalg-nimbus/nb-inputs/dist/style.css";

export default defineNuxtPlugin(context => {
  context.vueApp.use(NbInputComponents)
})

To use, simply call the component, in this case it will be NbCheckbox or nb-checkbox.

Mode 1
<template>
  <NbCheckbox />
</template>
Mode 2
<template>
  <nb-checkbox />
</template>
Mode 3
<template>
  <nb-checkbox></nb-checkbox>
</template>

Preview & Playground

Select the component you want to edit/test

Loading Sandbox...

Props

Items with an (*) mean they are required

nameValue typeDefaultDescription
nbId (*)StringSets the id attribute to differentiate from other components
displayString'b'Defines the display type. Accepts ib and b.
disabledBooleanfalseDefines if the slide is disabled
groupNameString''Defines checkbox group name
optionsArrayDefines the list of values. It is an array of objects { value: 'Value', text: 'Text' }
currentOptitonArrayDefines an array of selected values string. The value must exist in the list options, in the key field
directionString'left'Defines the checkbox direction. Accepts left and right.
textColorString'black'Defines the text color. Accepts Color name and Hex
borderRadiusNumber0Defines border-radius for type box.
colorString'#767676'Defines the checkbox color. Accepts Color name and Hex
hoverEffectBooleanfalseDefines whether the hover effect exists when passing over the checkbox without it being selected.
activeHoverEffectBooleanfalseDefines whether the hover effect exists when passing over the checkbox while it is selected.
colorHoverString'#a6a6a6'Defines the checkbox hover color. Accepts Color name and Hex
itemGapNumber15Defines the space between checkbox options.
internalGapNumber6Defines the space between the checkbox and the text.
typeString'box'Defines the checkbox type. Accepts box and circle.
fontFamilyString"'Lato', sans-serif"Defines the font-family
fontSizeString'1.6em'Defines the font-size
fontWeightNumber400Defines the font-weight

Events

nameReturn typeDescription
current-valuevalueFired when an update to the selected value is made, returns selected value.
changedvalueFired when an update to the selected value is made, returns selected value.