Overlays
SlideoverOutlet
Where a docked Slideover appears in the layout. Place it once, next to the main content.
<UiSlideoverOutlet />Options
One block per prop — what it does, and what it looks like set.
Top
top is where the docked panel sticks, in pixels from the top of the viewport — the height of a sticky navbar above it, so the panel sits below that instead of under it. This site passes 68.
Examples
The component in real use: compositions that answer "how do I build X with this", rather than one prop at a time.
Placing it in the layout
Once, beside the main content, in a flex row without gap — the outlet is a flex item even while it's 0 wide, so a gap would show. It widens to the panel's width when a dock slideover opens, which pushes the content aside.
Layout markup only — this page's own layout already has one.
The outlet is a flex item even while it's 0 wide, so a parent gap-* still adds that space beside it. Put it in a row without gap and give the content its own padding.
Place one per layout. It renders the docking target by a fixed id, so two mounted at once would collide.
@update:active
Whether a panel is docked right now — for a layout that wants to collapse its sidebar while one is, say.
Layout markup only.
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
number0Emits
update:active[value: boolean]