Chip
Usage
Wrap any component with a Chip to display an indicator.
<template>
<PChip>
<PButton icon="i-lucide:mail" color="neutral" variant="subtle" />
</PChip>
</template>
Color
Use the color prop to change the color of the Chip.
<template>
<PChip color="neutral">
<PButton icon="i-lucide:mail" color="neutral" variant="subtle" />
</PChip>
</template>
Size
Use the size prop to change the size of the Chip.
<template>
<PChip size="3xl">
<PButton icon="i-lucide:mail" color="neutral" variant="subtle" />
</PChip>
</template>
Text
Use the text prop to set the text of the Chip.
<template>
<PChip :text="5" size="3xl">
<PButton icon="i-lucide:mail" color="neutral" variant="subtle" />
</PChip>
</template>
Position
Use the position prop to change the position of the Chip.
<template>
<PChip position="bottom-left">
<PButton icon="i-lucide:mail" color="neutral" variant="subtle" />
</PChip>
</template>
Inset
Use the inset prop to display the Chip inside the component. This is useful when dealing with rounded components.
<template>
<PChip inset>
<PAvatar src="https://github.com/praburangki.png" />
</PChip>
</template>
Standalone
Use the standalone prop alongside the inset prop to display the Chip inline.
<template>
<PChip standalone inset />
</template>
Examples
Control visibility
You can control the visibility of the Chip using the show prop.
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
const statuses = ['online', 'away', 'busy', 'offline'];
const status = ref(statuses[0]);
const color = computed(() => status.value ? { online: 'success', away: 'warning', busy: 'error', offline: 'neutral' }[status.value] as any : 'online');
const show = computed(() => status.value !== 'offline');
// Note: This is for demonstration purposes only. Don't do this at home.
onMounted(() => {
setInterval(() => {
if (status.value) {
status.value = statuses[(statuses.indexOf(status.value) + 1) % statuses.length];
}
}, 1000);
});
</script>
<template>
<PChip
:color="color"
:show="show"
inset
>
<PAvatar src="https://github.com/praburangki.png" />
</PChip>
</template>
offline.API
Props
| Prop | Default | Type |
|---|
Slots
| Slot | Type |
|---|
Emits
| Event | Type |
|---|
Theme
Below is the theme configuration skeleton for the PChip. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.
export default defineAppConfig({
pohon: {
chip: {
slots: {
root: '',
base: ''
},
variants: {
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
size: {
'3xs': '',
'2xs': '',
xs: '',
sm: '',
md: '',
lg: '',
xl: '',
'2xl': '',
'3xl': ''
},
position: {
'top-right': '',
'bottom-right': '',
'top-left': '',
'bottom-left': ''
},
inset: {
false: ''
},
standalone: {
false: ''
}
},
compoundVariants: [],
defaultVariants: {
size: 'md',
color: 'primary',
position: 'top-right'
}
}
}
};
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'
export default defineAppConfig({
pohon: {
chip: {
slots: {
root: '',
base: ''
},
variants: {
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
size: {
'3xs': '',
'2xs': '',
xs: '',
sm: '',
md: '',
lg: '',
xl: '',
'2xl': '',
'3xl': ''
},
position: {
'top-right': '',
'bottom-right': '',
'top-left': '',
'bottom-left': ''
},
inset: {
false: ''
},
standalone: {
false: ''
}
},
compoundVariants: [],
defaultVariants: {
size: 'md',
color: 'primary',
position: 'top-right'
}
}
}
};