ui/docs/content/3.components/avatar-group.md

title, description, links

title	description	links
AvatarGroup	Stack multiple avatars in a group.	label icon to GitHub i-simple-icons-github https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/AvatarGroup.vue

Usage

Wrap multiple Avatar within an AvatarGroup to stack them.

::component-code

slots: default: |

<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" />
<UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" />
<UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" />

---

:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac"} :u-avatar{src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel"} :u-avatar{src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter"} ::

Size

Use the size prop to change the size of all the avatars.

::component-code

props: size: md slots: default: |

<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" />
<UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" />
<UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" />

---

:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac"} :u-avatar{src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel"} :u-avatar{src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter"} ::

Max

Use the max prop to limit the number of avatars displayed. The rest will be displayed as a +X avatar.

::component-code

props: max: 2 slots: default: >

:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac"} :u-avatar{src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel"} :u-avatar{src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter"} ::

Examples

With tooltip

Wrap each avatar with a Tooltip to display a tooltip on hover.

:component-example{name="avatar-group-tooltip-example"}

With chip

Wrap each avatar with a Chip to display a chip around the avatar.

:component-example{name="avatar-group-chip-example"}

With link

Wrap each avatar with a Link to make them clickable.

:component-example{name="avatar-group-link-example"}

API

Props

:component-props

Slots

:component-slots

Theme

:component-theme