Primitive API / Page 04·07

FlexiAdd

A button that creates a new widget and hands it to the user to drop into a board.

FlexiAdd (component)

Props
Name	Description
`controller` Optional Bindable `FlexiAddController \| undefined`	The controller managing this component's state and behaviour. Bind to it to access the component's imperative API.
`onfirstcreate` Optional `((instance: FlexiAddController) => void) \| undefined`	Fires when the component's controller is first created.
`class` Optional `(ClassValue \| ((adder: FlexiAddController) => ClassValue))`	The class names to apply to the adder's button element. Either a class value, or a function deriving one from the adder's state.
`children` Optional `Snippet<[{ adder: FlexiAddController }]>`	The child content of the adder, containing the contents of the adder button.
`addWidget` Required `(() => AdderWidgetConfiguration \| null)`	When the user interacts with the adder, this function allows you to specify the configuration of the widget that is created and grabbed. Return null to cancel the add.

FlexiAdd renders a button inside your board. The addWidget prop returns the configuration of the widget to create when the button is grabbed, or null to add nothing.

<script lang="ts">
	import { FlexiAdd, type AdderWidgetConfiguration } from '@flexiboards/svelte';
	import NumberTile from './number-tile.svelte';

	function addWidget(): AdderWidgetConfiguration {
		return {
			widget: {
				component: NumberTile,
				componentProps: { number: Math.floor(Math.random() * 10) },
				draggability: 'full'
			},
			widthPx: 100,
			heightPx: 100
		};
	}
</script>

<FlexiAdd {addWidget} class="rounded-lg border border-dashed p-4">Add a widget</FlexiAdd>

FlexiAddController

You can access the controller via binding to the controller prop, using the onfirstcreate callback, or from the children snippet parameter.

Properties
Name	Description
`ref` `HTMLElement \| undefined`	The DOM element bound to this adder.

AdderWidgetConfiguration

AdderWidgetConfiguration describes the widget that gets created and grabbed, along with the width and height the grabbed widget starts at.

Properties
Name	Description
`widget` Required `FlexiWidgetDefaults<ClassValue> & { id?: string; type?: string; x?: number; y?: number; width?: number; height?: number; metadata?: Record<string, any>; }`	The configuration of the widget that is created and grabbed.
`widthPx` Optional `number \| undefined`	The initial width of the grabbed widget in pixels.
`heightPx` Optional `number \| undefined`	The initial height of the grabbed widget in pixels.

Accessibility

FlexiAdd renders a native button, so it is focusable with Tab, and Enter creates the widget and grabs it for a keyboard drop. The button has no text of its own: put a label, or a visually hidden span for icon-only content, inside it. See Accessibility.