Avatar

Overview

Avatar is an element for displaying a user's avatar image. If the user in question has provided a custom avatar, provide it and it will be displayed. If they don't, a nice colored pattern will be generated based on their name. A specific name will always generate the same pattern, so users' avatars will stay static without the need for storing their generated image.

Installation

npm install @patternfly/pfe-avatar

Usage

<pfe-avatar name="Eleanore Stillwagon"></pfe-avatar>
<pfe-avatar name="Libbie Koscinski" shape="rounded" pattern="squares"></pfe-avatar>
<pfe-avatar name="Blanca Rohloff" pattern="triangles"></pfe-avatar>
<pfe-avatar name="Edwardo Lindsey" src="https://clayto.com/2014/03/rgb-webgl-color-cube/colorcube.jpg"></pfe-avatar>

Slots

Attributes

src

The URL to the user's custom avatar image.

It will be displayed instead of a random pattern.

DOM Property

src

Type

string | undefined

Default

unknown

name

The user's name, either given name and family name, or username.

When displaying a pattern, the name will be used to seed the pattern generator.

DOM Property

name

Type

string

Default

''

pattern

The type of pattern to display.

DOM Property

pattern

Type

'squares'|'triangles'

Default

'squares'

shape

The shape of the avatar itself.

DOM Property

shape

Type

'square'|'circle'|'rounded'

Default

'square'

DOM Properties

customColors

Type

unknown

Default

unknown

Methods

Events

CSS Custom Properties

CSS Shadow Parts

canvas

The canvas element for when an image is not provided

img

The image element for when an image URL is provided