RMWC avatar component
npm install @rmwc/avatarRMWC ADDONAvatars 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'
``jsx`
<>
size="xsmall"
name="Natalia Alianovna Romanova"
/>
size="small"
name="Bruce Banner"
/>
size="medium"
name="Thor Odinson"
/>
size="large"
name="Steve Rogers"
/>
size="xlarge"
name="Tony Stark"
/>
`jsx`
<>
`jsx`
size="large"
name="Natalia Alianovna Romanova"
square
/>
`jsx`
size="large"
contain
name="Google"
square
/>
This is for Avatars that are displayed in a corellated grouping or list.
`jsx`
name="Steve Rogers"
size="large"
interactive
/>
name="Tony Stark"
size="large"
interactive
/>
`jsx`
name="Steve Rogers"
size="large"
interactive
/>
name="Tony Stark"
size="large"
interactive
/>
The avatar component has been designed to work nicely in any of the places you would use an icon.
`jsx`
icon={
name="Steve Rogers"
/>
}
/>
`jsx`
icon={
/>
`jsx`
outlined
icon={
name="Natalia Alianovna Romanova"
square
/>
}
/>
| Name | Type | Description |
|------|------|-------------|
| contain | boolean | Contain the avatar image instead of covering. |interactive
| | boolean | Make the avatar interactive. |name
| | 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
| | IconSizeT | The size of the avatar |square
| | boolean | Make the avatar square. |src
| | string | The url for the image. This gets passed to the Icon component. |
| Name | Type | Description |
|------|------|-------------|
| dense | boolean | Makes the list dense |
| Name | Type | Description |
|------|------|-------------|
| interactive | boolean | Make the avatar interactive. |overflow
| | boolean | Optionally renders a "+" to indicate overlow. |size
| | IconSizeT | The size of the avatar |square
| | boolean | Make the avatar square. |value
| | number` | The number of users. |