mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
6da0db0113
Co-authored-by: Daniel Roe <daniel@roe.dev> Co-authored-by: Sébastien Chopin <seb@nuxt.com>
101 lines
2.1 KiB
Markdown
101 lines
2.1 KiB
Markdown
---
|
|
github: true
|
|
---
|
|
|
|
## Usage
|
|
|
|
::component-card
|
|
---
|
|
props:
|
|
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
|
|
alt: 'Avatar'
|
|
---
|
|
::
|
|
|
|
### Size
|
|
|
|
Use the `size` prop to change the size of the Avatar.
|
|
|
|
::component-card
|
|
---
|
|
props:
|
|
size: 'md'
|
|
baseProps:
|
|
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
|
|
alt: 'Avatar'
|
|
---
|
|
::
|
|
|
|
### Chip
|
|
|
|
Use the `chipColor`, `chipVariant` and `chipPosition` props to display a chip on the Avatar.
|
|
|
|
::component-card
|
|
---
|
|
props:
|
|
chipColor: 'primary'
|
|
chipVariant: 'solid'
|
|
chipPosition: 'top-right'
|
|
baseProps:
|
|
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
|
|
alt: 'Avatar'
|
|
---
|
|
::
|
|
|
|
### Placeholder
|
|
|
|
If there is an error loading the `src` of the avatar or `src` is null a background placeholder will be displayed, customizable in `ui.avatar.background`.
|
|
|
|
If there's an `alt` prop initials will be displayed on top of the background, customizable in `ui.avatar.placeholder`.
|
|
|
|
::component-card
|
|
---
|
|
props:
|
|
alt: 'Benjamin Canac'
|
|
---
|
|
::
|
|
|
|
### Group
|
|
|
|
To stack avatars as a group, use the `AvatarGroup` component.
|
|
|
|
- To limit the amount of avatars to show, use the `max` prop. It'll truncate the avatars and show a "+X" label (where X is the remaining avatars)
|
|
- To size all the avatars equally, pass the `size` prop
|
|
- To adjust the spacing or the ring between avatars, customize with `ui.avatarGroup.margin` or `ui.avatarGroup.ring`
|
|
|
|
::component-card{slug="AvatarGroup"}
|
|
---
|
|
props:
|
|
size: 'md'
|
|
max: 2
|
|
ui:
|
|
size:
|
|
'3xs': ''
|
|
'2xs': ''
|
|
xs: ''
|
|
sm: ''
|
|
md: ''
|
|
lg: ''
|
|
xl: ''
|
|
'2xl': ''
|
|
'3xl': ''
|
|
code: |
|
|
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
|
|
<UAvatar src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" />
|
|
<UAvatar src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" />
|
|
---
|
|
|
|
#default
|
|
:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Avatar"}
|
|
:u-avatar{src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Avatar"}
|
|
:u-avatar{src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="Avatar"}
|
|
::
|
|
|
|
## Props
|
|
|
|
:component-props
|
|
|
|
## Preset
|
|
|
|
:component-preset
|