View Source BitstylesPhoenix.Component.Avatar (bitstyles_phoenix v2.4.0)

An Avatar component.

Summary

Functions

Renders an avatar component.

Functions

Renders an avatar component.

The avatar component can have medium and large sizes, and it defaults to medium. It accepts a slot for text. Always provide a source and alt. The width and height have 32px default values and can be overidden.

See the bitstyles avatar docs for further info.

Default avatar

iex> assigns = %{}
...> render ~H"""
...> <.ui_avatar src="https://placehold.co/100x100" alt="Username’s avatar"/>
...> """
"""
<div class="u-flex u-items-center">
  <div class="a-avatar">
    <img height="32" width="32" alt="Username’s avatar" src="https://placehold.co/100x100"/>
  </div>
</div>
"""

With extra class

iex> assigns = %{}
...> render ~H"""
...> <.ui_avatar src="https://placehold.co/100x100" class="foo bar" alt="Username’s avatar"/>
...> """
"""
<div class="u-flex u-items-center">
  <div class="a-avatar foo bar">
    <img height="32" width="32" alt="Username’s avatar" src="https://placehold.co/100x100"/>
  </div>
</div>
"""

Large avatar

iex> assigns = %{}
...> render ~H"""
...> <.ui_avatar size="l" src="https://placehold.co/100x100" alt="Username’s avatar" height="46" width="46"/>
...> """
"""
<div class="u-flex u-items-center">
  <div class="a-avatar a-avatar--l">
    <img alt="Username’s avatar" height="46" src="https://placehold.co/100x100" width="46"/>
  </div>
</div>
"""

Avatar with a text

iex> assigns = %{}
...> render ~H"""
...> <.ui_avatar src="https://placehold.co/100x100" alt="Username’s avatar"> Username </.ui_avatar>
...> """
"""
<div class="u-flex u-items-center">
  <div class="a-avatar">
    <img height="32" width="32" alt="Username’s avatar" src="https://placehold.co/100x100"/>
  </div>
  <span class="u-margin-s-left">
    Username
  </span>
</div>
"""