SiAvatarComponent documentation¶

selector

si-avatar

Name	Type	Default	Description
altText ¶	`string`		The `alt` text for image, `title` for other modes.
autoColor ¶	`boolean`	`false`	Automatically calculates the background color. If set, color will be ignored.
color ¶	`number`	`undefined`	The desired color index from $element-data-* color tokens. This can be set to any kind of positive integer that is then mapped to a color index. A better way to set a pseudo-random color is to set * `autoColor` to `true` .
icon ¶	`string`		Icon name when using an icon.
imageUrl ¶	`string`		Image src URL when using an image.
initials ¶	`string`		Initials to be displayed as default avatar if no `icon` or `imageUrl` are provided. If also no initials are provided, they will be automatically calculated from the `altText` . The value will be used to calculate the background color when `autoColor` is true.
size ¶	`AvatarSize`	`'regular'`	Size of the component.
status ¶	`EntityStatusType`		The status (success, info, warning, caution, danger, critical, pending, progress) to be visualized.
statusAriaLabel ¶	`TranslatableString`		aria-label for status

AvatarSize (`"tiny"` \| `"xsmall"` \| `"small"` \| `"regular"` \| `"large"` \| `"xlarge"`)¶ Type alias

EntityStatusType (`ExtendedStatusType` \| `"pending"` \| `"progress"`)¶ Type alias

TranslatableString (`string` & `Translatable`)¶ Type alias Represents a translatable string. This can either be a translation key, e.g. `ACTIONS.EDIT` that will be automatically translated when displayed on the UI or a pre-translated string, e.g. `Edit` . Equivalent to a normal string in usage and functionality.

ExtendedStatusType (`StatusType` \| `"unknown"`)¶ Type alias

Translatable ¶ import imported from @siemens/element-translate-ng

StatusType (`"success"` \| `"info"` \| `"warning"` \| `"danger"` \| `"caution"` \| `"critical"`)¶ Type alias

color `InputSignalWithTransform`<(`undefined` \| `number`), `unknown`> = `undefined`¶ Property ▶ The desired color index from $element-data-* color tokens. This can be set to any kind of positive integer that is then mapped to a color index. A better way to set a pseudo-random color is to set autoColor to `true` .

Except where otherwise noted, content on this site is licensed under MIT License.