Midwest Component Library v0.24.0

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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<div class="flex items-center justify-center p-16">
  <ul class="midwest-dropdown-menu align--bottom-start midwest-dropdown"
    id="dropdown-12ff8"
    role="menu"
    popover="auto"
    style="position-anchor: --dropdown-12ff8;"
    data-controller="midwest-dropdown"
    data-dropdown-computed-positioning-value="false"
    data-dropdown-align-value="bottom-start">
    <button type="button" role="menuitem" popovertarget="dropdown-12ff8" 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="#">
        Edit
      </a>
    </label>
    <label class="midwest-label " for="">
      <button class="midwest-dropdown-item as-nested" role="menuitem" aria-haspopup="menu" popovertarget="dropdown-13000" style="anchor-name: --dropdown-13000;">
        More
        <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 class="midwest-dropdown-menu align--right-start midwest-dropdown-submenu"
    id="dropdown-13000"
    role="menu"
    popover="auto"
    style="position-anchor: --dropdown-13000;"
    data-controller="midwest-dropdown"
    data-dropdown-computed-positioning-value="false"
    data-dropdown-align-value="right-start">
        <button type="button" role="menuitem" popovertarget="dropdown-13000" 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="#">
            Rename
          </a>
        </label>
        <label class="midwest-label " for="">
          <a class="midwest-dropdown-item as-link" role="menuitem" href="#">
            Copy
          </a>
        </label>
        <label class="midwest-label " for="">
          <button class="midwest-dropdown-item as-button" role="menuitem">
            Move
          </button>
        </label>
      </ul>
    </label>
    <label class="midwest-label " for="">
      <button class="midwest-dropdown-item as-button" role="menuitem">
        Archive
      </button>
    </label>
  </ul>
  <button popovertarget="dropdown-12ff8" style="anchor-name: --dropdown-12ff8;" aria-haspopup="menu" aria-expanded="false" aria-controls="dropdown-12ff8" class="midwest-button variant-default size-default theme-primary midwest-dropdown-button " name="button">
    <span class="midwest-button-content">
      Options
      <div class="layer-children open-indicator">
        <div class="midwest-icon opened">
          <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>
        <div class="midwest-icon closed">
          <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="Chevron forward"><title>Chevron forward</title>
              <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M184 112l144 144-144 144"></path></svg>
          </div>
        </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>
</div>
1
2
3
4
5
6
7
8
9
10
11
<div class="flex items-center justify-center p-16">
  <%= midwest_dropdown(title: "Options") do |d| %>
    <% d.with_item label: "Edit", path: "#" %>
    <% d.with_item as: :nested, label: "More" do |item| %>
      <% item.with_nested_item label: "Rename", path: "#" %>
      <% item.with_nested_item label: "Copy", path: "#" %>
      <% item.with_nested_item label: "Move", as: :button %>
    <% end %>
    <% d.with_item label: "Archive", as: :button %>
  <% end %>
</div>

Keyboard Navigation (Nested)

Dropdown with a nested submenu used to verify focus moves into the submenu.

No params configured.

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

Accessibility

Figma embed for Dropdown/keyboard_navigation_nested

Annotate a preview to embed its Figma design here:

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