Notes

To use this component, you need to install the Bit.BlazorUI.Extras(opens in a new tab) nuget package, as described in the Optional steps of the Getting started page.

Each avatar is a BitPersona that shows only its coin, named after its person to the screen readers. It is a button where the group has an OnItemClick, and a link where its item has an Href. The overflow coin names the people it hides, and is a button where the group has an OnOverflowClick.

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

The people of the group, as a picture or the initials of their name. Hover an avatar for the name.

Overflow

MaxDisplayed is the number of avatars drawn before the rest are counted by the overflow coin, whose tooltip lists them. OverflowAriaLabelFormat is its name to the screen readers ({0} is the count, {1} the names).

+4

+3

Presence

The Presence of an item is drawn as a dot on its coin, and read out with its name.

Spread

Spread lays the avatars out side by side, with a gap between them, instead of overlapping them.

+3

Click

OnItemClick makes every avatar a button, and OnOverflowClick makes the overflow coin one, handed the items it stands in for - to open the full list, most of the time.

Clicked:

Hidden:

Links

An item with an Href is a link, to the profile of its person most of the time.

Disabled

A disabled group disables every avatar and the overflow coin; IsDisabled disables one item.

+4

Color

A coin with no picture is given a color picked from the name of its person, so neighbours tell apart; the CoinColor of an item takes its place.

Size

Size is the size of every avatar of the group, the overflow coin included.

+4

Style & Class

Classes and Styles reach the root, the avatars and the overflow coin, and the --bit-AvatarGroup-* variables restyle the defaults: here a larger overlap, and an overflow coin of the primary color.

+3

RTL

Use BitAvatarGroup in right-to-left (RTL).

+2

CSS variables

The public custom properties this component reads off its root, for what no parameter covers.

Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property: set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it, or on the Style of one instance to restyle it - and any instance nested inside it, which inherits the value too; a parameter changes one alone, as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or font-family also reaches the nested instances that do not set it themselves. Leave a variable unset and the component falls back to the theme token beside it.

BitAvatarGroup CSS variables

Name	Default value	Description
--bit-AvatarGroup-overlap	0.2	Share of a coin each avatar covers of the one before it.
--bit-AvatarGroup-gap	spacing(0.5)	Room between the avatars of a Spread group.
--bit-AvatarGroup-ring-color	var(--bit-clr-bg-pri)	Ring that cuts overlapping coins apart, the color of the surface the group sits on.
--bit-AvatarGroup-ring-width	2px	Width of that ring.
--bit-AvatarGroup-overflow-background	var(--bit-clr-bg-ter)	Fill of the overflow coin.
--bit-AvatarGroup-overflow-color	var(--bit-clr-fg-pri)	Count on the overflow coin.
--bit-AvatarGroup-overflow-border-color	var(--bit-clr-brd-sec)	Edge of the overflow coin, which keeps it a coin on any surface.

API

Every parameter, public member, sub-class and enum this component exposes.

BitAvatarGroup parameters

Name	Type	Default value	Description
Classes	BitAvatarGroupClassStyles?	null	Custom CSS classes for the different parts of the avatar group.
Items	IEnumerable<BitAvatarGroupItem>	[]	The people of the group, in the order their avatars are drawn.
MaxDisplayed	int?	null	The number of avatars drawn before the rest are counted by the overflow coin ("+N") instead. By default every item is drawn.
OnItemClick	EventCallback<BitAvatarGroupItem>		The callback for when an avatar is clicked, which makes every avatar a button.
OnOverflowClick	EventCallback<IReadOnlyList<BitAvatarGroupItem>>		The callback for when the overflow coin is clicked, given the items it stands in for. It makes the overflow coin a button.
OverflowAriaLabelFormat	string?	null	The name of the overflow coin to the screen readers, as a composite format string: {0} is the number of the people it hides and {1} their names. Default: "{0} more: {1}".
Size	BitPersonaSize	BitPersonaSize.Size32	The size of the avatars, from Size24 to Size120. Size8, which has no coin, is drawn as Size24.
Spread	bool	false	Lays the avatars out side by side with a gap between them, instead of overlapping each other.
Styles	BitAvatarGroupClassStyles?	null	Custom CSS styles for the different parts of the avatar group.

