@fw-components/fw-avatar

fw-avatar-group

FW Avatar Group component is used to show a list of items as avatars. It also displays a detailed list on clicking any avatar.

Installation

npm i @fw-components/fw-avatar

Example usage

let users = [{name: "Richard", company: "PiedPiper"},{name: "Dinesh", company: "PiedPiper"},{name: "Jared", company: "PiedPiper"}]
<fw-avatar-group .items=${users} nameAttribute="name" secondaryAttribute="company"></fw-avatar-group>

API

Properties/Attributes

Name	Type	Default	Description
items	Array	[]	data as Array of objects
nameAttribute	String	"userName"	key in item used to display initials on avatar and title on list
secondaryAttribute	String	null	key in item used to display secondary line for the item in the list
maxCount	Number	5	max count of avatars to be displayed in the group
header	String	"Members"	header of the list
avatarBackground	String	custom hsl for item[nameAttribute]	background for the avatar
primaryAction*	Object	null	action to be displayed on top of list
showSearchBar	Boolean	false	show search bar for the items
emptyStateMessage	String	null	message to be displayed when state is empty while searching
emptyStateAction**	Object	null	action to be displayed when state is empty while searching
secondaryAction**	Object	null	action to be displayed at bottom of list
absolute	Boolean	false	if true, list is positioned absolute on devices with width < 767px

*primaryAction => {title : 'Title for the action button', icon : 'mwc-icon to show next to button, default to add_circle'}

**empty state/secondary action => {title : 'Title for the action button', closeDialog : 'boolean to close the dialog on click'}

Methods

None

Events

Event Name	Detail	Description
item-clicked	{ item }	Fired when an item is clicked from the list, includes the item as detail
primary-action-clicked	null	Fired when primary action is clicked
secondary-action-clicked	null	Fired when secondary action is clicked
empty-state-action-clicked	{ value : "search bar value" }	Fired when empty state action is clicked, includes value in the search bar as detail

CSS Custom Properties

fw-avatar-group uses fw-avatar internally

Global Custom Properties

Name	Description
dark-color	color of text on avatar
light-color	border of overlapping avatar

fw-avatar

FW Avatar component is used to show an avatar

Installation

npm i @fw-components/fw-avatar

Example usage

<fw-avatar type="initials" name="Richard Hendricks"></fw-avatar>

API

Properties/Attributes

Name	Type	Default	Description
name	String	null	name used for initials
title	String	name	title visible on hover, defaults to name
type	String	none	type of avatar initials/image
color	String	custom hsl for name or 'plum'	color of avatar
imgSrc	String	null	src of image when type of avatar is image

Methods

None

Events

None

CSS Custom Properties

Name	Default	Description
avatar-color	white	text color on avatar
avatar-size	30px	size of avatar
border	none	border of avatar

Global Custom Properties

Name	Description
font-family	font-family for text on avatar