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
122
123
124
125
126
127
128
129
130
<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 anywhere in this area
      </div>
    </div>
    <ul id="context-menu-cc40" role="menu" aria-label="Context menu" 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">
      <button class="midwest-dropdown-item as-button" role="menuitem">
        <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="Cut outline"><title>Cut outline</title>
                <circle cx="104" cy="152" r="56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></circle><circle cx="104" cy="360" r="56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></circle><path d="M157 175l-11 15 37 15s3.46-6.42 7-10z" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="32"></path><path d="M154.17 334.43L460 162c-2.5-6.7-28-12-64-4-29.12 6.47-121.16 29.05-159.16 56.05C205.85 236.06 227 272 192 298c-25.61 19-44.43 22.82-44.43 22.82zM344.47 278.24L295 306.67c14.23 6.74 65.54 33.27 117 36.33 14.92.89 30 .39 39-6z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"></path><circle cx="256" cy="240" r="32" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"></circle></svg>
            </div>
          </div>
          Cut<span class="midwest-dropdown-item-command">        <kbd class="midwest-kbd">⌘X</kbd>
          </span>
        </label>
      </button>
      <button class="midwest-dropdown-item as-button" role="menuitem">
        <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="Copy outline"><title>Copy outline</title>
                <rect x="128" y="128" width="336" height="336" rx="57" ry="57" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></rect><path d="M383.5 128l.5-24a56.16 56.16 0 00-56-56H112a64.19 64.19 0 00-64 64v216a56.16 56.16 0 0056 56h24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path></svg>
            </div>
          </div>
          Copy<span class="midwest-dropdown-item-command">        <kbd class="midwest-kbd">⌘C</kbd>
          </span>
        </label>
      </button>
      <button class="midwest-dropdown-item as-button" role="menuitem">
        <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="Clipboard outline"><title>Clipboard outline</title>
                <path d="M336 64h32a48 48 0 0148 48v320a48 48 0 01-48 48H144a48 48 0 01-48-48V112a48 48 0 0148-48h32" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path><rect x="176" y="32" width="160" height="64" rx="26.13" ry="26.13" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></rect></svg>
            </div>
          </div>
          Paste<span class="midwest-dropdown-item-command">        <kbd class="midwest-kbd">⌘V</kbd>
          </span>
        </label>
      </button>
      <hr class="midwest-dropdown-item as-divider">
      <button class="midwest-dropdown-item as-button" role="menuitem">
        <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="Pencil outline"><title>Pencil outline</title>
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M364.13 125.25L87 403l-23 45 44.99-23 277.76-277.13-22.62-22.62zM420.69 68.69l-22.62 22.62 22.62 22.63 22.62-22.63a16 16 0 000-22.62h0a16 16 0 00-22.62 0z"></path></svg>
            </div>
          </div>
          Rename
        </label>
      </button>
      <button class="midwest-dropdown-item as-nested" role="menuitem" aria-haspopup="menu" popovertarget="dropdown-cc48" style="anchor-name: --dropdown-cc48;">
        <label class="midwest-label " for="">
          Share
        </label>
        <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="Menu"><title>Menu</title>
              <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="48" d="M88 152h336M88 256h336M88 360h336"></path></svg>
          </div>
        </div>
      </button>
      <ul id="dropdown-cc48" role="menu" popover="auto" style="position-anchor: --dropdown-cc48;" data-controller="midwest-dropdown" data-dropdown-computed-positioning-value="false" data-dropdown-align-value="right-end" class="midwest-motion motion-scale motion-blur from-left trigger-hover midwest-dropdown-menu align--right-end midwest-dropdown-submenu">
        <button type="button" role="menuitem" popovertarget="dropdown-cc48" popovertargetaction="hide" aria-label="Close menu" class="midwest-button variant-default size-default theme-primary midwest-dropdown-close" name="button">
          <span class="midwest-button-content">
            <div class="midwest-icon text-2xl">
              <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="Close"><title>Close</title>
                  <path d="M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z"></path></svg>
              </div>
            </div>
          </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>
        <label class="midwest-label " for="">
          <a class="midwest-dropdown-item as-link" role="menuitem" href="#">
            <label class="midwest-label " for="">
              Email
            </label>
          </a>
        </label>
        <label class="midwest-label " for="">
          <a class="midwest-dropdown-item as-link" role="menuitem" href="#">
            <label class="midwest-label " for="">
              Copy link
            </label>
          </a>
        </label>
      </ul>
      <hr class="midwest-dropdown-item as-divider">
      <button class="midwest-dropdown-item as-button is-danger" role="menuitem">
        <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>
          Delete<span class="midwest-dropdown-item-command">        <kbd class="midwest-kbd">⌫</kbd>
          </span>
        </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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<div class="flex w-full items-center justify-center p-8">
  <%= midwest_context_menu 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 anywhere in this area
      </div>
    <% end %>
    <% m.with_item as: :button, label: "Cut" do |i| %>
      <% i.with_icon :"cut-outline" %>
      <% i.with_command do %>
        <%= midwest_kbd { "⌘X" } %>
      <% end %>
    <% end %>
    <% m.with_item as: :button, label: "Copy" do |i| %>
      <% i.with_icon :"copy-outline" %>
      <% i.with_command do %>
        <%= midwest_kbd { "⌘C" } %>
      <% end %>
    <% end %>
    <% m.with_item as: :button, label: "Paste" do |i| %>
      <% i.with_icon :"clipboard-outline" %>
      <% i.with_command do %>
        <%= midwest_kbd { "⌘V" } %>
      <% end %>
    <% end %>
    <% m.with_item as: :divider %>
    <% m.with_item as: :button, label: "Rename" do |i| %>
      <% i.with_icon :"pencil-outline" %>
    <% end %>
    <% m.with_item as: :nested, label: "Share", align: "right-end" do |item| %>
      <% item.with_nested_item label: "Email", path: "#" %>
      <% item.with_nested_item label: "Copy link", path: "#" %>
    <% end %>
    <% m.with_item as: :divider %>
    <% m.with_item as: :button, label: "Delete", class: "is-danger" do |i| %>
      <% i.with_icon :"trash-outline" %>
      <% i.with_command do %>
        <%= midwest_kbd { "⌫" } %>
      <% end %>
    <% end %>
  <% end %>
</div>

Default

Right-click anywhere in the trigger area to open a menu at the cursor. Shows icons, keyboard-shortcut hints, separators, a destructive action, and a nested submenu (hover "Share").

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/default

Annotate a preview to embed its Figma design here:

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