Midwest Component Library v0.28.2

Previews

No matching results.

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<div class="flex w-full items-center justify-center p-8">
  <div data-controller="midwest-context-menu" class="midwest-context-menu">
    <div class="midwest-context-menu-trigger"
       data-midwest-context-menu-target="trigger"
       data-action="contextmenu->midwest-context-menu#open">
      <div class="flex items-center justify-center w-96 h-56 rounded-lg border-2 border-dashed border-gray-3 dark:border-gray-8 text-gray-8 dark:text-gray-5 select-none">
        Right-click for file actions
      </div>
    </div>
    <ul id="context-menu-e040" role="menu" aria-label="File actions" popover="manual" data-midwest-context-menu-target="menu" data-action="click->midwest-context-menu#select" class="midwest-motion motion-scale motion-blur from-up trigger-hover midwest-dropdown-menu midwest-context-menu-panel">
      <a class="midwest-dropdown-item as-link" role="menuitem" href="#">
        <label class="midwest-label " for="">
          <div class="midwest-icon ">
            <div class="midwest-icon-inner">
              <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Open outline"><title>Open outline</title>
                <path d="M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48M336 64h112v112M224 288L440 72" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path></svg>
            </div>
          </div>
          Open
        </label>
      </a>
      <a class="midwest-dropdown-item as-link" role="menuitem" href="#">
        <label class="midwest-label " for="">
          <div class="midwest-icon ">
            <div class="midwest-icon-inner">
              <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Download outline"><title>Download outline</title>
                <path d="M336 176h40a40 40 0 0140 40v208a40 40 0 01-40 40H136a40 40 0 01-40-40V216a40 40 0 0140-40h40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M176 272l80 80 80-80M256 48v288"></path></svg>
            </div>
          </div>
          Download
        </label>
      </a>
      <span class="midwest-tooltip" data-controller="midwest-tooltip">
        <span id="tooltip-trigger-e048" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-e048" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-e048">
          <a class="midwest-dropdown-item as-link" role="menuitem" href="#">
            <label class="midwest-label " for="">
              <div class="midwest-icon ">
                <div class="midwest-icon-inner">
                  <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Link outline"><title>Link outline</title>
                    <path d="M208 352h-64a96 96 0 010-192h64M304 160h64a96 96 0 010 192h-64M163.29 256h187.42" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="36"></path></svg>
                </div>
              </div>
              Copy link
            </label>
          </a>
        </span>  <span id="tooltip-e048" popover="manual" role="tooltip" style="position-anchor: --tooltip-e048" data-midwest-tooltip-target="popover" class="midwest-motion motion-scale motion-blur from-down trigger-hover midwest-tooltip-popover placement-top">
          Copies a shareable URL
        </span></span>
      <hr class="midwest-dropdown-item as-divider">
      <div id="confirmation-e050" popover="auto" style="position-anchor: --confirmation-e050-button; anchor-name: --confirmation-e050" data-controller="midwest-popover" class="midwest-motion motion-scale motion-blur from-up trigger-hover midwest-popover anchored midwest-confirmation">
        <article data-controller="midwest-card" class="midwest-card min-w-[20rem]">
          <div class="wrap">
            <header>
              <h4>Confirmation</h4>
            </header>
            <section>      
              <p class="w-full text-wrap">Move this file to the trash?</p>
            </section>
            <footer>
              <button type="button" popovertarget="confirmation-e050" autofocus="autofocus" class="midwest-button variant-outline size-default theme-primary" name="button" value="false">
                <span class="midwest-button-content"><span class="translation_missing" title="translation missing: en.midwest.confirmation_component.no, locale: en">No</span></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>
              <a type="button" path="#" class="midwest-button variant-primary size-default theme-primary" name="button" rel="nofollow" data-method="delete" href="#">
                <span class="midwest-button-content"><span class="translation_missing" title="translation missing: en.midwest.confirmation_component.yes, locale: en">Yes</span></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>
              </a>
            </footer>
          </div>
        </article>
      </div>
      <button class="midwest-dropdown-item as-button is-danger" role="menuitem" popovertarget="confirmation-e050" style="anchor-name: --confirmation-e050-button;">
        <label class="midwest-label " for="">
          <div class="midwest-icon ">
            <div class="midwest-icon-inner">
              <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Trash outline"><title>Trash outline</title>
                <path d="M112 112l20 320c.95 18.49 14.4 32 32 32h184c17.67 0 30.87-13.51 32-32l20-320" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M80 112h352"></path><path d="M192 112V72h0a23.93 23.93 0 0124-24h80a23.93 23.93 0 0124 24h0v40M256 176v224M184 176l8 224M328 176l-8 224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path></svg>
            </div>
          </div>
          Move to trash
        </label>
      </button>
    </ul>
  </div>
</div>
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
<div class="flex w-full items-center justify-center p-8">
  <%= midwest_context_menu(aria_label: "File actions") do |m| %>
    <% m.with_trigger do %>
      <div class="flex items-center justify-center w-96 h-56 rounded-lg border-2 border-dashed border-gray-3 dark:border-gray-8 text-gray-8 dark:text-gray-5 select-none">
        Right-click for file actions
      </div>
    <% end %>
    <% m.with_item path: "#", label: "Open" do |i| %>
      <% i.with_icon :"open-outline" %>
    <% end %>
    <% m.with_item path: "#", label: "Download" do |i| %>
      <% i.with_icon :"download-outline" %>
    <% end %>
    <% m.with_item path: "#", label: "Copy link", tooltip: "Copies a shareable URL" do |i| %>
      <% i.with_icon :"link-outline" %>
    <% end %>
    <% m.with_item as: :divider %>
    <% m.with_item as: :button, label: "Move to trash", class: "is-danger",
         confirm: "Move this file to the trash?",
         confirm_args: { path: "#", method: :delete } do |i| %>
      <% i.with_icon :"trash-outline" %>
    <% end %>
  <% end %>
</div>

Links

Items with a path: render as links; items without one render as in-page buttons that emit a click for your own handlers.

No params configured.

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Context Menu/links

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."