useDrawerAction

Imperative drawer API for opening custom components in an edge-docked shell.

Introduction

useDrawerAction opens drawers imperatively with any Vue or React component as content—typically a Card. The Drawer shell (overlay, portal, backdrop, transitions) is rendered by BridgeDrawerHost.

Use this when you need to open edge-docked panels from business logic, nested components, or callbacks without threading show state through props.

Use the framework selector in the site header to switch between React and Vue.

Import

import { BridgeUIHosts } from "@bridge-ui/vue/Actions";
import { useDrawerAction } from "@bridge-ui/vue/Actions";

import { BridgeUIHosts } from "@bridge-ui/react/Actions";
import { useDrawerAction } from "@bridge-ui/react/Actions";

Setup

Caution

Mount BridgeUIHosts with BridgeDrawerHost inside BridgeUIProvider. Without the host, open() will not show a drawer. See useDialogAction for a full layout example.

Basic usage

Pass a component and props to open(). The returned id is passed to close(id) from your content or page logic.

Drawer options

Configure the shell with drawer: size, placement, blur, transition, and persistent.

Nested stack

Drawer content can call useDrawerAction() again to open another layer on top.

Drawer, useModalAction, Card

API

Method / property	Description
open(options)	Push a drawer onto the stack. Returns an entry id.
close(id)	Close the entry with the given id.
closeTop()	Close the topmost entry in the stack.
update(id, patch)	Patches component props and/or drawer shell options.
isOpen(id)	Whether the entry is currently open.
stackSize	Current stack depth.

open options

Option	Type	Description
component	Component	Content component rendered inside the drawer panel.
props	object	Props passed to the content component.
drawer	DrawerOptions	Shell: size, placement, transition, persistent, blur, etc.
onClose	() => void	Called when a dismiss starts.
onClosed	() => void	Called after the leave animation.