The Fluxbit::AvatarGroupComponent is a component for rendering a group of avatars that extends Fluxbit::Component. It allows you to display multiple avatars and gravatars in a stacked or overlapping layout, commonly used for showing team members, participants, or contributors.
To start using the avatar group you can use the default way to call the component:
<%= render Fluxbit::AvatarGroupComponent.new do |group| %>
<%= group.with_avatar(placeholder_initials: "AM") %>
<%= group.with_avatar(placeholder_initials: "FX") %>
<% end %>
or you can use the alias (from the helpers):
<%= fx_avatar_group do |group| %>
<%= group.with_avatar(placeholder_initials: "AM") %>
<%= group.with_avatar(placeholder_initials: "FX") %>
<% end %>
The result is:
Options
The AvatarGroupComponent itself doesn’t take specific parameters, but the avatars within the group inherit all avatar configuration options:
| Param | Default | Description |
|---|---|---|
| remove_class: | ”” | Classes to be removed from the default class list. |
| **props | Additional HTML attributes for the group container. |
Avatar Options (for each avatar in the group)
| Param | Default | Description |
|---|---|---|
| color: | nil | Sets the border color of the avatar (:dark, :danger, :gray, :info, :light, :purple, :success, :warning, :pink). |
| placeholder_initials: | false | Text initials to display when no image is provided. |
| status: | false | Status indicator (:online, :busy, :offline, :away). |
| status_position: | :top_right | Position of the status indicator (:top_right, :top_left, :bottom_right, :bottom_left). |
| rounded: | true | Whether the avatar has rounded corners. |
| size: | :md | Size of the avatar (:xs, :sm, :md, :lg, :xl). |
| src: | nil | Image source URL for the avatar. |
| alt: | ”” | Alt text for the avatar image. |
| **props | Additional HTML attributes for individual avatars. |
Slots
The component supports the following slots:
with_avatar: Add avatar components with all avatar options (color, size, initials, etc.).with_gravatar: Add gravatar components with gravatar-specific options.
Examples
Basic avatar group
Avatar group with different colors
Avatar group with different sizes
Avatar group with images
Gravatar group
Mixed avatars and gravatars
Avatar group with status indicators
Adding/Removing classes
Adding other properties
Customization
You can customize the appearance and behavior of this component by passing different initialization parameters and adding custom styles. To do this you can create a initializer file like the:
# /config/initializers/change_avatar_component_defaults.rb
Fluxbit::Config::AvatarComponent.size = :lg # the default is :md
Fluxbit::Config::AvatarComponent.rounded = false # the default is true
Fluxbit::Config::AvatarComponent.status_position = :bottom_right # the default is :top_right
Fluxbit::Config::AvatarComponent.styles[:group] = "flex -space-x-2 rtl:space-x-reverse" # customize group spacing
Fluxbit::Config::AvatarComponent.styles[:stacked] = "ring-4 ring-white dark:ring-gray-800" # customize stacking ring
Dependencies
- Anyicon: Used for rendering avatar placeholder icons.
- Tailwind CSS: Used for styling the component.
- Flowbite: Used for styling.
Styles
<%= html_escape(JSON.pretty_generate(Fluxbit::Config::AvatarComponent.styles)) %>