Basic
Dialog body text
Action 2
Action 1
Actions
By setting the dialogAction="my-action" attribute on any element projected into
mwc-dialog, you can close the dialog by clicking on that element. The
dialog will then fire a non-bubbling "closing" event and a non-bubbling
"closed" event with an event detail of {action: "my-action"}
This has action
this does not
Scrollable
Really long text will scroll. Really long text will scroll. Really long text will scroll. Really
long text will scroll. Really long text will scroll. Really long text will scroll. Really long text
will scroll. Really long text will scroll. Really long text will scroll. Really long text will
scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll.
Really long text will scroll. Really long text will scroll. Really long text will scroll. Really
long text will scroll. Really long text will scroll. Really long text will scroll. Really long text
will scroll. Really long text will scroll. Really long text will scroll. Really long text will
scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll.
Really long text will scroll. Really long text will scroll. Really long text will scroll. Really
long text will scroll. Really long text will scroll. Really log text will scroll. Really log text
will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll.
Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log
text will scroll. Really log text will scroll. Really log text will scroll. Really log text will
scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll.
Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log
text will scroll. Really log text will scroll. Really log text will scroll. Really log text will
scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll.
Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log
text will scroll. Really log text will scroll. Really log text will scroll. Really log text will
scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll.
Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log
text will scroll. Really log text will scroll. Really log text will scroll. Really log text will
scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll.
Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log
text will scroll. Really log text will scroll. Really log text will scroll. Really log text will
scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll.
Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log
text will scroll. Really log text will scroll. Really log text will scroll. Really log text will
scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll.
Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log
text will scroll. Really log text will scroll. Really log text will scroll. Really log text will
scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll.
Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log
text will scroll. Really log text will scroll. Really log text will scroll. Really log text will
scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll.
Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log
text will scroll. Really log text will scroll. Really log text will scroll. Really log text will
scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll.
Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log
text will scroll. Really log text will scroll. Really log text will scroll. Really log text will
scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll.
Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log
text will scroll. Really log text will scroll. Really log text will scroll. Really log text will
scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll.
Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log
text will scroll. Really log text will scroll. Really log text will scroll. Really log text will
scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll.
Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log
text will scroll. Really log text will scroll. Really log text will scroll. Really log text will
scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll.
Really log text will scroll. Really log text will scroll. Really log text will scroll.
Close this!
Hide Actions
If you don't have actions, you may want to set the "hideActions" property.
This property will remove extra whitespace at the bottom of this dialog.
This button will toggle that whitespace:
Toggle hideActions
mwc-dialog.hideActions is currently:
false
Styled
These are the current styles applied to this dialog
--mdc-theme-surface: orange;
--mdc-dialog-scrim-color: rgba(35, 47, 52, .32);
--mdc-dialog-heading-ink-color: #232F34;
--mdc-dialog-content-ink-color: #232F34;
--mdc-dialog-scroll-divider-color: transparent;
--mdc-dialog-min-width: 500px;
--mdc-dialog-max-width: 700px;
--mdc-dialog-max-height: 350px;
--mdc-dialog-shape-radius: 0px;
/* color buttons */
--mdc-theme-primary: green;
Too stylish for me!
Stacked
This is what happens when you set the stacked property on mwc-dialog.
Notice that the primary action is now on top.
Primary
Secondary
Initial Focus
In this example we set "dialogInitialFocus" on the mwc-textfield.
When this dialog opens, it is auto-focused.
Primary
Secondary