Usage
<template>
<PAvatar src="https://github.com/praburangki.png" />
</template>
<img> element such as alt, loading, etc.Src
Use the src prop to set the image URL.
<template>
<PAvatar src="https://github.com/praburangki.png" />
</template>
Size
Use the size prop to set the size of the Avatar.
<template>
<PAvatar src="https://github.com/praburangki.png" size="xl" />
</template>
<img> element's width and height are automatically set based on the size prop.Icon
Use the icon prop to display a fallback Icon.
<template>
<PAvatar icon="i-lucide:image" size="md" />
</template>
Text
Use the text prop to display a fallback text.
<template>
<PAvatar text="+1" size="md" />
</template>
Alt
When no icon or text is provided, the initials of the alt prop is used as fallback.
<template>
<PAvatar alt="bebedag" size="md" />
</template>
alt prop is passed to the img element as the alt attribute.Chip
Use the chip prop to display a chip around the Avatar.
<template>
<PAvatar
src="https://github.com/praburangki.png"
:chip="{
inset: true
}"
/>
</template>
Examples
With tooltip
You can use a Tooltip component to display a tooltip when hovering the Avatar.
<script setup lang="ts">
import { PAvatar, PTooltip } from '#components';
</script>
<template>
<PTooltip text="praburangki">
<PAvatar
src="https://github.com/praburangki.png"
alt="praburangki"
/>
</PTooltip>
</template>
With mask
You can use a CSS mask to display an Avatar with a custom shape instead of a simple circle.
<script setup lang="ts">
import { PAvatar } from '#components';
</script>
<template>
<PAvatar
class="squircle rounded-none"
src="https://github.com/praburangki.png"
alt="praburangki"
/>
</template>
<style>
.squircle {
mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z'/%3e%3c/svg%3e");
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
}
</style>
API
Props
| Prop | Default | Type |
|---|
Theme
Below is the theme configuration skeleton for the PAvatar. 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: {
avatar: {
slots: {
root: '',
image: '',
fallback: '',
icon: ''
},
variants: {
size: {
'3xs': {
root: ''
},
'2xs': {
root: ''
},
xs: {
root: ''
},
sm: {
root: ''
},
md: {
root: ''
},
lg: {
root: ''
},
xl: {
root: ''
},
'2xl': {
root: ''
},
'3xl': {
root: ''
}
}
},
defaultVariants: {
size: 'md'
}
}
}
};
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'
export default defineAppConfig({
pohon: {
avatar: {
slots: {
root: '',
image: '',
fallback: '',
icon: ''
},
variants: {
size: {
'3xs': {
root: ''
},
'2xs': {
root: ''
},
xs: {
root: ''
},
sm: {
root: ''
},
md: {
root: ''
},
lg: {
root: ''
},
xl: {
root: ''
},
'2xl': {
root: ''
},
'3xl': {
root: ''
}
}
},
defaultVariants: {
size: 'md'
}
}
}
};
Akar
With Pohon UI, you can achieve similar component functionality with less code and effort, as it comes with built-in styles mechanism and behaviors that are optimized for common use cases. Since it's using unocss-variants it adds a runtime cost, but it can be worth it if you prioritize development speed and ease of use over fine-grained control.
If this is a deal breaker for you, you can always stick to using Akar and build your own custom components on top of it.