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.

<script setup lang="ts">
import { useDrawerAction } from "@bridge-ui/vue/Actions";
import { Button } from "@bridge-ui/vue/Components/Button";

import CardDrawerContent from "./CardDrawerContent.vue";

const drawer = useDrawerAction();

const open = () => {
  const id = drawer.open({
    component: CardDrawerContent,
    drawer: { transition: "slide" },
    props: {
      title: "Imperative drawer",
      onClose: () => drawer.close(id),
      body: "Opened with useDrawerAction().open(). The shell is rendered by BridgeDrawerHost.",
    },
  });
};
</script>

<template>
  <Button v-on:click="open">Open drawer</Button>
</template>

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

import CardDrawerContent from "./CardDrawerContent";

const Basic = () => {
  const drawer = useDrawerAction();

  const open = () => {
    const id = drawer.open({
      component: CardDrawerContent,
      drawer: { transition: "slide" },
      props: {
        title: "Imperative drawer",
        onClose: () => drawer.close(id),
        children:
          "Opened with useDrawerAction().open(). The shell is rendered by BridgeDrawerHost.",
      },
    });
  };

  return <Button onClick={open}>Open drawer</Button>;
};

export default Basic;

Drawer options

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

<script setup lang="ts">
import { useDrawerAction } from "@bridge-ui/vue/Actions";
import { Button } from "@bridge-ui/vue/Components/Button";

import CardDrawerContent from "./CardDrawerContent.vue";

const drawer = useDrawerAction();

const open = () => {
  const id = drawer.open({
    component: CardDrawerContent,
    drawer: {
      size: "lg",
      blur: "md",
      placement: "right",
      transition: "slide",
    },
    props: {
      title: "Drawer options",
      onClose: () => drawer.close(id),
      body: "Configure the shell with drawer.size, placement, blur, and transition.",
    },
  });
};
</script>

<template>
  <Button v-on:click="open">Open with drawer options</Button>
</template>

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

import CardDrawerContent from "./CardDrawerContent";

const DrawerOptions = () => {
  const drawer = useDrawerAction();

  const open = () => {
    const id = drawer.open({
      component: CardDrawerContent,
      drawer: {
        size: "lg",
        blur: "md",
        placement: "right",
        transition: "slide",
      },
      props: {
        title: "Drawer options",
        onClose: () => drawer.close(id),
        children:
          "Configure the shell with drawer.size, placement, blur, and transition.",
      },
    });
  };

  return <Button onClick={open}>Open with drawer options</Button>;
};

export default DrawerOptions;

Nested stack

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

<script setup lang="ts">
import { useDrawerAction } from "@bridge-ui/vue/Actions";
import { Button } from "@bridge-ui/vue/Components/Button";

import OuterStackContent from "./OuterStackContent.vue";

const drawer = useDrawerAction();

const open = () => {
  const id = drawer.open({
    component: OuterStackContent,
    props: {
      onClose: () => drawer.close(id),
    },
    drawer: {
      size: "lg",
      placement: "right",
      transition: "slide",
    },
  });
};
</script>

<template>
  <Button v-on:click="open">Open nested example</Button>
</template>

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

import OuterStackContent from "./OuterStackContent";

const Nested = () => {
  const drawer = useDrawerAction();

  const open = () => {
    const id = drawer.open({
      component: OuterStackContent,
      props: {
        onClose: () => drawer.close(id),
      },
      drawer: {
        size: "lg",
        placement: "right",
        transition: "slide",
      },
    });
  };

  return <Button onClick={open}>Open nested example</Button>;
};

export default Nested;

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.