Packages

live_antd

0.1.0
0.1.0

A set of simple Surface components based on ant-design.

HexDocs

Current section

Files

Jump to
Readme
1 Version
2 Dependencies
0 Dependants
Files
Activity
live_antd lib components avatar.ex
Raw

lib/components/avatar.ex 

defmodule LiveAntd.Components.Avatar do

  @moduledoc """

  Avatars can be used to represent people or objects. It supports images, Icons, or letters.



  ## API



  ### Avatar



    * [ ] `alt`:	This attribute defines the alternative text describing the image	string	-

    * [ ] `gap`:	Letter type unit distance between left and right sides	number	4	4.3.0

    * [ ] `icon`:	Custom icon type for an icon avatar	ReactNode	-

    * [ ] `shape`:	The shape of avatar	circle | square	circle

    * [ ] `size`:	The size of the avatar	number | large | small | default | { xs: number, sm: number, ...}	default	4.7.0

    * [ ] `src`:	The address of the image for an image avatar or image element	string | ReactNode	-	ReactNode: 4.8.0

    * [ ] `srcSet`:	A list of sources to use for different screen resolutions	string	-

    * [ ] `onError`:	Handler when img load error, return false to prevent default fallback behavior	() => boolean



  ### Avatar.Group



    * [ ] `maxCount`:	Max avatars to show	number	-

    * [ ] `maxPopoverPlacement`:	The placement of excess avatar Popover	top | bottom	top

    * [ ] `maxStyle`:	The style of excess avatar style	CSSProperties

    * [ ] `size`:	The size of the avatar



  ## Example



    <Avatar size={64} icon={<UserOutlined />} />



  """



  use Surface.Component



  def render(assigns) do

    ~H"""

    <span class="ant-avatar ant-avatar-circle ant-avatar-icon" style="width: 64px; height: 64px; line-height: 64px; font-size: 32px;">

      <span role="img" aria-label="user" class="anticon anticon-user">

        <svg viewBox="64 64 896 896" focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg>

      </span>

    </span>

    """

  end

end