Svelte Material UI

Dialogs

Installation

npm i -D @smui/dialog

Demos

Dialog Title

Super awesome dialog body text?

Clicked: Nothing yet.

View dialog/_Simple.svelte on GitHub

Show the source code

Default, initially focused button

Advice

Build something today, even if it sucks.

Response: Nothing yet.

View dialog/_DefaultFocus.svelte on GitHub

Show the source code

Using dialog events instead of button clicks

The Best Dog

Out of all the dogs, which is the best dog?

Response: Nothing yet.

View dialog/_Event.svelte on GitHub

Show the source code

Mandatory dialog (won't close on scrim click or Esc key)

Webpage Troll

Before you continue on this page, you must answer my riddle of age. When Alice was six her brother was half, now Alice is 90, you do the math.

How old is Alice's brother now?

Result: Nothing yet.

View dialog/_Mandatory.svelte on GitHub

Show the source code

No actions, and a very long selection list dialog

Dialog Title

Item #1
Item #2
Item #3
Item #4
Item #5
Item #6
Item #7
Item #8
Item #9
Item #10
Item #11
Item #12
Item #13
Item #14
Item #15
Item #16
Item #17
Item #18
Item #19
Item #20
Item #21
Item #22
Item #23
Item #24
Item #25
Item #26
Item #27
Item #28
Item #29
Item #30
Item #31
Item #32
Item #33
Item #34
Item #35
Item #36
Item #37
Item #38
Item #39
Item #40
Item #41
Item #42
Item #43
Item #44
Item #45
Item #46
Item #47
Item #48
Item #49
Item #50
Item #51
Item #52
Item #53
Item #54
Item #55
Item #56
Item #57
Item #58
Item #59
Item #60
Item #61
Item #62
Item #63
Item #64
Item #65
Item #66
Item #67
Item #68
Item #69
Item #70
Item #71
Item #72
Item #73
Item #74
Item #75
Item #76
Item #77
Item #78
Item #79
Item #80
Item #81
Item #82
Item #83
Item #84
Item #85
Item #86
Item #87
Item #88
Item #89
Item #90
Item #91
Item #92
Item #93
Item #94
Item #95
Item #96
Item #97
Item #98
Item #99
Item #100

Clicked: Nothing yet.

View dialog/_List.svelte on GitHub

Show the source code

Selection dialog

Dialog Title

Radishes
Turnips
Broccoli

Selected: Nothing yet.

View dialog/_Selection.svelte on GitHub

Show the source code

Dialog with sliders

Volumes

Media Volume

Ringtone Volume

Alarm Volume

View dialog/_Sliders.svelte on GitHub

Show the source code

Large, scrollable dialog

A Brief Selection of Placeholder Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

View dialog/_LargeScroll.svelte on GitHub

Show the source code

Fullscreen dialog

Note that dialogs will only be fullscreen on mobile sized screens. On desktop sized screens, it will be shown as a modal dialog.

Terms and Conditions

Response: Nothing yet.

View dialog/_Fullscreen.svelte on GitHub

Show the source code

Dialog over fullscreen dialog

Note that the Material Spec states that the only time a dialog should be placed on top of another dialog is a confirmation dialog showing on top of a fullscreen dialog.

Terms and Conditions

Confirmation

Choice 1
Choice 2

Response: Nothing yet., Selected: Nothing yet.

View dialog/_OverFullscreen.svelte on GitHub

Show the source code

Floating sheet dialog

Floating sheets are dialogs with a close icon button. Having the close icon button is mutually exclusive with having action bar buttons (e.g. cancel and OK buttons). The icon button is absolutely positioned.

View dialog/_Sheet.svelte on GitHub

Show the source code

Too many action buttons for one line

Actions buttons will stack automatically if the dialog is too narrow. If you want them to stack regardless, you can force it.

Use speed bost?

Speed boost opens the extra holes in your device to increase aerodynamics. This allows your device to reach higher maximum speed, increasing your productivity.

Action: Nothing yet.

View dialog/_ManyActions.svelte on GitHub

Show the source code