Drawers

useOokoDrawer opens a nested component in the application poppable host.

import { useOokoDrawer } from "ooko-ui/drawer";

const drawer = useOokoDrawer();
drawer.open({ title: "Filters", placement: "end", component: FilterPanel });

Render one <OPoppableHost /> near the application root. Drawers share the same LIFO queue as dialogs, and the controller is isolated to its Vue application for SSR safety.

API reference

Returns the application-scoped controller used to open drawers programmatically.

function useOokoDrawer(): OokoDrawerController

Parameters

Parameter	Type	Required	Default	Description
none	none	none	none	none

Returns

Member	Type	Description
open	(options: OokoDrawerOptions) => OokoPoppableHandle	Opens a drawer and returns a handle for closing it.
flush	() => void	Closes the active dialog or drawer and clears suspended entries.

Related types

Type	Definition
ODrawerPlacement	type ODrawerPlacement = "start" | "end";
OokoDrawerController	interface OokoDrawerController { /** Opens a drawer and returns a handle for closing it. */ open: (options: OokoDrawerOptions) => OokoPoppableHandle; /** Closes the active dialog or drawer and clears suspended entries. */ flush: () => void; }
OokoDrawerOptions	interface OokoDrawerOptions extends OokoPoppableOptions { /** Side from which the drawer enters. Defaults to end. */ placement?: ODrawerPlacement; }
OokoPoppableCloseOptions	interface OokoPoppableCloseOptions { /** Removes every suspended poppable instead of restoring the preceding one. */ flush?: boolean; }
OokoPoppableHandle	interface OokoPoppableHandle { /** Stable identifier of the opened poppable. */ id: OokoPoppableId; /** Closes this poppable. By default, the preceding suspended poppable is restored. */ close: (options?: OokoPoppableCloseOptions) => void; }