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
<div data-controller="midwest-page-transition" data-midwest-page-transition-style-value="fade" data-midwest-page-transition-duration-value="var(--duration-base)" data-midwest-page-transition-easing-value="var(--ease-emphasized)" aria-hidden="true" class="midwest-page-transition"></div>
<div class="p-6 space-y-4 max-w-lg overflow-hidden">
  <div id="pt-play-a">
    <article data-controller="midwest-card" class="midwest-card">
      <div class="wrap">
        <header>      
          <div class="flex items-center gap-2">
            <span class="midwest-badge size-default theme-primary">
              <span class="value">Page One</span>
            </span>
          </div>
        </header>
        <section>
          <p class="font-medium mb-1">Try the controls above</p>
          <p class="text-sm text-theme-7">
            Style: <strong>fade</strong>, duration: <strong>base</strong>
          </p>
        </section>
      </div>
    </article>
  </div>
  <div id="pt-play-b" style="display:none">
    <article data-controller="midwest-card" class="midwest-card">
      <div class="wrap">
        <header>      
          <div class="flex items-center gap-2">
            <span class="midwest-badge size-default theme-green">
              <span class="value">Page Two</span>
            </span>
          </div>
        </header>
        <section>
          <p class="font-medium mb-1">Transition complete</p>
          <p class="text-sm text-theme-7">Click the button again to go back. Change style or direction in the controls and click <em>Update preview</em>.</p>
        </section>
      </div>
    </article>
  </div>
  <div class="flex items-center gap-3">
    <button type="button" id="pt-play-btn" class="midwest-button variant-default size-default theme-primary" name="button">
      <span class="midwest-button-content">Demo transition ���</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>
    <span id="pt-play-no-support" class="text-sm text-theme-7" style="display:none">
      View Transitions API not supported in this browser
    </span>
  </div>
  <pre class="text-xs bg-gray-100 rounded p-3"><%= midwest_page_transition(
  style: :fade,
  direction: :left,
  duration: :base
) %></pre>
</div>
<script>
  (function () {
    var a = document.getElementById('pt-play-a');
    var b = document.getElementById('pt-play-b');
    var btn = document.getElementById('pt-play-btn');
    var noSupport = document.getElementById('pt-play-no-support');
    var fwd = 'Demo transition ���';
    var back = '��� Go back';
    if (!document.startViewTransition) {
      btn.style.display = 'none';
      noSupport.style.display = '';
      return;
    }
    var showingA = true;
    btn.addEventListener('click', function () {
      document.startViewTransition(function () {
        a.style.display = showingA ? 'none' : '';
        b.style.display = showingA ? '' : 'none';
        showingA = !showingA;
        btn.querySelector('.midwest-button-content').textContent = showingA ? fwd : back;
      });
    });
  }());
</script>
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
<%
  pt_style     = (params[:style].presence     || 'fade').to_sym
  pt_direction = (params[:direction].presence || 'left').to_sym
  pt_duration  = (params[:duration].presence  || 'base').to_sym
%>
<%= midwest_page_transition(style: pt_style, direction: pt_direction, duration: pt_duration) %>
<% page_a = capture do %>
  <%= midwest_card do |card| %>
    <% card.with_header do %>
      <div class="flex items-center gap-2">
        <%= midwest_badge("Page One") %>
      </div>
    <% end %>
    <p class="font-medium mb-1">Try the controls above</p>
    <p class="text-sm text-theme-7">
      Style: <strong><%= pt_style %></strong><% if pt_style == :slide %>, direction: <strong><%= pt_direction %></strong><% end %>, duration: <strong><%= pt_duration %></strong>
    </p>
  <% end %>
<% end %>
<% page_b = capture do %>
  <%= midwest_card do |card| %>
    <% card.with_header do %>
      <div class="flex items-center gap-2">
        <%= midwest_badge("Page Two", state: :success) %>
      </div>
    <% end %>
    <p class="font-medium mb-1">Transition complete</p>
    <p class="text-sm text-theme-7">Click the button again to go back. Change style or direction in the controls and click <em>Update preview</em>.</p>
  <% end %>
<% end %>
<% pt_code = "<%= midwest_page_transition(\n  style: :#{pt_style},\n  direction: :#{pt_direction},\n  duration: :#{pt_duration}\n) %>" %>
<%= render 'elements/page_transition_component_preview/demo',
      id: 'play',
      page_a: page_a,
      page_b: page_b,
      code: pt_code %>

Playground

Try each style and direction live.

Param Description Input

—

—

—

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

Accessibility

Figma embed for Page Transition/playground

Annotate a preview to embed its Figma design here:

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