vue-radio-button

vue-radio-button

Table of Contents

• Demo
• Installation
• Usage
• Constructor Options
• Examples
• 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 #default="{ props }">
      <div class="vue-radio-button">
        <img width="40" height="40" :src="props.icon" class="icon" />
        <div class="title">
          {{ props.title }}
        </div>
      </div>
    </template>
  </VueRadioButton>
</template>

<script>
  export default {
    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>
  .vue-radio-button {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .icon {
    object-fit: contain;
    position: absolute;
    top: 15px;
  }

  .title {
    position: absolute;
    bottom: 20px;
  }
</style>

Constructor Options

Key	Type	Description	Default
value	Object	selected button	null
options	Array	list of buttons	required
color	String	color of the active button	#9e9e9e30
noRipple	Boolean	ripple style	true
width	String, Number	width of buttons	100px
height	String, Number	height of buttons	100px

Examples

Custom active color

<template>
  <VueRadioButton v-model="selectedButton" :options="buttons" color="#f8a1155e">
    <template #default="{ props }">
      <div class="vue-radio-button">
        <img width="40" height="40" :src="props.icon" class="icon" />
        <div class="title">
          {{ props.title }}
        </div>
      </div>
    </template>
  </VueRadioButton>
</template>

<script>
  export default {
    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>
  .vue-radio-button {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .icon {
    object-fit: contain;
    position: absolute;
    top: 15px;
  }

  .title {
    position: absolute;
    bottom: 20px;
  }
</style>

Without ripple

<template>
  <VueRadioButton
    v-model="selectedButton"
    :options="buttons"
    color="#747bff"
    no-ripple
  >
    <template #default="{ props }">
      <div class="vue-radio-button">
        <img width="50" height="50" :src="props.icon" class="icon" />
      </div>
    </template>
  </VueRadioButton>
</template>

<script>
  export default {
    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>
  .vue-radio-button {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .icon {
    object-fit: contain;
  }
</style>

Custom dimension

<template>
  <VueRadioButton
    v-model="selectedButton"
    :options="buttons"
    color="#f8a1155e"
    width="150"
    height="80"
  >
    <template #default="{ props }">
      <div class="vue-radio-button">
        <img width="40" height="40" :src="props.icon" class="icon" />
        <div class="title">
          {{ props.title }}
        </div>
      </div>
    </template>
  </VueRadioButton>
</template>

<script>
  export default {
    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>
  .vue-radio-button {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }

  .icon {
    object-fit: contain;
  }
</style>

License

The MIT License