nb-radio

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 NbRadio or nb-radio.

Mode 1
<template>
  <NbRadio />
</template>
Mode 2
<template>
  <nb-radio />
</template>
Mode 3
<template>
  <nb-radio></nb-radio>
</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 radio group name
optionsArrayDefines the list of values. It is an array of objects { value: 'Value', text: 'Text' }
currentOptitonString''Defines the selected value. The value must exist in the list options, in the key field
directionString'left'Defines the radio direction. Accepts left and right.
textColorString'black'Defines the text color. Accepts Color name and Hex
colorString'#767676'Defines the radio color. Accepts Color name and Hex
hoverEffectBooleanfalseDefines whether the hover effect exists when passing over the radio without it being selected.
activeHoverEffectBooleanfalseDefines whether the hover effect exists when passing over the radio while it is selected.
colorHoverString'#a6a6a6'Defines the radio hover color. Accepts Color name and Hex
itemGapNumber15Defines the space between radio options.
internalGapNumber6Defines the space between the radio and the text.
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.