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
<div class="h-96 rounded-lg border border-gray-2 dark:border-gray-9 overflow-hidden">
  <div data-controller="midwest-split-view" data-midwest-split-view-orientation-value="horizontal" data-midwest-split-view-size-value="50" data-midwest-split-view-min-value="10" data-midwest-split-view-max-value="90" data-midwest-split-view-collapsible-value="false" style="--split-size: 50%;" class="midwest-split-view orientation-horizontal">
    <div class="midwest-split-view-primary"
       data-midwest-split-view-target="primary">
      <div class="p-4 h-full bg-theme-1 dark:bg-theme-11">
        <h3 class="font-semibold mb-2">Primary</h3>
      </div>
    </div>
    <div class="midwest-split-view-divider"
       data-midwest-split-view-target="divider"
       role="separator"
       tabindex="0"
       aria-orientation="vertical"
       aria-valuemin="10"
       aria-valuemax="90"
       aria-valuenow="50"
       data-action="pointerdown->midwest-split-view#startDrag keydown->midwest-split-view#onKeydown dblclick->midwest-split-view#reset">
      <span class="midwest-split-view-grip" aria-hidden="true"></span>
    </div>
    <div class="midwest-split-view-secondary">
      <div class="p-4 h-full">
        <h3 class="font-semibold mb-2">Secondary</h3>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<% orientation = (params[:orientation].presence || "horizontal").to_sym %>
<div class="h-96 rounded-lg border border-gray-2 dark:border-gray-9 overflow-hidden">
  <%= midwest_split_view(
        orientation: orientation,
        size: (params[:size].presence || 50),
        min: (params[:min].presence || 10),
        max: (params[:max].presence || 90)
      ) do |s| %>
    <% s.with_primary do %>
      <div class="p-4 h-full bg-theme-1 dark:bg-theme-11">
        <h3 class="font-semibold mb-2">Primary</h3>
      </div>
    <% end %>
    <% s.with_secondary do %>
      <div class="p-4 h-full">
        <h3 class="font-semibold mb-2">Secondary</h3>
      </div>
    <% end %>
  <% end %>
</div>

Playground

Param Description Input

—

Initial primary size (%)

Minimum size (%)

Maximum size (%)

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

Accessibility

Figma embed for Split View/playground

Annotate a preview to embed its Figma design here:

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