Doggo Storybook 0.10.2

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"
/>