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
<dialog id="panel-dialog" class="midwest-dialog dialog-variant-panel" 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 items-center justify-between"> <h4>Side Panel</h4> <button data-toggle-dialog="panel-dialog" class="midwest-button variant-default size-default theme-primary" name="button"> <span class="midwest-button-content">Close</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> <div data-controller="midwest-prose" class="midwest-prose prose"> <p>This is a side-panel dialog. It slides in from the right and takes full viewport height.</p> <p>Use it for settings drawers, filters, or detail views.</p> </div> </section> </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="panel-dialog" class="midwest-button variant-default size-default theme-primary" name="button"> <span class="midwest-button-content">Open Panel</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
<%= render Midwest::DialogComponent.new(id: 'panel-dialog', variant: :panel) do %> <%= midwest_card do |card| %> <% card.with_header(class: "flex items-center justify-between") do %> <h4>Side Panel</h4> <%= midwest_button('Close', 'data-toggle-dialog': 'panel-dialog', as: :button) %> <% end %> <% card.with_section do %> <%= midwest_prose do %> <p>This is a side-panel dialog. It slides in from the right and takes full viewport height.</p> <p>Use it for settings drawers, filters, or detail views.</p> <% end %> <% end %> <% end %><% end %><%= midwest_layout do %> <%= midwest_prose do %> <%= midwest_button('Open Panel', 'data-toggle-dialog': 'panel-dialog', as: :button) %> <% end %><% end %>Panel
A side-panel dialog that slides in from the right edge of the viewport. Uses the same open/close mechanism as the default 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/panel
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."