Doggo Storybook 0.9.0

Avatar

Renders profile picture, typically to represent a user.

Read more Read less

Usage

Minimal example with only the src attribute:

<.avatar src="avatar.png" />

Render avatar as a circle:

<.avatar src="avatar.png" circle />

Use a placeholder image in case the avatar is not set:

<.avatar src={@user.avatar_url} placeholder_src="fallback.png" />

Render an text as the placeholder value:

<.avatar src={@user.avatar_url} placeholder_content="A" />
Default Open in playground 
<.avatar src="https://github.com/woylie/doggo/blob/main/assets/dog_avatar.jpg?raw=true"/>
Image fallback Open in playground 
<.avatar src={nil} placeholder_src="https://github.com/woylie/doggo/blob/main/assets/dog_avatar_placeholder.jpg?raw=true"/>
Text fallback Open in playground
A 
<.avatar src={nil} placeholder_content="A"/>
Size Open in playground 
<.avatar size="small" src="https://github.com/woylie/doggo/blob/main/assets/dog_avatar.jpg?raw=true"/>
<.avatar size="normal" src="https://github.com/woylie/doggo/blob/main/assets/dog_avatar.jpg?raw=true"/>
<.avatar size="medium" src="https://github.com/woylie/doggo/blob/main/assets/dog_avatar.jpg?raw=true"/>
<.avatar size="large" src="https://github.com/woylie/doggo/blob/main/assets/dog_avatar.jpg?raw=true"/>
Shape Open in playground 
<.avatar src="https://github.com/woylie/doggo/blob/main/assets/dog_avatar.jpg?raw=true" shape={nil}/>
<.avatar src="https://github.com/woylie/doggo/blob/main/assets/dog_avatar.jpg?raw=true" shape="circle"/>