BitstylesPhoenix.Component.Avatar.ui_avatar
You're seeing just the function
ui_avatar
, go back to BitstylesPhoenix.Component.Avatar module for more information.
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>
"""