FlexiDelete
A dropzone that deletes any widget dropped on it.
FlexiDelete (component)
| Name | Description |
|---|---|
controller Optional Bindable FlexiDeleteController | undefined | The controller managing this component's state and behaviour. Bind to it to access the component's imperative API. |
onfirstcreate Optional ((instance: FlexiDeleteController) => void) | undefined | Fires when the component's controller is first created. |
class Optional (ClassValue | ((deleter: FlexiDeleteController) => ClassValue)) | The class names to apply to the deleter's container element. Either a class value, or a function deriving one from the deleter's state. |
children Optional Snippet<[{ deleter: FlexiDeleteController }]> | The content rendered inside of the deleter. |
FlexiDelete renders a dropzone inside your board; any widget dropped on it is deleted. Its controller’s isHovered property lets you highlight it while a widget is held over it.
<script lang="ts">
import { FlexiDelete } from '@flexiboards/svelte';
</script>
<FlexiDelete
class={(deleter) => [
'rounded-lg border border-dashed p-4',
deleter.isHovered && 'border-red-500 text-red-500'
]}
>
Drag a widget here to delete it
</FlexiDelete>FlexiDeleteController
You can access the controller via binding to the controller prop, using the onfirstcreate callback, or from the children snippet parameter.
Use the FlexiDeleteController to read the deleter’s state.
| Name | Description |
|---|---|
ref HTMLElement | undefined | The DOM element bound to this deleter. |
isHovered Readonly boolean | Whether the deleter is currently being hovered by the pointer. Prefer this over CSS hover, because it accounts for Flexiboards' keyboard-based pointer. |
Accessibility
FlexiDelete renders a role="region" described by the board’s instructions element. Nothing inside it needs to be focusable, but it should contain a text label, or a visually hidden span when the content is an icon, so screen readers can name the dropzone. See Accessibility.