mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-17 13:38:07 +01:00
100 lines
1.6 KiB
Markdown
100 lines
1.6 KiB
Markdown
---
|
|
description: Display an image element with fallback.
|
|
links:
|
|
- label: Avatar
|
|
icon: i-custom-radix-vue
|
|
to: https://www.radix-vue.com/components/avatar.html
|
|
- label: GitHub
|
|
icon: i-simple-icons-github
|
|
to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Avatar.vue
|
|
---
|
|
|
|
## Usage
|
|
|
|
Use the `src` prop to set the image URL. You can pass any property from HTML `<img>` element such as `alt`, `loading`, etc.
|
|
|
|
::component-code
|
|
---
|
|
props:
|
|
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
|
|
---
|
|
::
|
|
|
|
### Size
|
|
|
|
Use the `size` prop to set the size of the Avatar.
|
|
|
|
::component-code
|
|
---
|
|
ignore:
|
|
- src
|
|
props:
|
|
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
|
|
size: md
|
|
---
|
|
::
|
|
|
|
### Icon
|
|
|
|
Use the `icon` prop to display a fallback [Icon](/components/icon).
|
|
|
|
::component-code
|
|
---
|
|
props:
|
|
icon: 'i-heroicons-photo'
|
|
size: md
|
|
---
|
|
::
|
|
|
|
### Text
|
|
|
|
Use the `text` prop to display a fallback text.
|
|
|
|
::component-code
|
|
---
|
|
props:
|
|
text: '+1'
|
|
size: md
|
|
---
|
|
::
|
|
|
|
### Alt
|
|
|
|
When no icon or text is provided, the **initials** of the `alt` prop will be used as fallback.
|
|
|
|
::component-code
|
|
---
|
|
props:
|
|
alt: 'Benjamin Canac'
|
|
size: md
|
|
---
|
|
::
|
|
|
|
::tip
|
|
The `alt` prop will be used as the `alt` attribute of the image.
|
|
::
|
|
|
|
## Examples
|
|
|
|
### With tooltip
|
|
|
|
You can use the [Tooltip](/components/tooltip) component to display a tooltip when hovering the Avatar.
|
|
|
|
:component-example{name="AvatarTooltipExample"}
|
|
|
|
### With chip
|
|
|
|
You can use the [Chip](/components/chip) component to display a chip around the Avatar.
|
|
|
|
:component-example{name="AvatarChipExample"}
|
|
|
|
## API
|
|
|
|
### Props
|
|
|
|
:component-props
|
|
|
|
## Theme
|
|
|
|
:component-theme
|