BitstylesPhoenix.Component.Avatar (bitstyles_phoenix v2.2.0) View Source
An Avatar component.
Link to this section Summary
Functions
Renders an avatar component.
Link to this section 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://placekitten.com/100/100" 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://placekitten.com/100/100"/>
</div>
</div>
"""
With extra class
iex> assigns = %{}
...> render ~H"""
...> <.ui_avatar src="https://placekitten.com/100/100" 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://placekitten.com/100/100"/>
</div>
</div>
"""
Large avatar
iex> assigns = %{}
...> render ~H"""
...> <.ui_avatar size="l" src="https://placekitten.com/100/100" 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://placekitten.com/100/100" width="46"/>
</div>
</div>
"""
Avatar with a text
iex> assigns = %{}
...> render ~H"""
...> <.ui_avatar src="https://placekitten.com/100/100" 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://placekitten.com/100/100"/>
</div>
<span class="u-margin-s-left">
Username
</span>
</div>
"""