Avatar

New version v0.0.1 🚀

Interactive avatars and avatar groups for Phoenix and Phoenix LiveView, displaying profile images, initials, or fallback icons, with options to group avatars for a cohesive display.

Installation:

mix mishka.ui.gen.component avatar

Source: View Source

Package: Mishka Chelekom

Tags:

Component Stateless

Overview of the Phoenix and LiveView Avatar Component

The Mishka Chelekom Avatar component allows you to display user profile images, initials, or a fallback icon when no image is available. It's a versatile component that adapts to various user data inputs, ensuring that each profile is represented visually in a consistent and elegant manner. For group displays, the Avatar Group component arranges multiple avatars in a compact, visually appealing layout, making it perfect for team views or social interactions within your application. This module integrates seamlessly with Phoenix and Phoenix LiveView.

This Phoenix LiveView component offers a variety of options to customize your user avatars. You can stack avatars on top of each other as a group, add borders for emphasis, include status indicators, and much more. These features make the avatar component highly flexible, allowing it to fit seamlessly into any design while enhancing the visual representation of user profiles.

By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the components, allowing for flexible design changes.

White color

<.avatar><:icon name="hero-star" /></.avatar>

<.avatar border="extra_small" src="/path/to/iamge" />

<.avatar>SB</.avatar>

Primary color

<.avatar color="primary">
  <:icon name="hero-star" />
</.avatar>

<.avatar border="extra_small" color="primary" src="/path/to/image" />

<.avatar color="primary">SB</.avatar>

Secondary color

<.avatar color="secondary">
  <:icon name="hero-star" />
</.avatar>

<.avatar border="extra_small" color="secondary" src="/path" />

<.avatar color="secondary">SB</.avatar>

Dark color

<.avatar color="dark">
  <:icon name="hero-star" />
</.avatar>

<.avatar border="extra_small" color="dark" src="/path/to/image" />

<.avatar color="dark">SB</.avatar>

Success color

<.avatar color="success">
  <:icon name="hero-star" />
</.avatar>

<.avatar border="extra_small" color="success" src="/path/to/image" />

<.avatar color="success">SB</.avatar>

Warning color

<.avatar color="warning">
  <:icon name="hero-star" />
</.avatar>

<.avatar border="extra_small" color="warning" src="/path/to/image" />

<.avatar color="warning">SB</.avatar>

Danger color

<.avatar color="danger">
  <:icon name="hero-star" />
</.avatar>

<.avatar border="extra_small" color="danger" src="/path/to/image" />

<.avatar color="danger">SB</.avatar>

Info color

<.avatar color="info">
  <:icon name="hero-star" />
</.avatar>

<.avatar border="extra_small" color="info" src="/path/to/image" />

<.avatar color="info">SB</.avatar>

Light color

<.avatar color="light">
  <:icon name="hero-star" />
</.avatar>

<.avatar border="extra_small" color="light" src="/path/to/image" />

<.avatar color="light">SB</.avatar>

Misc color

<.avatar color="misc">
  <:icon name="hero-star" />
</.avatar>

<.avatar border="extra_small" color="misc" src="/path/to/image" />

<.avatar color="misc">SB</.avatar>

Dawn color

<.avatar color="dawn">
  <:icon name="hero-star" />
</.avatar>

<.avatar border="extra_small" color="dawn" src="/path/to/image" />

<.avatar color="dawn">SB</.avatar>

How to display images

By using the src prop and specifying the path to your image, you can easily display any desired image within the Mishka Chelekom Avatar component.

<.avatar alt="alt text of image" color="dawn" src="/path/to/image" />

How to display icons

By using the icon prop and selecting any Hero icon, you can display icons within the Mishka Chelekom Avatar component, providing a customizable alternative to images.

<.avatar>
  <:icon name="hero-star" />
</.avatar>

How to display text

The Mishka Chelekom Avatar component supports displaying user initials when no image is provided. This ensures a consistent and personalized representation for each user, offering a fallback option that maintains the visual structure of the interface.

<.avatar>
  IN
</.avatar>

Size prop in Phoenix Liveview component

The size prop in the Mishka Chelekom Avatar component allows you to control the avatar’s dimensions. You can choose from predefined sizes, such as extra_small, small, medium, large, and extra_large, ensuring that the avatar fits seamlessly into your design. , you can also apply your own custom class or Tailwind CSS class to add custom sizes to the avatar.

<.avatar size="extra_small" color="light">
  TG
</.avatar>

<.avatar size="small" src="path/to/image" />

<.avatar size="medium" src="path/to/image" />

<.avatar size="large">
  <:icon name="hero-users" color="dawn" />
</.avatar>

<.avatar size="extra_large">
  <:icon name="hero-star" color="misc" />
</.avatar>

Border prop in Phoenix Liveview component

The border prop in the Mishka Chelekom Avatar component allows you to control the avatar’s border size. You can choose from predefined values, such as extra_small, small, medium, large, and extra_large , you can also apply your own custom class or Tailwind CSS class to add custom border effects to the avatar.

<.avatar border="extra_small">
  TG
</.avatar>

<.avatar border="small" src="path/to/image" />

<.avatar border="medium" >
  JJ
</.avatar>

<.avatar border="large">
  <:icon name="hero-photo" />
</.avatar>

<.avatar border="extra_large">
  <:icon name="hero-heart" />
</.avatar>

Rounded prop in Phoenix Liveview component

