packages/eui/packages/components/eui-avatar/eui-avatar.component.ts
Component for displaying avatars in the EUI design system.
An avatar is a visual representation of a user or entity and can contain an image, text, or an icon. This component serves as the container for various avatar subcomponents, such as EuiAvatarImage, EuiAvatarText, EuiAvatarIcon, and EuiAvatarBadge.
The component supports various customizations, including colors (via state directives), sizes, shapes, and appearance modifiers.
changeDetection | ChangeDetectionStrategy.OnPush |
HostDirectives |
BaseStatesDirective
Inputs : euiPrimary euiSecondary euiSuccess euiInfo euiWarning euiDanger euiAccent euiVariant euiSizeXS euiSizeS euiSizeL euiSizeXL euiSize2XL euiSizeVariant
|
selector | div[euiAvatar], span[euiAvatar], eui-avatar |
imports |
EUI_ICON
|
templateUrl | ./eui-avatar.component.html |
styleUrl | ./eui-avatar.scss |
Properties |
Inputs |
HostBindings |
Accessors |
aria-label |
Type : string | null
|
Default value : 'avatar'
|
ARIA label for accessibility |
e2eAttr |
Type : string
|
Default value : 'eui-avatar'
|
Data attribute for E2E testing |
hasNoBackground |
Type : boolean
|
Default value : false
|
Whether the avatar should have no background color |
hasShadow |
Type : boolean
|
Default value : false
|
Whether the avatar should have a shadow effect |
isFlat |
Type : boolean
|
Default value : false
|
Whether the avatar should have a flat appearance |
isReverse |
Type : boolean
|
Default value : false
|
Whether the avatar reverse layout with content |
isShapeSquare |
Type : boolean
|
Default value : false
|
Whether the avatar shape should be square instead of circular |
attr.role |
Type : string
|
Default value : 'status'
|
ARIA role for accessibility |
class |
Type : string
|
Gets the CSS classes to be applied to the host element. Combines base classes with modifier classes. |
role |
Type : string
|
Default value : 'status'
|
Decorators :
@HostBinding('attr.role')
|
ARIA role for accessibility |
cssClasses |
getcssClasses()
|
Gets the CSS classes to be applied to the host element. Combines base classes with modifier classes.
Returns :
string
|