Avatar
An image element with a fallback for representing the user.
Usage
Image & fallback
JDAvatar do AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper") AvatarFallback { "JD" } end
Copied!
Copy failed!
Only fallback
JD
Avatar do AvatarFallback { "JD" } end
Copied!
Copy failed!
Sizes
JDJDJDJDJDdiv(class: 'flex items-center space-x-2') do # size: :xs Avatar(size: :xs) do AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper") AvatarFallback { "JD" } end # size: :sm Avatar(size: :sm) do AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper") AvatarFallback { "JD" } end # size: :md Avatar(size: :md) do AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper") AvatarFallback { "JD" } end # size: :lg Avatar(size: :lg) do AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper") AvatarFallback { "JD" } end # size: :xl Avatar(size: :xl) do AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper") AvatarFallback { "JD" } end end
Copied!
Copy failed!
Sizes (only fallback)
JDJDJDJDJD
div(class: 'flex items-center space-x-2') do # size: :xs Avatar(size: :xs) do AvatarFallback { "JD" } end # size: :sm Avatar(size: :sm) do AvatarFallback { "JD" } end # size: :md Avatar(size: :md) do AvatarFallback { "JD" } end # size: :lg Avatar(size: :lg) do AvatarFallback { "JD" } end # size: :xl Avatar(size: :xl) do AvatarFallback { "JD" } end end
Copied!
Copy failed!
Components
| Component | Built using | Source |
|---|---|---|
Avatar | Phlex | |
AvatarFallback | Phlex | |
AvatarImage | Phlex |
| Component | Built using | Source |
|---|---|---|
Avatar | Phlex | |
AvatarFallback | Phlex | |
AvatarImage | Phlex |