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-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="vertical" 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-vertical">
    <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">Top</h3>
        <p class="text-sm text-gray-9 dark:text-gray-4">Drag the horizontal divider up and down.</p>
      </div>
    </div>
    <div class="midwest-split-view-divider"
       data-midwest-split-view-target="divider"
       role="separator"
       tabindex="0"
       aria-orientation="horizontal"
       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">Bottom</h3>
        <p class="text-sm text-gray-9 dark:text-gray-4">This pane fills the remaining height.</p>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="h-96 rounded-lg border border-gray-2 dark:border-gray-9 overflow-hidden">
  <%= midwest_split_view(orientation: :vertical, size: 50) 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">Top</h3>
        <p class="text-sm text-gray-9 dark:text-gray-4">Drag the horizontal divider up and down.</p>
      </div>
    <% end %>
    <% s.with_secondary do %>
      <div class="p-4 h-full">
        <h3 class="font-semibold mb-2">Bottom</h3>
        <p class="text-sm text-gray-9 dark:text-gray-4">This pane fills the remaining height.</p>
      </div>
    <% end %>
  <% end %>
</div>

Vertical

Stacked panes separated by a horizontal divider.

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/vertical

Annotate a preview to embed its Figma design here:

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