14.3.5 • Published 9 months ago

@rmwc/avatar v14.3.5

Weekly downloads
3,234
License
MIT
Repository
github
Last release
9 months ago

Avatars RMWC ADDON

Avatars are virtual representations of users in a system.

  • Module @rmwc/avatar
  • Import styles:
    • Using CSS Loader
      • import '@rmwc/avatar/styles';
    • Or include stylesheets
      • '@rmwc/avatar/avatar.css'
      • '@rmwc/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

NameTypeDescription
containbooleanContain the avatar image instead of covering.
interactivebooleanMake the avatar interactive.
namestringThe name of the user. This will get converted to initials and set the hover title.
rippleRipplePropTAdds a ripple effect to the component
sizeIconSizeTThe size of the avatar
squarebooleanMake the avatar square.
srcstringThe url for the image. This gets passed to the Icon component.

AvatarGroup

A container for groups of Avatars

Props

NameTypeDescription
densebooleanMakes the list dense

AvatarCount

An Avatar count for displaying list overflow.

Props

NameTypeDescription
interactivebooleanMake the avatar interactive.
overflowbooleanOptionally renders a "+" to indicate overlow.
sizeIconSizeTThe size of the avatar
squarebooleanMake the avatar square.
valuenumberThe number of users.
14.3.5

9 months ago

14.3.4

10 months ago

14.3.3

10 months ago

14.2.7

1 year ago

14.2.8

1 year ago

14.2.9

1 year ago

14.2.5

1 year ago

14.2.6

1 year ago

14.3.0

12 months ago

14.3.1

12 months ago

14.3.2

11 months ago

14.2.2

1 year ago

14.2.0

1 year ago

14.2.1

1 year ago

14.1.5

1 year ago

14.1.4

1 year ago

14.1.3

1 year ago

14.1.2

1 year ago

14.1.1

1 year ago

14.1.0

1 year ago

14.0.12

1 year ago

14.0.11

1 year ago

14.0.10

1 year ago

14.0.9

1 year ago

14.0.8

1 year ago

14.0.7

1 year ago

14.0.6

1 year ago

14.0.5

2 years ago

14.0.4

2 years ago

14.0.1-alpha.0

2 years ago

14.0.2-alpha.3

2 years ago

14.0.2-alpha.0

2 years ago

14.0.2-alpha.1

2 years ago

14.0.2-alpha.6

2 years ago

14.0.2-alpha.7

2 years ago

14.0.2-alpha.4

2 years ago

14.0.2-alpha.5

2 years ago

14.0.0

2 years ago

14.0.1

2 years ago

14.0.0-alpha.0

2 years ago

14.0.2

2 years ago

14.0.3

2 years ago

8.0.8

2 years ago

8.0.7

2 years ago

8.0.6

2 years ago

8.0.5

2 years ago

8.0.4

3 years ago

8.0.3

3 years ago

8.0.2

3 years ago

8.0.1

3 years ago

8.0.0

3 years ago

7.0.3

3 years ago

7.0.2

3 years ago

7.0.1

3 years ago

7.0.0

3 years ago

6.1.4

5 years ago

6.1.3

5 years ago

6.1.2

5 years ago

6.1.1

5 years ago

6.0.14

5 years ago

6.0.13

5 years ago

6.0.12

5 years ago

6.0.11

5 years ago

6.0.10

5 years ago

6.0.9

5 years ago

6.0.5

5 years ago

6.0.4

5 years ago

6.0.3

5 years ago

6.0.1

5 years ago

6.0.0

5 years ago

6.0.2

5 years ago

6.0.0-rc.1

5 years ago

6.0.0-rc.4

5 years ago

6.0.0-rc.3

5 years ago

6.0.0-rc.2

5 years ago

6.0.0-rc.0

5 years ago

6.0.0-alpha.16

5 years ago

6.0.0-alpha.14

5 years ago

6.0.0-alpha.15

5 years ago

6.0.0-alpha.13

5 years ago

6.0.0-alpha.12

5 years ago

6.0.0-alpha.11

5 years ago

6.0.0-alpha.7

6 years ago

5.7.2

6 years ago

6.0.0-alpha.5

6 years ago

6.0.0-alpha.6

6 years ago

6.0.0-alpha.3

6 years ago

5.7.0

6 years ago

5.6.0

6 years ago

5.5.2

6 years ago

5.5.1

6 years ago

5.5.0

6 years ago

5.4.3

6 years ago

5.4.2

6 years ago

5.4.1

6 years ago

5.4.0

6 years ago

5.3.1

6 years ago

5.3.0

6 years ago

5.2.2

6 years ago

5.2.1

6 years ago

5.2.0

6 years ago

5.2.0-alpha.0

6 years ago

5.1.8

6 years ago

5.1.7

6 years ago

5.1.6

6 years ago

5.1.5

6 years ago

5.1.4

6 years ago

5.1.3

6 years ago

5.1.2

6 years ago

5.1.1

6 years ago

5.1.0

6 years ago

5.0.30-rc.0

6 years ago

5.0.29-rc.0

6 years ago

5.0.28-rc.0

6 years ago

5.0.27-rc.0

6 years ago

5.0.26-rc.0

6 years ago

5.0.25-rc.0

6 years ago

5.0.24-rc.0

6 years ago

5.0.23-rc.0

6 years ago

5.0.23-alpha.0

6 years ago

5.0.22-alpha.0

6 years ago

5.0.21-alpha.0

6 years ago

5.0.20-alpha.0

6 years ago

5.0.19-alpha.0

6 years ago