Midwest Component Library v0.28.2

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
<div class="p-8">
  <div data-controller="midwest-prose" class="midwest-prose prose">
    <p>
      The hidden <code>midwest_assets</code> element below injects the given
      stylesheet into <code><head></code> once, on connect — so a component
      arriving via Turbo styles correctly even on a page that hasn't loaded
      Midwest's CSS. In an app you'd write <code><%= midwest_assets %></code>
      to resolve the real <code>midwest</code> stylesheet.
    </p>
  </div>
  <div class="midwest-assets" hidden="hidden" data-controller="midwest-assets" data-midwest-assets-css-value="["data:text/css,.midwestAssetsDemo{}"]" data-midwest-assets-js-value="["/midwest-async/js/runtime-a29bc770.js","/midwest-async/js/assets_component-ab131b57.js","/midwest-async/js/prose_component-ad9b87c7.js"]"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="p-8">
  <%= midwest_prose do %>
    <p>
      The hidden <code>midwest_assets</code> element below injects the given
      stylesheet into <code><head></code> once, on connect — so a component
      arriving via Turbo styles correctly even on a page that hasn't loaded
      Midwest's CSS. In an app you'd write <code><%= midwest_assets %></code>
      to resolve the real <code>midwest</code> stylesheet.
    </p>
  <% end %>
  <%# A data: URL keeps the preview self-contained (no server request) while %>
  <%# still exercising the inject-into-head behaviour. %>
  <%= midwest_assets(css: "data:text/css,.midwestAssetsDemo{}") %>
</div>

Default

Render midwest_assets inside any fragment that may be delivered dynamically (a Turbo Frame or Stream) so Midwest's compiled stylesheet is guaranteed to be in . In real use call midwest_assets (css: true) to resolve the app's midwest stylesheet; this preview injects a unique URL so the newly added is observable.

No params configured.

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

Accessibility

Figma embed for Assets/default

Annotate a preview to embed its Figma design here:

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