@pmwcs/avatar

Avatars (PMWCS Addon)

Avatars are virtual representations of users in a system.

• Module @pmwcs/avatar
• Import styles:
  • Using CSS Loader
    • import '@pmwcs/avatar/styles';
  • Or include stylesheets
    • '@pmwcs/avatar/avatar.css'
    • '@pmwcs/icon/icon.css'
    • '@material/ripple/dist/mdc.ripple.css'

<>
  <Avatar
    src="images/avatars/blackwidow.png"
    size="xsmall"
    name="Natalia Alianovna Romanova"
  />
  <Avatar
    src="images/avatars/hulk.png"
    size="small"
    name="Bruce Banner"
  />
  <Avatar
    src="images/avatars/thor.png"
    size="medium"
    name="Thor Odinson"
  />
  <Avatar
    src="images/avatars/captainamerica.png"
    size="large"
    name="Steve Rogers"
  />
  <Avatar
    src="images/avatars/ironman.png"
    size="xlarge"
    name="Tony Stark"
  />
</>

<>
  <Avatar name="Natalia Alianovna Romanova" size="xsmall" />
  <Avatar name="Bruce Banner" size="small" />
  <Avatar name="Thor Odinson" size="medium" />
  <Avatar name="Steve Rogers" size="large" />
  <Avatar name="Tony Stark" size="xlarge" />
</>

<Avatar
  src="images/avatars/blackwidow.png"
  size="large"
  name="Natalia Alianovna Romanova"
  square
/>

<Avatar
  src="images/avatars/google.svg"
  size="large"
  contain
  name="Google"
  square
/>

Avatar Groups

This is for Avatars that are displayed in a corellated grouping or list.

<AvatarGroup>
  <Avatar
    src="images/avatars/captainamerica.png"
    name="Steve Rogers"
    size="large"
    interactive
  />
  <Avatar
    src="images/avatars/ironman.png"
    name="Tony Stark"
    size="large"
    interactive
  />
  <AvatarCount size="large" value={12} interactive />
</AvatarGroup>

<AvatarGroup dense>
  <Avatar
    src="images/avatars/captainamerica.png"
    name="Steve Rogers"
    size="large"
    interactive
  />
  <Avatar
    src="images/avatars/ironman.png"
    name="Tony Stark"
    size="large"
    interactive
  />
  <AvatarCount size="large" overflow value={4} interactive />
</AvatarGroup>

Usage with other components

The avatar component has been designed to work nicely in any of the places you would use an icon.

<Button
  label="Enlist now!"
  icon={
    <Avatar
      src="images/avatars/captainamerica.png"
      name="Steve Rogers"
    />
  }
/>

<Chip
  label="Hulk Smash"
  icon={<Avatar src="images/avatars/hulk.png" name="Bruce Banner" />}
/>

<TextField
  label="Message Natalia..."
  outlined
  icon={
    <Avatar
      src="images/avatars/blackwidow.png"
      name="Natalia Alianovna Romanova"
      square
    />
  }
/>

Avatar

An Avatar component for displaying users in a system.

Props

Name	Type	Description
contain	undefined | false | true	Contain the avatar image instead of covering.
interactive	undefined | false | true	Make the avatar interactive.
name	undefined | string	The name of the user. This will get converted to initials and set the hover title.
ripple	RipplePropT	Adds a ripple effect to the component
size	PMWCS.IconSizeT	The size of the avatar
square	undefined | false | true	Make the avatar square.
src	undefined | string	The url for the image. This gets passed to the Icon component.

AvatarGroup

A container for groups of Avatars

Props

Name	Type	Description
dense	undefined | false | true	Makes the list dense

AvatarCount

An Avatar count for displaying list overflow.

Props

Name	Type	Description
interactive	undefined | false | true	Make the avatar interactive.
overflow	undefined | false | true	Optionally renders a "+" to indicate overlow.
size	PMWCS.IconSizeT	The size of the avatar
square	undefined | false | true	Make the avatar square.
value	number	The number of users.