Resizer

import { Resizer } from 'cx/widgets';

The Resizer component is a draggable divider that allows users to resize adjacent elements. Place it between two sibling elements to enable resizing. Double-click to reset to the default size.

 <div className="flex h-[150px] border border-gray-300">
  <div className="p-4" style={{ width: format(m.leftWidth, "n;0:suffix;px") }}>
    Left panel (drag the resizer)
  </div>
  <Resizer
    size={m.leftWidth}
    minSize={100}
    maxSize={400}
    className="border-x border-gray-300"
  />
  <div className="flex-1 p-4">Right panel</div>
</div> 
 export const model = {
  leftWidth: 200,
}; 
 import { createModel } from "cx/data";
import { format } from "cx/ui";
import { Resizer } from "cx/widgets"; 

Left panel (drag the resizer)

Right panel

Configuration

Property	Type	Description
`size`	`number`	A binding for storing the resized element’s size.
`defaultSize`	`number`	Value set when the user double-clicks the resizer.
`minSize`	`number`	Minimum allowed size. Default is `0`.
`maxSize`	`number`	Maximum allowed size. Default is `1000000`.
`horizontal`	`boolean`	Set to `true` for horizontal resizing (row-resize). Default is `false` (vertical, col-resize).
`forNextElement`	`boolean`	Use the element after the resizer for size measurements instead of before. Default is `false`.
`baseClass`	`string`	Base CSS class. Default is `resizer`.