x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<dialog id="nice-dialog" class="midwest-dialog " data-controller="midwest-dialog" data-midwest-dialog-reset-frame-value="false"> <div class="dialog-content dialog-animate dialog-width-default dialog-height-auto dialog-position-top" data-action="turbo:submit-end->midwest-dialog#hide"> <article data-controller="midwest-card" class="midwest-card"> <div class="wrap"> <header class="flex"> <h4>Header</h4> <button data-toggle-dialog="nice-dialog" class="midwest-button variant-default size-default theme-primary" name="button"> <span class="midwest-button-content">Close Dialog</span> <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none"> <div class="midwest-loading-icon-inner"> <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL --> <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true"> <circle cx="15" cy="15" r="15"> <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate> <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate> </circle> <circle cx="60" cy="15" r="9" fill-opacity="0.3"> <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate> <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate> </circle> <circle cx="105" cy="15" r="15"> <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate> <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate> </circle> </svg> </div> </div> </button> </header> <section> <h4>Section</h4> <button class="bg-theme-6 hover:bg-theme-6 text-white font-bold py-1 px-3 rounded">Neat</button> </section> <footer class="flex"> <h4>Footer</h4> <button class="bg-theme-6 hover:bg-theme-6 text-white font-bold py-1 px-3 rounded">Neat</button> </footer> </div> </article> </div></dialog><div class="midwest-layout size-default padding-default type-default" style="--layout-grid-gap: 2rem; --layout-sidebar-width: 350px"> <div class="wrapper"> <div data-controller="midwest-prose" class="midwest-prose prose"> <button data-toggle-dialog="nice-dialog" class="midwest-button variant-default size-default theme-primary" name="button"> <span class="midwest-button-content">Open Dialog</span> <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none"> <div class="midwest-loading-icon-inner"> <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL --> <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true"> <circle cx="15" cy="15" r="15"> <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate> <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate> </circle> <circle cx="60" cy="15" r="9" fill-opacity="0.3"> <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate> <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate> </circle> <circle cx="105" cy="15" r="15"> <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate> <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate> </circle> </svg> </div> </div> </button> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<%= midwest_dialog(id: "nice-dialog") do %> <%= midwest_card do |card| %> <% card.with_header(class: "flex") do %> <h4>Header</h4> <%= midwest_button("Close Dialog", "data-toggle-dialog": "nice-dialog", as: :button) %> <% end %> <% card.with_section do %> <h4>Section</h4> <button class="bg-theme-6 hover:bg-theme-6 text-white font-bold py-1 px-3 rounded">Neat</button> <% end %> <% card.with_footer(class: "flex") do %> <h4>Footer</h4> <button class="bg-theme-6 hover:bg-theme-6 text-white font-bold py-1 px-3 rounded">Neat</button> <% end %> <% end %><% end %><%= midwest_layout do %> <%= midwest_prose do %> <%= midwest_button("Open Dialog", "data-toggle-dialog": "nice-dialog", as: :button) %> <% end %><% end %>Default
This is the minimum code needed to make a dialog.
No params configured.
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Dialog/default
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."