Dialog
A popup dialog used to convey a message to the user.
Figma Link
- Web Components
- Flutter
Demo
zeta-web v0.12.1
Web Components
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.
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-dialog--docs
Slots
| Name | Description | Type |
|---|---|---|
| default | Body of dialog; typically text. | text |
| confirm | Button used in footer. Must be of type zeta-button. | zeta-button |
| cancel | Button used in footer. Must be of type zeta-button. | zeta-button |
| other | Button used in footer. Must be of type zeta-button. | zeta-button |
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| title | Title of the dialog. | undefined | undefined |
| centered | boolean | false | |
| initialOpen | Whether the modal is initially open. | boolean | false |
| flavor | 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. | 'error' | 'info' | 'warning' | 'default' | 'success' | "default" |
| confirmButtonFlavor | Colour of the confirm button.Possible values are:- primary: Blue background.- positive: Green background.- negative: Red background. | "primary" | "positive" | "negative" | "primary" |
Inherited Attributes
| Name | Description | Type | Default | Inherited From |
|---|---|---|---|---|
| rounded | Whether the component is rounded or sharp.When true, rounded will set the border radius of the first child, and any children with class 'contourable-target' to --radius-minimal.Otherwise, this value will be --radius-none. | boolean | undefined | true | Contourable |
| returnValue | Return value of the dialog. | string | "" | Popup |
| closeOnBarrierClicked | Whether the modal should close when the background barrier is clicked.This is only relevant for modal dialogs, non-modal dialogs do not control their background barrier. | boolean | true | Popup |
| open | Whether component is open or closed. | undefined | undefined | Popup |
CSS Properties
| Name | Description |
|---|---|
| --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. |
Demo
Widgetbook
https://design.zebra.com/flutter/widgetbook/index.html#/?path=components/dialog/zetadialog/dialog
Inheritance
Object > DiagnosticableTree > Widget > StatelessWidget > ZetaStatelessWidget
Constructors
Creates a Zeta Dialog.
ZetaDialog.new({Key? key, ZetaDialogHeaderAlignment headerAlignment = ZetaDialogHeaderAlignment.center, Widget? icon, String? title, required String message, String? primaryButtonLabel, VoidCallback? onPrimaryButtonPressed, String? secondaryButtonLabel, VoidCallback? onSecondaryButtonPressed, String? tertiaryButtonLabel, VoidCallback? onTertiaryButtonPressed, bool? rounded})
Properties
| Name | Description | Type | Features |
|---|---|---|---|
| hashCode | The hash code for this object. | int | no setter inherited |
| headerAlignment | The alignment of the header. | ZetaDialogHeaderAlignment | final |
| icon | The icon to display in the header. | Widget? | final |
| key | Controls how one widget replaces another widget in the tree. | Key? | final inherited |
| message | The message to display in the content. | String | final |
| onPrimaryButtonPressed | The callback for the primary button. | VoidCallback? | final |
| onSecondaryButtonPressed | The callback for the secondary button. | VoidCallback? | final |
| onTertiaryButtonPressed | The callback for the tertiary button. | VoidCallback? | final |
| primaryButtonLabel | The label for the primary button. | String? | final |
| rounded | Sets rounded or sharp border of the containing box and the icon style. | bool? | final inherited |
| runtimeType | A representation of the runtime type of the object. | Type | no setter inherited |
| secondaryButtonLabel | The label for the secondary button. | String? | final |
| tertiaryButtonLabel | The label for the tertiary button. | String? | final |
| title | The title to display in the header. | String? | final |