BitComponentBase parameters

Name	Type	Default value	Description
AriaLabel	string?	null	Gets or sets the accessible label for the component, used by assistive technologies.
Class	string?	null	Gets or sets the CSS class name(s) to apply to the rendered element.
Dir	BitDir?	null	Gets or sets the text directionality for the component's content.
Disabled	bool	false	Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction.
ForceAnimation	bool	false	Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested.
HtmlAttributes	Dictionary<string, object>	new Dictionary<string, object>()	Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name.
Id	string?	null	Gets or sets the unique identifier for the component's root element.
Style	string?	null	Gets or sets the CSS style string to apply to the rendered element.
TabIndex	string?	null	Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility	BitVisibility	BitVisibility.Visible	Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name	Type	Default value	Description
UniqueId	Guid	Guid.NewGuid()	Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement	ElementReference		Gets the reference to the root HTML element associated with this component.

BitAvatarGroupItem properties

Name	Type	Default value	Description
Class	string?	null	The custom CSS classes of the avatar of the item.
CoinColor	BitColor?	null	The color of the coin of the item, which takes the place of the one picked for it from its name.
Data	object?	null	Any data the app wants to keep with the item.
Href	string?	null	The URL the avatar of the item links to, which makes it a link.
ImageUrl	string?	null	The URL of the picture of the item. Without one, or while it loads, the coin shows the initials of the Text.
Initials	string?	null	The initials the coin shows in place of the ones derived from the Text.
IsDisabled	bool	false	Whether the avatar of the item is disabled, which is never clickable nor a link.
Key	string?	null	A unique value to use as the key of the item.
Presence	BitPersonaPresence	BitPersonaPresence.None	The presence status of the item, drawn as a dot on the corner of its coin.
Style	string?	null	The custom CSS styles of the avatar of the item.
Target	string?	null	The target of the link of the item (_blank, _self, ...), for an item with an Href.
Text	string?	null	The name of the item, which names its avatar to the screen readers and gives its coin its initials.
Title	string?	null	The tooltip of the avatar of the item. Default: the Text.

BitAvatarGroupClassStyles properties

Name	Type	Default value	Description
Root	string?	null	Custom CSS classes/styles for the root element of the BitAvatarGroup.
Item	string?	null	Custom CSS classes/styles for each avatar of the BitAvatarGroup.
Overflow	string?	null	Custom CSS classes/styles for the overflow coin of the BitAvatarGroup, the one that counts the hidden avatars.

BitColor enum

Name	Value	Description
Primary	0	Primary general color.
Secondary	1	Secondary general color.
Tertiary	2	Tertiary general color.
Info	3	Info general color.
Success	4	Success general color.
Warning	5	Warning general color.
SevereWarning	6	SevereWarning general color.
Error	7	Error general color.
PrimaryBackground	8	Primary background color.
SecondaryBackground	9	Secondary background color.
TertiaryBackground	10	Tertiary background color.
PrimaryForeground	11	Primary foreground color.
SecondaryForeground	12	Secondary foreground color.
TertiaryForeground	13	Tertiary foreground color.
PrimaryBorder	14	Primary border color.
SecondaryBorder	15	Secondary border color.
TertiaryBorder	16	Tertiary border color.

BitVisibility enum

Name	Value	Description
Visible	0	The content of the component is visible.
Hidden	1	The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed	2	The component is hidden (display:none).

BitDir enum

Name	Value	Description
Ltr	0	Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl	1	Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto	2	Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.

Open an issue

Start a discussion

Edit this page

View the component source

Edit the component