XiodUI
HomeDocs
OverviewComponentsStyling & CustomizationChangelog

Components

  • Accordion
  • Agent Steps
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Autocomplete
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Button Split
  • Calendar
  • Card
  • Carousel
  • Checkbox
  • Circular Progress
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy To Clipboard
  • Corner Badge
  • Dashboard Grid
  • Date Picker
  • Dialog
  • Dot Matrix
  • Draggable
    Updated
  • Drawer
  • Empty
  • Field
  • Fieldset
  • File Upload
    Updated
  • Form
  • Frame
  • Gauge
  • Grid
  • Group
  • Input
  • Input Group
  • Input OTP
  • Input Payment
  • Input Phone
    Updated
  • Input Sensitive
  • Kbd
  • Kinetic Click
  • Label
  • List Box
    Updated
  • Loader
  • Marker
  • Menu
  • Menubar
  • Message
  • Meter
  • Morphic Toast
  • Navigation Menu
  • Number Field
  • Option Picker
  • Orb
  • Pagination
  • Popover
  • Preview Card
    Updated
  • Progress
  • Radio
  • Resizable
  • Ruler Picker
  • Scroll Area
  • Scroll Bar
  • Select
  • Separator
  • Sidebar
  • Skeleton
  • Slider
  • Sortable
  • Switch
  • Table
  • Tabs
  • Text
  • Textarea
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Toolbar
  • Tooltip
  • Waveform
  • Wheel Picker

Loading...

Preview Skeleton

Installation Skeleton

Usage Skeleton

API Reference Skeleton

Sponsors

Support the development of XiodUI and help us build the best component library on Earth.

+++
Sponsor on GitHub

Resizable

Previous: RadioNext: Ruler Picker

Panels separated by handles the user can drag, or move with the arrow keys, to resize.

Preview

Loading Preview...

Installation

bun add xiod-ui

Usage

Imports

1import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "xiod-ui/resizable";

Anatomy

1<ResizablePanelGroup>2  <ResizablePanel />3  <ResizableHandle />4</ResizablePanelGroup>

API Reference

Detailed documentation of properties and options.

ResizableHandle

Accepts render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
disabled
boolean
false

Whether the user is prevented from dragging this handle.

disableDoubleClick
boolean
RadioRuler Picker
false

Whether double-clicking the handle leaves the panel before it as it is, instead of collapsing or expanding it.

icon
ReactNode
–

Replaces this icon. Accepts any node; null renders no icon. Takes precedence over IconProvider.

labels
Partial<ResizableLabels>
–

Replaces the built-in text for this instance. See LabelsProvider to change it everywhere.

withHandle
boolean
false

Whether to show a grip in the middle of the handle, so it's easier to see and grab.

ResizablePanel

Accepts render, plus every native <div> attribute.

PropTypeDefaultDescription
collapsedSize
string|number
0%

The panel's size when collapsed. A number is in pixels; a string can use %, px, rem, em, vh or vw.

collapsible
boolean
false

Whether the panel collapses to collapsedSize when dragged well below minSize (past halfway to collapsedSize), or when the handle after it is double-clicked.

defaultSize
string|number
–

The panel's size at first. When no panel sets one, the space is split evenly. A number is in pixels; a string can use %, px, rem, em, vh or vw.

disabled
boolean
false

Whether the user is prevented from resizing this panel. panelRef can still resize it.

groupResizeBehavior
"preserve-relative-size"|"preserve-pixel-size"
preserve-relative-size

What happens to the panel when the whole group changes size: preserve-relative-size keeps its share of the group, preserve-pixel-size keeps its width or height in pixels.

id
string
–

A stable id for the panel. Set it when the group has a storageKey, so the saved layout is matched to the right panels.

maxSize
string|number
100%

The largest size the user can drag the panel to. A number is in pixels; a string can use %, px, rem, em, vh or vw.

minSize
string|number
0%

The smallest size the user can drag the panel to. A number is in pixels; a string can use %, px, rem, em, vh or vw.

onCollapse
(() => void)
–

Called when the panel collapses.

onExpand
(() => void)
–

Called when the panel expands from collapsed.

onResize
((size: { asPercentage: number; inPixels: number; }) => void)
–

Called with the panel's new size, as a percentage of the group and in pixels, whenever it changes.

panelRef
RefObject<ImperativePanelHandle | null>
–

A ref to control the panel from code: collapse(), expand(), resize(size), isCollapsed(), isExpanded() and getSize().

ResizablePanelGroup

Accepts render, plus every native <div> attribute.

PropTypeDefaultDescription
defaultLayout
(string | number)[]
–

The size of each panel at first, in order. Takes precedence over each panel's defaultSize. A number is in pixels; a string can use %, px, rem, em, vh or vw.

direction
"horizontal"|"vertical"
horizontal

Whether the panels sit side by side (horizontal) or stacked (vertical).

disabled
boolean
false

Whether the user is prevented from resizing any panel.

groupRef
RefObject<ImperativeGroupHandle | null>
–

A ref to read and set the whole layout from code, with getLayout() and setLayout(layout). Sizes are percentages.

onLayoutChange
((layout: number[]) => void)
–

Called with each panel's size, as a percentage of the group, whenever the layout changes, including on every step of a drag.

onLayoutChanged
((layout: number[]) => void)
–

Called with each panel's size, as a percentage of the group, once the user finishes a resize: at the end of a drag, on a key press or on a double-click.

storage
{ getItem: (key: string) => string | null; setItem: (key: string, value: string) => void; }
–

Where to save the layout when storageKey is set, instead of localStorage.

storageKey
string
–

A key to save the layout under, so it comes back on the next visit. Saved to localStorage unless you pass storage. Give each panel an id so the saved layout survives changes to the page.