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>

API reference

bui-resizable-handle

Inputs

Prop	Type	Default	Description
`withHandle`	`boolean`	`false`	Whether to render a visible grip indicator on the divider.
`ariaLabel`	`string`	—	Accessible label for the handle; falls back to a localized default.

[buiResizablePanel]

Inputs

Prop	Type	Default	Description
`primary`	`boolean`	`false`	Whether this is the sized panel driven by the group's `size`; the other panel flexes.

bui-resizable-panel-group

Inputs

Prop	Type	Default	Description
`direction`	`"horizontal" \| "vertical"`	`'horizontal'`	Layout axis the panels are arranged and resized along.

Two-way models

Bind with [(name)], or one-way as an input.

Prop	Type	Default	Description
`size`	`number`	`50`	Size of the primary panel as a percentage (10-90). Two-way bindable with `[(size)]`.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.