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
<div class="h-80 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="40" data-midwest-split-view-min-value="10" data-midwest-split-view-max-value="90" data-midwest-split-view-collapsible-value="false" style="--split-size: 40%;" 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>
        <p class="text-sm text-gray-9 dark:text-gray-4">Drag the divider to resize. Focus it and use the arrow keys.</p>
      </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="40"
       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>
        <p class="text-sm text-gray-9 dark:text-gray-4">This pane fills the remaining space.</p>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="h-80 rounded-lg border border-gray-2 dark:border-gray-9 overflow-hidden">
  <%= midwest_split_view(size: 40) 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>
        <p class="text-sm text-gray-9 dark:text-gray-4">Drag the divider to resize. Focus it and use the arrow keys.</p>
      </div>
    <% end %>
    <% s.with_secondary do %>
      <div class="p-4 h-full">
        <h3 class="font-semibold mb-2">Secondary</h3>
        <p class="text-sm text-gray-9 dark:text-gray-4">This pane fills the remaining space.</p>
      </div>
    <% end %>
  <% end %>
</div>

Default

Two panes with a draggable divider. Drag it, or focus it and use the arrow keys (Shift for larger steps, Home/End for min/max). Double-click resets.

No params configured.

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

Accessibility

Figma embed for Split View/default

Annotate a preview to embed its Figma design here:

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