v-chip

A Chip component for VueJS

Installation

npm install --save v-chip

Import on a single component

import Vue from 'vue'
import VChip from 'v-chip'
import VChipInput from 'v-chip/src/v-chip-input.js'
 
Vue.use(VChip)
Vue.use(VChipInput)
 

Examples

<template>
    <div>
 
        <!-- Label only -->
        <v-chip label="Jane Doe"></v-chip>
 
        <!-- Label and image -->
        <v-chip img-src="avatar.jpg" label="Jane Doe"></v-chip>
 
        <!-- Closable chip with label -->
        <v-chip label="John Doe" :closable="true"></v-chip>
 
        <!-- Closable chip with label and image -->
        <v-chip img-src="avatar.jpg" label="John Doe" :closable="true"></v-chip>
 
        <!-- With text and background color -->
        <v-chip img-src="avatar.jpg" label="Harry Doe" :closable="true" bg-color="#003b62" color="#89aec5"></v-chip>
 
 
        <!-- chips from input field -->
        <v-chip-input v-model="humans"></v-chip-input>
 
        <!-- chips from options -->
        <v-chip-input v-model="names" :options="planets"></v-chip-input>
 
        <ul>
            <li v-for="human in humans"> {{ human }}</li>
        </ul>
 
        <ul>
            <li v-for="destination in destinations"> {{ destination }}</li>
        </ul>
    </div>
</template>
 
<script>
    export default {
        data(){
            return {
                humans: [],
                destinations: [],
                planets: ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn',  'Uranus', 'Neptune', 'Pluto']
            }
        },
 
        
    }
</script> 
 

Properties

v-chip

name	type	required	default
label	String	true	null
img-src	String	false	null
closable	Boolean	false	false
color	String	false	#333
bg-color	String	false	#f1f1f1

v-chip-input

name	type	required	default
options	Array	false	null
v-model	Array	true	null
input-class	String	false	null

Author

Olu Udeh

License

This project is licensed under MIT License