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

    Class ZetaDialog

    A popup dialog used to convey a message to the user.

    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.

    When the confirm button is clicked, the dialog will close. To change this behavior, you can set the button's type attribute to submit.

    • Body of dialog; typically text.

    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-width - Width of the dialog. Defaults to 480px.

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

    --dialog-title-font-size - Font size of the dialog title. Defaults to 1.25rem.

    --dialog-title-line-height - Line height of the dialog title. Defaults to 1.5rem.

    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 confirmButtonFlavor flavor hide initialOpen onBarrierClicked open otherBtn returnValue rounded show showModal shadowRootOptions styles title

    rendering

    render

    Other

    cancelBtn: NodeList

    Action button 2 (Cancel).

    centered: boolean = false

    Whether header text should be centered. Feature is deprecated.

    closeOnBarrierClicked: boolean
    confirmBtn: NodeList

    Action button 1 (Confirm).

    confirmButtonFlavor: "primary" | "positive" | "negative" = "primary"

    Colour of the confirm button.

    Possible values are:

    • primary: Blue background.
    • positive: Green background.
    • negative: Red background.
    'primary'
    flavor: DialogFlavor = "default"

    What type of dialog box to show. This will change the icon and icon colour shown in the header.

    Possible values are:

    • default: Shows black block icon.
    • info: Shows purple info icon.
    • success: Shows green verified icon.
    • warning: Shows yellow warning icon.
    • error: Shows red error icon.
    'default'
    hide: (returnValue?: string) => Promise<void>
    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>
    shadowRootOptions: { delegatesFocus: boolean } = ...
    styles: CSSResultGroup[] = ...
    • get title(): string

      Title of the dialog.

      Returns string

    • set title(value: string): void

      The HTMLElement.title property represents the title of the element: the text usually displayed in a 'tooltip' popup when the mouse is over the node.

      MDN Reference

      Parameters

      • value: string

      Returns void

    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