Primitive API / Page 04·05
FlexiResize
A resize handle for a widget. Widgets have no resize affordance of their own, so this is how users resize them with a pointer or the keyboard.
FlexiResize (component)
| Name | Description |
|---|---|
children Optional Snippet<[{ widget: FlexiWidgetController }]> | The content of the handle. Receives the surrounding widget's controller. |
class Optional ClassValue | Classes applied to the rendered button. |
FlexiResize renders a button inside a FlexiWidget. Dragging it resizes the widget along the axes allowed by its resizability; the button is disabled while resizability is 'none'. Position it yourself, typically in the widget’s bottom-right corner.
Svelte Resize handle
1 × 1
<script lang="ts">
import { FlexiBoard, FlexiTarget, FlexiWidget, FlexiResize } from '@flexiboards/svelte';
</script>
<FlexiBoard class="size-72 rounded-xl border p-6 lg:size-96">
<FlexiTarget
class="h-full w-full gap-3"
containerClass="h-full w-full"
config={{
rowSizing: 'minmax(0, 1fr)',
layout: { type: 'free', minRows: 3, minColumns: 3, maxRows: 3, maxColumns: 3 }
}}
>
<FlexiWidget
x={0}
y={0}
resizability="both"
class={(widget) => [
'bg-primary text-primary-foreground relative rounded-lg p-3',
widget.isShadow && 'opacity-50'
]}
>
{#snippet children({ widget })}
{widget.width} × {widget.height}
<FlexiResize
class="absolute bottom-1 right-1 size-4 rounded-sm border-b-2 border-r-2 border-current"
>
<span class="sr-only">Resize widget</span>
</FlexiResize>
{/snippet}
</FlexiWidget>
</FlexiTarget>
</FlexiBoard><script lang="ts">
import { FlexiBoard, FlexiTarget, FlexiWidget, FlexiResize } from '@flexiboards/svelte';
</script>
<FlexiBoard class="size-72 rounded-xl border p-6 lg:size-96">
<FlexiTarget
class="h-full w-full gap-3"
containerClass="h-full w-full"
config={{
rowSizing: 'minmax(0, 1fr)',
layout: { type: 'free', minRows: 3, minColumns: 3, maxRows: 3, maxColumns: 3 }
}}
>
<FlexiWidget
x={0}
y={0}
resizability="both"
class={(widget) => [
'bg-primary text-primary-foreground relative rounded-lg p-3',
widget.isShadow && 'opacity-50'
]}
>
{#snippet children({ widget })}
{widget.width} × {widget.height}
<FlexiResize
class="absolute bottom-1 right-1 size-4 rounded-sm border-b-2 border-r-2 border-current"
>
<span class="sr-only">Resize widget</span>
</FlexiResize>
{/snippet}
</FlexiWidget>
</FlexiTarget>
</FlexiBoard>
FlexiResize has no controller of its own. Its content receives the surrounding widget’s controller, so the handle can react to widget.isResizing. Limits come from the widget’s minWidth, maxWidth, minHeight, and maxHeight props; see FlexiWidget.
Accessibility
- The handle is a native
button: focusable with Tab, disabled when the widget cannot be resized. Give it a visually hidden text label. - Enter on the handle starts a keyboard resize, the arrow keys move the resize edge, Enter confirms, and Escape cancels. See [Accessibility](/docs/accessibility).
Gotchas
- A
FlexiResizemust be rendered inside aFlexiWidget. Outside one, it throws. - Give the widget’s element
position: relative(or similar) so an absolutely positioned handle stays inside it. - In a flow grid the flow-axis dimension is fixed at 1, so only the cross-axis resizes. See Flow Grids.