@zebra-fed/zeta-web
    Preparing search index...

    Class ZetaDialog

    A reusable dialog or modal window with a customizable interface and functionality.

    A dialog should popup either in response to user action or to get the users attention.

    The dialog can be shown either as a modal or non-modal dialog. Modal is recommended for most uses. To show the dialog, call showModal() or show() method:

      (document.querySelector("#dialog1") as ZetaDialog)?.showModal();

    When shown as a modal, clicking the background barrier will close the modal by default; this can be changed with the closeOnBarrierClicked property.

    • Body of dialog; typically text.

    icon - A zeta-icon element. Size will be restricted based on dialog type.

    confirm - Button used in footer. Must be of type zeta-button.

    cancel - Button used in footer. Must be of type zeta-button.

    other - Button used in footer. Must be of type zeta-button.

    body - Styles the dialog body

    footer - Styles the dialog footer

    header - Styles the dialog header

    --dialog-max-width - Max width of the dialog. Defaults to 480px.

    --dialog-max-height - Max height of the dialog. Defaults to 80vh.

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

    https://design.zebra.com/web/storybook/?path=/docs/components-dialog--docs

    Hierarchy

    • ContourableInterface<this> & LitElement<this> & PopupInterface<this>
      • ZetaDialog
    Index

    Other

    constructor cancelBtn centered closeOnBarrierClicked confirmBtn hide icon initialOpen onBarrierClicked open otherBtn returnValue rounded show showModal size shadowRootOptions styles title

    rendering

    render

    Other

    cancelBtn: NodeList

    Action button 2 (Cancel).

    centered: boolean = false

    Whether header text should be centered.

    closeOnBarrierClicked: boolean
    confirmBtn: NodeList

    Action button 1 (Confirm).

    hide: (returnValue?: string) => Promise<void>
    icon: NodeList
    initialOpen: boolean = false

    Whether the modal is initially open.

    onBarrierClicked: (e: Event) => void
    open: boolean
    otherBtn: NodeList

    Action button 3 (Learn more/Other).

    returnValue: string
    rounded: boolean
    show: () => Promise<void>
    showModal: () => Promise<void>
    size: "small" | "large" = "small"
    shadowRootOptions: { delegatesFocus: boolean } = ...
    styles: CSSResultGroup[] = ...

    rendering

    • 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>

    Settings

    Member Visibility

    On This Page

    Other
    rendering