- Getting Started
- Installation: Tailwind CLI
Avatar
Avatars are found throughout material design with uses in everything from tables to dialog menus.
Examples
Below you can view various demos with example markup.
Variant
The avatar component supports circular, rounded, and square styling.
<.avatar extend_class="mr-4" src={@src1}/>
<.avatar src={@src2} variant="rounded"/>
<.avatar extend_class="ml-4" src={@src3} variant="square"/>
Image
Image avatars can be created by passing the standard img attribute "src" to the component.
<.avatar extend_class="mr-4" src={@src1}/>
<.avatar extend_class="mr-4" src={@src2}/>
<.avatar src={@src3}/>
<.avatar extend_class="ml-4" src={@src4}/>
<.avatar extend_class="ml-4" src={@src5}/>
Letter
Avatars containing simple characters can via the "alt" attribute text.
<.avatar extend_class="mr-4" src={@src1}/>
<.avatar extend_class="mr-4" src={@src2}/>
<.avatar src={@src3}/>
<.avatar extend_class="ml-4" src={@src4}/>
<.avatar extend_class="ml-4" src={@src5}/>
Icon
Icon avatars are created by passing an icon as children.
<.avatar extend_class="mr-4" src={@src3} size={1}/>
<.avatar extend_class="mr-4" src={@src3} size={2}/>
<.avatar src={@src3} size={3}/>
<.avatar extend_class="ml-4" src={@src3} size={4}/>
<.avatar extend_class="ml-4" src={@src3} size={5}/>
Size
You can change the size of the avatar via the size attribute.
<.avatar extend_class="mr-4" src={@src3} size="xs"/>
<.avatar extend_class="mr-4" src={@src3} size="sm"/>
<.avatar src={@src3} size="md"/>
<.avatar extend_class="ml-4" src={@src3} size="lg"/>
<.avatar extend_class="ml-4" src={@src3} size="xl"/>
Color
You can use different background colors for the avatar.
<.avatar extend_class="mr-4" src={@src3} size={1}/>
<.avatar extend_class="mr-4" src={@src3} size={2}/>
<.avatar src={@src3} size={3}/>
<.avatar extend_class="ml-4" src={@src3} size={4}/>
<.avatar extend_class="ml-4" src={@src3} size={5}/>
Fallback
If there is no "src" or "alt" attribute provided, the avatar falls back to a generic avatar icon.
<.avatar extend_class="mr-4" src={@src3} size="xs"/>
<.avatar extend_class="mr-4" src={@src3} size="sm"/>
<.avatar src={@src3} size="md"/>
<.avatar extend_class="ml-4" src={@src3} size="lg"/>
<.avatar extend_class="ml-4" src={@src3} size="xl"/>
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: 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. | |
| border | bool | false | Whether to add a border to the avatar. |
| color | any tailwind color | slate | Any Tailwind-supported color. |
| extend_class | string | Adds additional classes. | |
| phx-{any} | binding | Supports all Phoenix DOM element bindings. | |
| size | "xs" | "sm" | "md" | "lg" | "xl" | 0.25..20//0.25 | md | Can use xs-xl or an rem range of 0.25-20 incremented by 0.25. |
| variant | "circular" | "rounded" | "square" | circular |