Class ZetaAvatar

An avatar is a visual representation of a user or entity.

Cssproperty

--avatar-color - The color of the avatar

Cssproperty

--avatar-initials-color - The color of the initials

Slot

  • The content of the avatar. Should be an img element, a zeta-icon, or text.

Slot

status - The content of the status slot. Usually used for indicators or badges.

Attr

show-ring - Shows the ring around the avatar.

Attr

show-close - Shows the close icon. ZetaCloseEvent:close - Fired when the close icon is clicked.

Figma

https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/🦓-ZDS---Components?type=design&node-id=20816-388

Storybook

https://zeta-ds.web.app/web/storybook/?path=/docs/avatar--docs

Hierarchy

  • LitElement
    • ZetaAvatar

Other

constructor showClose showRing size?

rendering

render

styles

styles

Other

constructor

  • new ZetaAvatar(): ZetaAvatar

  • Returns ZetaAvatar

showClose

showClose: boolean = false

Shows the close icon.

showRing

showRing: boolean = false

Shows the ring around the avatar.

Optionalsize

size?: AvatarSize

The size of the avatar. Possible values are "xxxs", "xxs", "xs", "s", "m", "l", "xl", "xxl", "xxxl".

rendering

Protectedrender

  • render(): TemplateResult<1>

  • Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html's ChildPart - typically a TemplateResult. Setting properties inside this method will not trigger the element to update.

    Returns TemplateResult<1>

styles

Staticstyles

styles: CSSResult[] = ...

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include 'unsafe-inline' or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page's HTML, before loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

Nocollapse

Settings

Member Visibility

On This Page

Other
rendering
styles