- Getting Started
- Installation: Tailwind CLI
Avatar Group
Avatar Group renders its children as a stack. Use the max attribute to limit the number of avatars.
Examples
Below you can view various demos with example markup.
Variant
Like avatar, the avatar_group component supports circular, rounded, and square styling.
<div class="mb-6">
<.avatar_group>
<:avatar src={@src1}/>
<:avatar src={@src2}/>
<:avatar src={@src3}/>
<:avatar src={@src4}/>
<:avatar src={@src5}/>
<:avatar src={@src1}/>
</.avatar_group>
</div>
<div class="mb-6">
<.avatar_group variant="rounded">
<:avatar src={@src1}/>
<:avatar src={@src2}/>
<:avatar src={@src3}/>
<:avatar src={@src4}/>
<:avatar src={@src5}/>
<:avatar src={@src1}/>
</.avatar_group>
</div>
<div>
<.avatar_group variant="square">
<:avatar src={@src1}/>
<:avatar src={@src2}/>
<:avatar src={@src3}/>
<:avatar src={@src4}/>
<:avatar src={@src5}/>
<:avatar src={@src1}/>
</.avatar_group>
</div>
Max Avatars
If you need to control the total number of avatars not shown, you can use the "max" attribute.
<.avatar_group max={3}>
<:avatar src={@src1}/>
<:avatar src={@src2}/>
<:avatar src={@src3}/>
<:avatar src={@src4}/>
<:avatar src={@src5}/>
<:avatar src={@src1}/>
</.avatar_group>
Spacing
The avatar component supports adjusting spacing between avatars.
<div class="mb-6">
<.avatar_group spacing="sm">
<:avatar src={@src1}/>
<:avatar src={@src2}/>
<:avatar src={@src3}/>
<:avatar src={@src4}/>
<:avatar src={@src5}/>
<:avatar src={@src1}/>
</.avatar_group>
</div>
<div class="mb-6">
<.avatar_group spacing="md">
<:avatar src={@src1}/>
<:avatar src={@src2}/>
<:avatar src={@src3}/>
<:avatar src={@src4}/>
<:avatar src={@src5}/>
<:avatar src={@src1}/>
</.avatar_group>
</div>
<div>
<.avatar_group spacing="lg">
<:avatar src={@src1}/>
<:avatar src={@src2}/>
<:avatar src={@src3}/>
<:avatar src={@src4}/>
<:avatar src={@src5}/>
<:avatar src={@src1}/>
</.avatar_group>
</div>
API
API documentation for the component. Learn about imports and available attributes.
Import
There are multiple ways to import components.
# PhoenixUI macro which imports all components
use PhoenixUI
# Or import component individually
import PhoenixUI.Components.Avatar, only: [avatar_group: 1]
Attributes
Below is a list of attributes that can be applied to the component.
| Name | Type | Default | Description |
|---|---|---|---|
| HTML attribute | any | Supports all HTML attributes. | |
| avatar attributs | any | Supports all avatar attributes at the group level. | |
| avatar* | slot | ||
| border | bool | true | Applies border by default for better stacking visibility. |
| extend_class | string | Adds additional classes. | |
| max | integer | 5 | Limits visible avatars. |
| phx-{any} | binding | Supports all Phoenix DOM element bindings. | |
| spacing | "xs" | "sm" | "md" | "lg" | "xl" | md | Congfigure stacked avatar spacing. |