Dialog
- Web Components
- Flutter
Demo
zeta-web v0.6.6
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 |
| icon | A zeta-icon element. Size will be restricted based on dialog type. | zeta-icon |
| 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 | Whether header text should be centered. | boolean | false |
| initialOpen | Whether the modal is initially open. | boolean | false |
| size | "small" | "large" | "small" |
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-max-width | Max width of the dialog. Defaults to 480px. |
| --dialog-max-height | Max height of the dialog. Defaults to 80vh. |
Demo
The Zeta Dialog component.
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 |
Methods
| Name | Description | Type | Features |
|---|---|---|---|
| build(BuildContext context) | Describes the part of the user interface represented by this widget. | Widget | override |
| createElement() | Creates a StatelessElement to manage this widget's location in the tree. | StatelessElement | inherited |
| debugDescribeChildren() | Returns a list of DiagnosticsNode objects describing this node's children. | List<DiagnosticsNode> | inherited |
| debugFillProperties(DiagnosticPropertiesBuilder properties) | Add additional properties associated with the node. | void | override |
| noSuchMethod(Invocation invocation) | Invoked when a nonexistent method or property is accessed. | dynamic | inherited |
| paddingAll(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingBottom(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingEnd(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingHorizontal(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingStart(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingTop(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingVertical(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) | Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep. | DiagnosticsNode | inherited |
| toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) | A string representation of this object. | String | inherited |
| toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) | Returns a string representation of this node and its descendants. | String | inherited |
| toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) | Returns a one-line detailed description of the object. | String | inherited |
| toStringShort() | A short, textual description of this widget. | String | inherited |
Figma