Appearance
Chip Component Demo ​
This page demonstrates the Chip component with various configurations and examples.
Basic Chips ​
A simple example showing basic chip usage with different configurations.
vue
<template>
<div class="demo-container">
<OChip chip="Default Chip" />
<OChip chip="Closable Chip" :closable="true" @onDeleteChip="handleDelete" />
<OChip
:chip="{ text: 'Object Chip', value: 'obj-1' }"
textKey="text"
valueKey="value"
:closable="true"
@onDeleteChip="handleDelete"
/>
</div>
</template>
<script setup>
const handleDelete = (value) => {
console.log('Deleted chip:', value)
}
</script>
<style scoped>
.demo-container {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
</style>Default Chip
Closable Chip
Object Chip
Custom Close Button ​
This example demonstrates how to customize the close button using slots.
vue
<template>
<div class="demo-container">
<OChip
chip="Custom Close"
:closable="true"
@onDeleteChip="handleDelete"
>
<template #close="{ chip }">
<button
class="custom-close"
@click="$emit('onDeleteChip', chip)"
aria-label="Remove chip"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10"></circle>
<line x1="15" y1="9" x2="9" y2="15"></line>
<line x1="9" y1="9" x2="15" y2="15"></line>
</svg>
</button>
</template>
</OChip>
<OChip
chip="Text Close"
:closable="true"
@onDeleteChip="handleDelete"
>
<template #close="{ chip }">
<button
class="text-close"
@click="$emit('onDeleteChip', chip)"
aria-label="Remove chip"
>
Remove
</button>
</template>
</OChip>
</div>
</template>
<script setup>
const handleDelete = (value) => {
console.log('Deleted chip:', value)
}
</script>
<style scoped>
.demo-container {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.custom-close {
margin-left: 0.5rem;
padding: 0.25rem;
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: rgba(0, 0, 0, 0.54);
border-radius: 50%;
transition: background-color 0.2s ease;
}
.custom-close:hover {
background-color: rgba(0, 0, 0, 0.08);
}
.text-close {
margin-left: 0.5rem;
padding: 0.25rem 0.5rem;
background: none;
border: none;
cursor: pointer;
font-size: 0.75rem;
color: rgba(0, 0, 0, 0.54);
border-radius: 4px;
transition: background-color 0.2s ease;
}
.text-close:hover {
background-color: rgba(0, 0, 0, 0.08);
}
</style>Custom Close
Text Close
Chips with Icons ​
This example shows how to add icons to chips using the prepend slot.
vue
<template>
<div class="demo-container">
<OChip chip="User" :closable="true" @onDeleteChip="handleDelete">
<template #prepend>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</template>
</OChip>
<OChip chip="Email" :closable="true" @onDeleteChip="handleDelete">
<template #prepend>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
</template>
</OChip>
<OChip chip="Phone" :closable="true" @onDeleteChip="handleDelete">
<template #prepend>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
</svg>
</template>
</OChip>
</div>
</template>
<script setup>
const handleDelete = (value) => {
console.log('Deleted chip:', value)
}
</script>
<style scoped>
.demo-container {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
</style>User
Email
Phone
Custom Styled Chips ​
This example demonstrates how to apply custom styles to chips.
vue
<template>
<div class="demo-container">
<OChip chip="Success" class="success-chip" :closable="true" @onDeleteChip="handleDelete" />
<OChip chip="Warning" class="warning-chip" :closable="true" @onDeleteChip="handleDelete" />
<OChip chip="Error" class="error-chip" :closable="true" @onDeleteChip="handleDelete" />
<OChip chip="Info" class="info-chip" :closable="true" @onDeleteChip="handleDelete" />
</div>
</template>
<script setup>
const handleDelete = (value) => {
console.log('Deleted chip:', value)
}
</script>
<style scoped>
.demo-container {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.success-chip {
background-color: #4CAF50;
color: white;
}
.warning-chip {
background-color: #FFC107;
color: black;
}
.error-chip {
background-color: #F44336;
color: white;
}
.info-chip {
background-color: #2196F3;
color: white;
}
</style>Success
Warning
Error
Info
Complex Chips ​
This example shows how to create complex chips with custom content and styling.
vue
<template>
<div class="demo-container">
<OChip
:chip="{ user: { name: 'John Doe', role: 'Admin' } }"
:closable="true"
@onDeleteChip="handleDelete"
>
<template #prepend>
<span class="user-avatar">JD</span>
</template>
<template #default="{ chip }">
<div class="user-info">
<strong>{{ chip.user.name }}</strong>
<span class="role">{{ chip.user.role }}</span>
</div>
</template>
<template #close="{ chip }">
<button
class="custom-close"
@click="$emit('onDeleteChip', chip)"
aria-label="Remove user"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10"></circle>
<line x1="15" y1="9" x2="9" y2="15"></line>
<line x1="9" y1="9" x2="15" y2="15"></line>
</svg>
</button>
</template>
</OChip>
<OChip
:chip="{ status: 'In Progress', count: 5 }"
:closable="true"
@onDeleteChip="handleDelete"
>
<template #default="{ chip }">
<div class="status-info">
<span class="status">{{ chip.status }}</span>
<span class="count">{{ chip.count }} items</span>
</div>
</template>
<template #close="{ chip }">
<button
class="text-close"
@click="$emit('onDeleteChip', chip)"
aria-label="Remove status"
>
Clear
</button>
</template>
</OChip>
</div>
</template>
<script setup>
const handleDelete = (value) => {
console.log('Deleted chip:', value)
}
</script>
<style scoped>
.demo-container {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.user-avatar {
width: 24px;
height: 24px;
background-color: #2196F3;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: bold;
}
.user-info {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.role {
font-size: 0.75rem;
color: #666;
}
.status-info {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.status {
font-weight: bold;
}
.count {
font-size: 0.75rem;
color: #666;
}
.custom-close {
margin-left: 0.5rem;
padding: 0.25rem;
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: rgba(0, 0, 0, 0.54);
border-radius: 50%;
transition: background-color 0.2s ease;
}
.custom-close:hover {
background-color: rgba(0, 0, 0, 0.08);
}
.text-close {
margin-left: 0.5rem;
padding: 0.25rem 0.5rem;
background: none;
border: none;
cursor: pointer;
font-size: 0.75rem;
color: rgba(0, 0, 0, 0.54);
border-radius: 4px;
transition: background-color 0.2s ease;
}
.text-close:hover {
background-color: rgba(0, 0, 0, 0.08);
}
</style>JD
In Progress5 items