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
153
154
155
<div class="flex w-full h-screen items-center justify-center">
  <ul class="midwest-dropdown-menu align--bottom-start midwest-dropdown"
    id="dropdown-f1e0"
    role="menu"
    popover="auto"
    style="position-anchor: --dropdown-f1e0;"
    data-controller="midwest-dropdown"
    data-dropdown-computed-positioning-value="false"
    data-dropdown-align-value="bottom-start">
    <button type="button" role="menuitem" popovertarget="dropdown-f1e0" 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="">
      <div class="midwest-dropdown-item as-header">
        <span id="item-header">Header content</span>
      </div>
    </label>
    <label class="midwest-label " for="">
      <a class="midwest-dropdown-item as-link" role="menuitem" href="#">
        Link item
      </a>
    </label>
    <label class="midwest-label " for="">
      <button class="midwest-dropdown-item as-button" role="menuitem">
        Button item
      </button>
    </label>
    <label class="midwest-label " for="">
      <hr class="midwest-dropdown-item as-divider">
    </label>
    <label class="midwest-label " for="">
      <button class="midwest-dropdown-item as-nested" role="menuitem" aria-haspopup="menu" popovertarget="dropdown-f1f0" style="anchor-name: --dropdown-f1f0;">
        Nested item
        <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-f1f0"
    role="menu"
    popover="auto"
    style="position-anchor: --dropdown-f1f0;"
    data-controller="midwest-dropdown"
    data-dropdown-computed-positioning-value="false"
    data-dropdown-align-value="right-start">
        <button type="button" role="menuitem" popovertarget="dropdown-f1f0" 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="#">
            Child one
          </a>
        </label>
        <label class="midwest-label " for="">
          <a class="midwest-dropdown-item as-link" role="menuitem" href="#">
            Child two
          </a>
        </label>
      </ul>
    </label>
  </ul>
  <button popovertarget="dropdown-f1e0" style="anchor-name: --dropdown-f1e0;" aria-haspopup="menu" aria-expanded="false" aria-controls="dropdown-f1e0" class="midwest-button variant-default size-default theme-primary midwest-dropdown-button " name="button">
    <span class="midwest-button-content">
      All types
      <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
12
13
14
<div class="flex w-full h-screen items-center justify-center">
  <%= midwest_dropdown(title: "All types") do |d| %>
    <% d.with_item as: :header do %>
      <span id="item-header">Header content</span>
    <% end %>
    <% d.with_item label: "Link item", path: "#" %>
    <% d.with_item label: "Button item", as: :button %>
    <% d.with_item as: :divider %>
    <% d.with_item as: :nested, label: "Nested item" do |item| %>
      <% item.with_nested_item label: "Child one", path: "#" %>
      <% item.with_nested_item label: "Child two", path: "#" %>
    <% end %>
  <% end %>
</div>

As types

One dropdown exercising every as: value: header, link, button, divider, nested.

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

Annotate a preview to embed its Figma design here:

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