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
<style>
  .io-pulse {
    transition: background-color 0.4s ease, border-color 0.4s ease;
  }
  .io-pulse[data-intersecting="true"] {
    background-color: #dcfce7;
    border-color: #86efac;
  }
</style>
<div class="flex flex-col gap-4">
  <p class="text-gray-3">Scroll the card in and out of view ↓</p>
  <div style="height: 150vh"></div>
  <div data-controller="midwest-intersection-observer" data-midwest-intersection-observer-threshold-value="0.75" data-midwest-intersection-observer-root-margin-value="0px" data-midwest-intersection-observer-once-value="false" class="midwest-intersection-observer io-pulse rounded-2xl border border-gray-1 p-6 max-w-md">
    <p class="font-medium">My background turns green while I'm in view.</p>
    <p class="text-gray-3">Driven entirely by the <code>data-intersecting</code> attribute — no extra JS.</p>
  </div>
  <div style="height: 100vh"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
  .io-pulse {
    transition: background-color 0.4s ease, border-color 0.4s ease;
  }
  .io-pulse[data-intersecting="true"] {
    background-color: #dcfce7;
    border-color: #86efac;
  }
</style>
<div class="flex flex-col gap-4">
  <p class="text-gray-3">Scroll the card in and out of view ↓</p>
  <div style="height: 150vh"></div>
  <%= midwest_intersection_observer(threshold: 0.75, class: "io-pulse rounded-2xl border border-gray-1 p-6 max-w-md") do %>
    <p class="font-medium">My background turns green while I'm in view.</p>
    <p class="text-gray-3">Driven entirely by the <code>data-intersecting</code> attribute — no extra JS.</p>
  <% end %>
  <div style="height: 100vh"></div>
</div>

Repeat

With once: false (the default) the controller toggles on every entry and exit. The data-intersecting attribute is used here as a pure-CSS styling hook — scroll the card in and out of view to watch it react.

No params configured.

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

Accessibility

Figma embed for Intersection Observer/repeat

Annotate a preview to embed its Figma design here:

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