Resizable

Horizontal

Loading...

Three Panels

Loading...

<flint-resizable-group>

Resizable Group: a container that enables resizable panels with draggable handles.

• Tag: <flint-resizable-group>
• Class: FlintResizableGroup

Import

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintResizableGroup } from '@getufy/flint-ui';

Usage

<flint-resizable-group></flint-resizable-group>

Properties

Property	Attribute	Type	Default	Description
orientation	orientation	Orientation	'horizontal'	Layout direction — 'horizontal' (row) or 'vertical' (column).
dir	dir	'ltr' | 'rtl'	'ltr'	Text direction for RTL support.

Events

Event	Detail	Description
flint-resizable-collapse	—	Fired when a panel is collapsed.
flint-resizable-expand	—	Fired when a collapsed panel is expanded.
flint-resizable-change	—	Fired when panel sizes change via drag or keyboard.

CSS Parts

Name	Description
grip	The grip element.

Methods

Method	Description
getLayout(): number[]	Returns a snapshot of panel sizes as percentages (0-100).

---

<flint-resizable-panel>

• Tag: <flint-resizable-panel>
• Class: FlintResizablePanel

Import

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintResizablePanel } from '@getufy/flint-ui';

Usage

<flint-resizable-panel></flint-resizable-panel>

Properties

Property	Attribute	Type	Default	Description
size	size	number	0	Current size as percentage (0–100).
defaultSize	default-size	number	0	Default size — applied once on first update.
minSize	min-size	number	0	Minimum size percentage (0–100).
maxSize	max-size	number	100	Maximum size percentage (0–100).
collapsible	collapsible	boolean	false	Whether the panel can collapse to zero size via drag.
collapsed	collapsed	boolean	false	Whether the panel is currently collapsed via the programmatic API.

Methods

Method	Description
collapse(): void	Collapse this panel to zero size, transferring its space to the adjacent
expand(): void	Expand this panel back to its previous size (or defaultSize as fallback).
toggle(): void	Toggle between collapsed and expanded states.

---

<flint-resizable-handle>

• Tag: <flint-resizable-handle>
• Class: FlintResizableHandle

Import

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintResizableHandle } from '@getufy/flint-ui';

Usage

<flint-resizable-handle></flint-resizable-handle>

Properties

Property	Attribute	Type	Default	Description
withHandle	with-handle	boolean	false	Show a visible drag grip.
disabled	disabled	boolean	false	Disable interaction.

---