vue-radio-button

Table of Contents

• Demo
• Installation
• Usage
• Constructor Options
• License

Demo

Demo

Installation

# npm
$ npm install vue-radio-button

#yarn
$ yarn add vue-radio-button

import Vue from "vue";
import VueRadioButton from "vue-radio-button";

Vue.use(VueRadioButton);

Usage

<template>
  <VueRadioButton v-model="selectedButton" :options="buttons">
    <template #label="{ props }">
      <img :src="props.icon" width="50" height="50" />
      <span>{{ props.title }}</span>
    </template>
  </VueRadioButton>
</template>

<script>
  import VueRadioButton from "vue-radio-button";

  export default {
    components: { VueRadioButton },
    data: () => ({
      selectedButton: "",
      buttons: [
        {
          id: 1,
          icon: "https://vuejs.org/images/logo.svg",
          title: "Vue",
        },
        {
          id: 2,
          icon: "https://vitejs.dev/logo.svg",
          title: "Vite",
        },
      ],
    }),
  };
</script>

<style>
  .v-radio-label {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    margin: 5px;
    border-radius: 4px;
    border: 1px solid #eee;
    transition: all 500ms;
  }

  .v-radio-active {
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  }
</style>

Constructor Options

Key	Type	Description	Default
value	Object	selected button	null
options	Array	list of buttons	required
name	String , Number	Group of radio buttons	required if you have some group of radio buttons

For customizing you can use label slot and classes :

Class name	Description
v-radio-container	container of VueRadioButton
v-radio-label	class of each label
v-radio-active	class of checked radio

License

The MIT License