# 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.

Source: https://www.flexiboards.dev/docs/components/resize

Framework: Svelte

## FlexiResize (component)

**Props**

| Name | Type | Description |
| --- | --- | --- |
| `children` | `Snippet<[{ widget: FlexiWidgetController }]>` | Optional. The content of the handle. Receives the surrounding widget's controller. |
| `class` | `ClassValue` | Optional. 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.

Example: Resize handle

```svelte
<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](https://www.flexiboards.dev/docs/components/widget).

## 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](https://www.flexiboards.dev/docs/accessibility).

## Gotchas

- A `FlexiResize` must be rendered inside a `FlexiWidget`. 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](https://www.flexiboards.dev/docs/flow-grids#gotchas).