Resizable

Drag-to-resize panel groups.

Sidebar

Content

import { BuiResizablePanelGroup, BuiResizablePanel, BuiResizableHandle } from 'ng-blatui';

<bui-resizable-panel-group class="h-40">
  <div buiResizablePanel [primary]="true">Sidebar</div>
  <bui-resizable-handle [withHandle]="true" />
  <div buiResizablePanel>Content</div>
</bui-resizable-panel-group>

Vertical

Header

Body

<bui-resizable-panel-group direction="vertical" class="h-56">
  <div buiResizablePanel [primary]="true">Header</div>
  <bui-resizable-handle [withHandle]="true" />
  <div buiResizablePanel>Body</div>
</bui-resizable-panel-group>

Without handle

One

Two

<!-- omit [withHandle] for a plain divider -->
<bui-resizable-panel-group>
  <div buiResizablePanel [primary]="true">One</div>
  <bui-resizable-handle />
  <div buiResizablePanel>Two</div>
</bui-resizable-panel-group>

Nested

Sidebar

Top

Bottom

<!-- nest a vertical group inside a panel -->
<bui-resizable-panel-group>
  <div buiResizablePanel [primary]="true">Sidebar</div>
  <bui-resizable-handle [withHandle]="true" />
  <div buiResizablePanel>
    <bui-resizable-panel-group direction="vertical" class="h-full">
      <div buiResizablePanel [primary]="true">Top</div>
      <bui-resizable-handle [withHandle]="true" />
      <div buiResizablePanel>Bottom</div>
    </bui-resizable-panel-group>
  </div>
</bui-resizable-panel-group>