The Rounded prop in the Mishka Chelekom Avatar component allows you to control the avatar’s Rounded size. You can choose from predefined values, such as extra_small, small, medium, large, extra_large, full, and none. , you can also apply your own custom class or Tailwind CSS class to add custom border radius effects to the avatar.

<.avatar rounded="extra_small">
  TG
</.avatar>

<.avatar rounded="small" src="path/to/image" />

<.avatar rounded="medium" >
  JJ
</.avatar>

<.avatar rounded="large">
  <:icon name="hero-photo" />
</.avatar>

<.avatar rounded="extra_large">
  <:icon name="hero-heart" />
</.avatar>

Shadow prop in Phoenix Liveview component

The shadow prop in the Mishka Chelekom Avatar component allows you to control the avatar’s shadow size. You can choose from predefined values, such as extra_small, small, medium, large, extra_large, and none. By using the shadow prop, you can also apply your own custom class or Tailwind CSS class to add custom shadow effects to the avatar.

<.avatar shadow="extra_small">
  TG
</.avatar>

<.avatar shadow="small" src="path/to/image" />

<.avatar shadow="medium" >
  JJ
</.avatar>

<.avatar shadow="large">
  <:icon name="hero-photo" />
</.avatar>

<.avatar shadow="extra_large">
  <:icon name="hero-heart" />
</.avatar>

Display indicator on avatars

You can easily using indicator component to the Mishka Chelekom Avatar component to visually represent status or notifications. By including the indicator tag within the avatar, you can customize the size, color, and position of the indicator. For example, using the top_left attribute places the indicator in the top-left corner of the avatar. This feature allows for a more dynamic user experience, such as showing online statuses, notifications, or alerts alongside profile images or icons. By using the pinging prop on the indicator, you can add a pinging animation to the avatar, making it more dynamic and visually engaging.

<.avatar>
  <:icon name="hero-users" />
  <.indicator size="small" color="danger" top_left />
</.avatar>

<.avatar>
  TG
  <.indicator size="small" color="misc" bottom_left />
</.avatar>

<.avatar src="/path/to/image">
  <:icon name="hero-heart" />
  <.indicator size="small" color="success" top_right pinging />
</.avatar>

Avatar group

The avatar_group component in the Mishka Chelekom library allows you to display multiple avatars together in a compact, visually cohesive layout. This feature is ideal for representing teams, group members, or social interactions. Additionally, you can add a placeholder, like +20, using the avatar tag to represent additional members in the group when space is limited.

+20

<.avatar_group>
  <.avatar
    src="/path/to/image"
    size="large"
    border="extra_small"
    color="misc"
    rounded="full"
  />
  <.avatar
    src="/path/to/image"
    size="large"
    border="extra_small"
    color="misc"
    rounded="full"
  />
  <.avatar
    src="/path/to/image"
    size="large"
    border="extra_small"
    color="misc"
    rounded="full"
  />
  <.avatar
    src="/path/to/image"
    size="large"
    border="extra_small"
    color="misc"
    rounded="full"
  />
  <.avatar size="large" rounded="full" border="medium">
    +20
  </.avatar>
</.avatar_group>

Space prop Avatar group

The space attribute in the Mishka Chelekom Avatar Group component has the following size options: extra_small, small, medium, large, extra_large, and none.

+20

<.avatar_group space="extra_small">
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar>+20</.avatar>
</.avatar_group>

<.avatar_group space="small">
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar>+20</.avatar>
</.avatar_group>

<.avatar_group space="medium">
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar>+20</.avatar>
</.avatar_group>

<.avatar_group space="large">
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar>+20</.avatar>
</.avatar_group>

<.avatar_group space="extra_large">
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar>+20</.avatar>
</.avatar_group>

Avatar component props

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction.
type	string	No	Determines the type of avatar. Supported values: default, placeholder, placeholder_icon.
class	string	No	Custom CSS class for additional styling.
src	string	No	Media link for the avatar image.
color	string	No	Determines the color theme. Supported colors: white, primary, secondary, dark, success, warning, danger, info, light, misc, dawn, transparent.
size	string	No	Determines the overall size of the elements, including padding, font size, and other items. Supported sizes: extra_small, small, medium, large, extra_large.
shadow	string	No	Determines shadow style. Supported values: extra_small, small, medium, large, extra_large, none.
font_weight	string	No	Determines custom class for the font weight. Default is font-normal.
rounded	string	No	Determines the border radius. Supported values: extra_small, small, medium, large, extra_large, full, none.
border	string	No	Determines border style. Default is none.
icon	slot	No	Slot to display an icon. Slot attributes include: name (required, specifies the icon name), class (optional, custom CSS class for styling), icon_class (optional, custom class for the icon), color (optional, determines the icon's color), and size (optional, determines the size of the icon, including padding and font size).

Avatar Group component props

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction.
type	string	No	Specifies the type of avatar group to be rendered. Supported types: default, placeholder, placeholder_icon, nil.
class	string	No	Custom CSS class for additional styling.
space	string	No	Space between items in the avatar group. Supported values: extra_small, small, medium, large, extra_large, none.

Avatar CLI Arguments

Name	Type	Options	Recommended?
`--color`	string	white - primary - secondary - dark - success - warning - danger - info - light - misc - dawn - transparent	Yes
`--size`	string	extra_small - small - medium - large - extra_large	Yes
`--space`	string	extra_small - small - medium - large - extra_large - none	Yes
`--rounded`	string	extra_small - small - medium - large - extra_large - full - none	Yes
`--type`	string	avatar - avatar_group	Yes
`--only`	string	avatar - avatar_group	Yes
`--module`	string	Something	NO