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>

Slots

None

Attributes

name (observed) (required)

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.

src (observed)

The URL to the user's custom avatar image. It will be displayed instead of a random pattern.

pattern (observed)

The type of pattern to display. Currently supported values are "squares" and "triangles".

shape (observed)

The shape of the avatar itself. Supported values are "square" (default), "rounded", and "circle".

Methods

None

Events

None

Styling hooks

None