Vue Radio Toggle Buttons

🔘 Radio toggle buttons for Vue.

⚙️ Installation

npm install vue-radio-toggle-buttons
# or 
yarn add vue-radio-toggle-buttons

🛂 Usage

main.js:

import Vue from 'vue';
import VueRadioToggleButtons from 'vue-radio-toggle-buttons';
 
import App from './App.vue';
 
import 'vue-radio-toggle-buttons/dist/vue-radio-toggle-buttons.css';
 
Vue.use(VueRadioToggleButtons, {
    color: '#333',
    textColor: '#333',
    selectedTextColor: '#eee'
});
 
new Vue({
    el: '#app',
    render: h => h(App)
});

App.vue:

<template>
    <RadioToggleButtons
        v-model='currentValue'
        :values='values'
        color='purple'
        textColor='#000'
        selectedTextColor='#fff'
    />
</template>
 
<script>
export default {
    name: 'App',
    data() {
        return {
            values: [
                { label: 'Value 1', value: '1' },
                { label: 'Value 2', value: '2', disabled: true },
                { label: 'Value 3', value: '3' },
            ],
            currentValue: ''
        }
    }
};
</script>

⚙️ Plugin options

color

Type: string

Global primary color of radio toggle buttons.

textColor

Type: string

Global text color of radio toggle buttons.

selectedTextColor

Type: string

Global text color of selected item of radio toggle buttons.

📚 API

<RadioToggleButtons>

Props

values

Type: Array<{ label: string, value: string, disabled: boolean }>
Required: true

Values of radio toggle buttons.

You can set disabled to true to disable that button.

color

Type: string
Default: '#333'

Primary color of radio toggle buttons.

textColor

Type: string
Default: '#333'

Text color of radio toggle buttons.

selectedTextColor

Type: string
Default: '#eee'

Text color of selected item of radio toggle buttons.