Class ZetaAppbar

Appbars provide content and actions related to the current screen.

Slot

  • The content of the appbar.

Slot

leading - The content to be placed at the start of the appbar.

Slot

trailing - The content to be placed at the end of the appbar.

Figma

https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/🦓-ZDS---Components?node-id=229-37&node-type=canvas&m=dev

Storybook

https://zeta-ds.web.app/web/storybook/index.html?path=/docs/appbar--docs

Hierarchy

  • LitElement
    • ZetaAppbar

Other

constructor centered extended getTitle

rendering

render

styles

styles

Other

constructor

  • new ZetaAppbar(): ZetaAppbar

  • Returns ZetaAppbar

centered

centered: boolean = false

Centers the content of the title.

extended

extended: boolean = false

Places the title below the main appbar.

getTitle

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