Helps you represent simple data with colorful options
Basic Chip
Avatar Text
Avatar Icon
Avatar Image
Closable chip
<template>
<div class="demo-alignment">
<vs-chip>Basic Chip</vs-chip>
<vs-chip>
<vs-avatar text="LD"/>
Avatar Text
</vs-chip>
<vs-chip>
<vs-avatar />
Avatar Icon
</vs-chip>
<vs-chip>
<vs-avatar src="https://randomuser.me/api/portraits/men/4.jpg"/>
Avatar Image
</vs-chip>
<vs-chip @click="isDeleted=true" v-if="!isDeleted" closable>
Closable chip
</vs-chip>
</div>
</template>
<script>
export default {
data() {
return {
isDeleted: false,
}
}
}
</script>