mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 07:03:41 +09:00
62 lines
2.2 KiB
Markdown
62 lines
2.2 KiB
Markdown
### Avatar badge
|
|
|
|
Vuero avatars can have badge images attached to them.
|
|
Simply add a 1:1 ratio image URL to the avatar component using the `badge` prop.
|
|
|
|
<!--code-->
|
|
|
|
```vue
|
|
<template>
|
|
<VFlex
|
|
flex-wrap="wrap"
|
|
align-items="flex-end"
|
|
row-gap=".5rem"
|
|
column-gap=".25rem"
|
|
>
|
|
<VAvatar
|
|
picture="https://media.cssninja.io/content/avatars/7.jpg"
|
|
size="small"
|
|
badge="/images/icons/flags/united-states-of-america.svg"
|
|
/>
|
|
<VAvatar
|
|
picture="/images/avatars/svg/vuero-1.svg"
|
|
badge="/images/icons/flags/united-states-of-america.svg"
|
|
/>
|
|
<VAvatar
|
|
picture="https://media.cssninja.io/content/avatars/11.jpg"
|
|
badge="/images/icons/flags/united-states-of-america.svg"
|
|
size="medium"
|
|
/>
|
|
<VAvatar
|
|
picture="https://media.cssninja.io/content/avatars/21.jpg"
|
|
badge="/images/icons/flags/united-states-of-america.svg"
|
|
size="large"
|
|
/>
|
|
<VAvatar
|
|
picture="https://media.cssninja.io/content/avatars/13.jpg"
|
|
badge="/images/icons/flags/united-states-of-america.svg"
|
|
size="big"
|
|
/>
|
|
<VAvatar
|
|
picture="https://media.cssninja.io/content/avatars/5.jpg"
|
|
badge="/images/icons/flags/united-states-of-america.svg"
|
|
size="xl"
|
|
/>
|
|
</VFlex>
|
|
</template>
|
|
```
|
|
|
|
<!--/code-->
|
|
|
|
<!--example-->
|
|
<VFlex flex-wrap="wrap" align-items="flex-end" row-gap=".5rem" column-gap=".25rem">
|
|
<VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" size="small" badge="/images/icons/flags/united-states-of-america.svg" />
|
|
<VAvatar picture="/images/avatars/svg/vuero-1.svg" badge="/images/icons/flags/united-states-of-america.svg" />
|
|
<VAvatar picture="https://media.cssninja.io/content/avatars/11.jpg" badge="/images/icons/flags/united-states-of-america.svg" size="medium" />
|
|
<VAvatar picture="https://media.cssninja.io/content/avatars/21.jpg" badge="/images/icons/flags/united-states-of-america.svg" size="large" />
|
|
<VAvatar picture="https://media.cssninja.io/content/avatars/13.jpg" badge="/images/icons/flags/united-states-of-america.svg" size="big" />
|
|
<VAvatar picture="https://media.cssninja.io/content/avatars/5.jpg" badge="/images/icons/flags/united-states-of-america.svg" size="xl" />
|
|
</VFlex>
|
|
|
|
<!--/example-->
|