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
<div class="midwest-tabs" data-controller="midwest-tabs">
  <div role="tablist" class="midwest-tabs-list" data-midwest-tabs-target="list">
    <button type="button" class="midwest-button midwest-tab variant-tab type-tab active theme-primary" role="tab" id="tab-13580" aria-controls="panel-13580" aria-selected="true" data-action="click->midwest-tabs#select" data-midwest-tabs-target="tab" tabindex="0">
      <span class="midwest-button-content">Overview</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>
    <button type="button" class="midwest-button midwest-tab variant-tab type-tab theme-primary" role="tab" id="tab-13588" aria-controls="panel-13588" aria-selected="false" data-action="click->midwest-tabs#select" data-midwest-tabs-target="tab" tabindex="-1">
      <span class="midwest-button-content">Details</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>
    <button type="button" class="midwest-button midwest-tab variant-tab type-tab theme-primary" role="tab" id="tab-13590" aria-controls="panel-13590" aria-selected="false" data-action="click->midwest-tabs#select" data-midwest-tabs-target="tab" tabindex="-1">
      <span class="midwest-button-content">Settings</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>
  <div class="midwest-tabs-panels">
    <div role="tabpanel" id="panel-13580" aria-labelledby="tab-13580" data-midwest-tabs-target="panel" class="midwest-tab-panel">
      <div style="--motion-duration: var(--duration-base);" class="midwest-motion motion-fade from-up trigger-load">
        <div data-controller="midwest-prose" class="midwest-prose prose">
          <h3>Overview</h3>
          <p>A high-level summary of the subject at hand. This is the first panel and is visible by default.</p>
        </div>
      </div>
    </div>
    <div role="tabpanel" id="panel-13588" aria-labelledby="tab-13588" data-midwest-tabs-target="panel" class="midwest-tab-panel" hidden="hidden">
      <div style="--motion-duration: var(--duration-base);" class="midwest-motion motion-fade from-up trigger-load">
        <div data-controller="midwest-prose" class="midwest-prose prose">
          <h3>Details</h3>
          <p>A deeper look at the specifics. Click this tab to reveal its content.</p>
        </div>
      </div>
    </div>
    <div role="tabpanel" id="panel-13590" aria-labelledby="tab-13590" data-midwest-tabs-target="panel" class="midwest-tab-panel" hidden="hidden">
      <div style="--motion-duration: var(--duration-base);" class="midwest-motion motion-fade from-up trigger-load">
        <div data-controller="midwest-prose" class="midwest-prose prose">
          <h3>Settings</h3>
          <p>Configuration options live here.</p>
        </div>
      </div>
    </div>
  </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
<%
  animation = { slide: params[:slide], scale: params[:scale], rotate: params[:rotate], blur: params[:blur] }
    .select { |_, on| on }.keys
  animation = [:fade] if animation.empty?
%>
<%= midwest_tabs(
  vertical: params[:vertical],
  fill: params[:fill],
  animation: animation,
  direction: (params[:direction].presence || "up").to_sym,
  duration: (params[:duration].presence || "base").to_sym
) do |tabs| %>
  <% tabs.with_tab("Overview", active: true) do %>
    <%= midwest_prose do %>
      <h3>Overview</h3>
      <p>A high-level summary of the subject at hand. This is the first panel and is visible by default.</p>
    <% end %>
  <% end %>
  <% tabs.with_tab("Details") do %>
    <%= midwest_prose do %>
      <h3>Details</h3>
      <p>A deeper look at the specifics. Click this tab to reveal its content.</p>
    <% end %>
  <% end %>
  <% tabs.with_tab("Settings") do %>
    <%= midwest_prose do %>
      <h3>Settings</h3>
      <p>Configuration options live here.</p>
    <% end %>
  <% end %>
<% end %>

Playground

This example uses dynamic preview parameters which can be edited live in the Lookbook UI

Param Description Input

Arrange tabs vertically along the left side

Stretch tabs to fill the full width of the container

Slide

Scale

Rotate

Blur

Slide direction

Transition duration token

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

Accessibility

Figma embed for Tabs/playground

Annotate a preview to embed its Figma design here:

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