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