Skip to content

Latest commit

 

History

History
109 lines (87 loc) · 2.59 KB

README.md

File metadata and controls

109 lines (87 loc) · 2.59 KB

vue-radio-button

Table of Contents

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