hassan-jahan / vue-cool-box-selector

Fancy, versatile box / button / image selector for Vue 2 and 3 🪄✨ ~1KB

Vue Cool Box Selector ✅

Versatile element selector for vue. It can convert anything to a checkbox button.

Features

• Flexible, choose from any element (division, button, image or custom component)
• Headless, use our provided style or your own classes
• Works with Vue 2 and 3
• Lightweight ~1KB gzipped

Usage

Setup

npm install vue-cool-box-selector
##OR
yarn add vue-cool-box-selector
##OR
pnpm i vue-cool-box-selector

Note: Use version 2 for Vue 2

Global Use

import VueCoolBoxSelector from 'vue-cool-box-selector'

// Optional, you can use your own classes
import 'vue-cool-box-selector/dist/style.css'

// For Vue 2
import Vue from 'vue'

Vue.use(VueCoolBoxSelector)

// or Vue 3
app.use(VueCoolBoxSelector)

Local Use

import { CoolBoxItem, VueCoolBoxSelector } from 'vue-cool-box-selector'

const component = {
  components: {
    VueCoolBoxSelector,
    CoolBoxItem,
  },
}

Basic Usage

<div>
Selected box: {{ selected }}
<VueCoolBoxSelector v-model="selected" active-class="cb__active">
  <CoolBoxItem name="Item1" class="vue-cool-box-selector__item" key="1">
    Item Box 1
  </CoolBoxItem>
  <CoolBoxItem name="Item2" class="vue-cool-box-selector__item" key="2">
    Item Box 2
  </CoolBoxItem>
  <CoolBoxItem name="Item3" class="vue-cool-box-selector__item" key="3">
    Item Box 3
  </CoolBoxItem>
</VueCoolBoxSelector>
</div>

Another Example

<!-- replace cb__square with cb__circle or cb__triangle for more styles -->
<VueCoolBoxSelector v-model="selected" active-class="cb__active cb__square">
<CoolBoxItem key="1" name="Item1" class="vue-cool-box-selector__item px-3" style="width:48px;text-align:center">
  <img src="/img.svg" alt=""/>
  <small>Img1</small>
</CoolBoxItem>
<CoolBoxItem key="2" name="Item2" class="vue-cool-box-selector__item px-3" style="width:48px;text-align:center">
  <img src="/img2.svg" alt=""/>
  <small>Img2</small>
</CoolBoxItem>
</VueCoolBoxSelector>

Props

• VueCoolBoxSelector

  • active-class (String): Will be added to the item if it is selected.
  • tag (String) (Default: 'div')

• CoolBoxItem

  • name (String) (Required)
  • tag (String) (Default: 'div')

Style

• VueCoolBoxSelector class:
  • vue-cool-box-selector__item
    • Require if you want to use below classes
• CoolBoxItem active-class:
  • cb__active
  • cb__active, cb__square
  • cb__active, cb__circle
  • cb__active, cb__triangle

Change Style Color

/* vue-cool-box-selector color */
.cb__active, .cb__triangle:before {
    border-color: violet; /* var(--bs-primary) */
}

.cb__square:after, .cb__circle:after, .cb__triangle:after {
    background-color: violet; /*  var(--bs-primary) */
}

Cheers

Love my works? give me 🌟 or follow for more works! → Follow me on Github

Requirement

• node.js > 16

Thanks

• Faizal Andyka for vivu-npm

License

MIT License © 2023 Hassan Jahan