nb-checkbox
This is a countdown component for Vue.js 3+.
Installation
Yarn
yarn add @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')
To use, simply call the component, in this case it will be NbCheckbox
or nb-checkbox
.
Mode 1
<template>
<NbCheckbox />
</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 | |
display | String | 'b' | Defines the display type. Accepts ib and b. |
disabled | Boolean | false | Defines if the slide is disabled |
groupName | String | '' | Defines checkbox group name |
options | Array | Defines the list of values. It is an array of objects { value: 'Value', text: 'Text' } | |
currentOptiton | Array | Defines an array of selected values string . The value must exist in the list options, in the key field | |
direction | String | 'left' | Defines the checkbox direction. Accepts left and right. |
textColor | String | 'black' | Defines the text color. Accepts Color name and Hex |
borderRadius | Number | 0 | Defines border-radius for type box . |
color | String | '#767676' | Defines the checkbox color. Accepts Color name and Hex |
hoverEffect | Boolean | false | Defines whether the hover effect exists when passing over the checkbox without it being selected. |
activeHoverEffect | Boolean | false | Defines whether the hover effect exists when passing over the checkbox while it is selected. |
colorHover | String | '#a6a6a6' | Defines the checkbox hover color. Accepts Color name and Hex |
itemGap | Number | 15 | Defines the space between checkbox options. |
internalGap | Number | 6 | Defines the space between the checkbox and the text. |
type | String | 'box' | Defines the checkbox type. Accepts box and circle. |
fontFamily | String | "'Lato', sans-serif" | Defines the font-family |
fontSize | String | '1.6em' | Defines the font-size |
fontWeight | Number | 400 | Defines the font-weight |
Events
name | Return type | Description |
---|---|---|
current-value | value | Fired when an update to the selected value is made, returns selected value. |
changed | value | Fired when an update to the selected value is made, returns selected value. |
Table of Contents