Component
FloatingBar
A toolbar pinned to a corner of a positioned container — zoom controls, canvas actions.
import { FloatingBar } from '@loidolt/theme-svelte';
Example
Notes
- The parent must be
position: relative; the bar is a pointer-events island above stage content. - Each corner also clears the safe area, for a stage that fills the screen. Set
--ldt-safe-*to0pxon a bar whose stage does not.
Props
Generated from the component source, so it cannot drift from the implementation.
| Prop | Type | Default | Notes |
|---|---|---|---|
children required | Snippet | — | |
class | string | — | |
label | string | — | Accessible name; renders role="group" when set. |
orientation | Orientation | 'horizontal' | |
placement | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'bottom-end' | Corner of the nearest positioned ancestor to pin to. |
ref bindable | HTMLDivElement | null | null |
Plus the attributes of HTMLAttributes<HTMLDivElement>, forwarded to the root element.