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
<div class="flex flex-wrap items-center justify-center gap-6 p-16">
  <button popovertarget="placement-top" class="midwest-button variant-default size-default theme-primary" name="button">
    <span class="midwest-button-content">Top</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 id="placement-top" popover="auto" class="midwest-popover anchored placement-top" style="anchor-name: --placement-top">
    <article data-controller="midwest-card" class="midwest-card p-4 min-w-[12rem]">
      <div class="wrap">
        <section>
          <p class="font-semibold capitalize">top placement</p>
          <p class="text-sm text-gray-500">This popover appears top of the button.</p>
        </section>
      </div>
    </article>
  </div>
  <button popovertarget="placement-bottom" class="midwest-button variant-default size-default theme-primary" name="button">
    <span class="midwest-button-content">Bottom</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 id="placement-bottom" popover="auto" class="midwest-popover anchored placement-bottom" style="anchor-name: --placement-bottom">
    <article data-controller="midwest-card" class="midwest-card p-4 min-w-[12rem]">
      <div class="wrap">
        <section>
          <p class="font-semibold capitalize">bottom placement</p>
          <p class="text-sm text-gray-500">This popover appears bottom of the button.</p>
        </section>
      </div>
    </article>
  </div>
  <button popovertarget="placement-left" class="midwest-button variant-default size-default theme-primary" name="button">
    <span class="midwest-button-content">Left</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 id="placement-left" popover="auto" class="midwest-popover anchored placement-left" style="anchor-name: --placement-left">
    <article data-controller="midwest-card" class="midwest-card p-4 min-w-[12rem]">
      <div class="wrap">
        <section>
          <p class="font-semibold capitalize">left placement</p>
          <p class="text-sm text-gray-500">This popover appears to the left of the button.</p>
        </section>
      </div>
    </article>
  </div>
  <button popovertarget="placement-right" class="midwest-button variant-default size-default theme-primary" name="button">
    <span class="midwest-button-content">Right</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 id="placement-right" popover="auto" class="midwest-popover anchored placement-right" style="anchor-name: --placement-right">
    <article data-controller="midwest-card" class="midwest-card p-4 min-w-[12rem]">
      <div class="wrap">
        <section>
          <p class="font-semibold capitalize">right placement</p>
          <p class="text-sm text-gray-500">This popover appears to the right of the button.</p>
        </section>
      </div>
    </article>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="flex flex-wrap items-center justify-center gap-6 p-16">
  <% %i[top bottom left right].each do |side| %>
    <%= render Midwest::PopoverComponent.new(name: "placement-#{side}", placement: side) do |pop| %>
      <% pop.with_toggler do %>
        <%= midwest_button(side.to_s.capitalize, as: :button, popovertarget: "placement-#{side}") %>
      <% end %>
      <%= midwest_card(class: 'p-4 min-w-[12rem]') do %>
        <p class="font-semibold capitalize"><%= side %> placement</p>
        <p class="text-sm text-gray-500">This popover appears <%= side == :left || side == :right ? "to the #{side}" : side.to_s %> of the button.</p>
      <% end %>
    <% end %>
  <% end %>
</div>

Placement

Use placement: to pin the popover to a specific side of the anchor on desktop (≥ 700 px). Options: top, bottom, left, right. On mobile the popover always slides up from the bottom regardless.

No params configured.

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

Accessibility

Figma embed for Popover/placement

Annotate a preview to embed its Figma design here:

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