Drawer Provider

A wrapper that coordinates drawers and optionally scales the page behind them.

Usage Soon

Wrap page content in DrawerProvider and enable scale to shrink it while a descendant Drawer is open. This replaces data-vaul-drawer-wrapper.

<PDrawerProvider scale class="min-h-dvh" :ui="{ content: 'min-h-dvh' }">
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</PDrawerProvider>

Keep the Drawer's portal enabled so its panel renders outside the scaled page. Every descendant Drawer participates. scale defaults to false.

Scale

The page scales down and gains rounded corners when a Drawer opens. It follows swipe progress back toward its resting state during dismissal. Reduced-motion preferences disable the transition.

Element

Use as to change the root element. Defaults to div.

Examples

Custom background

Use ui.background to customize the surface behind the page, and ui.content for the page wrapper.

<PDrawerProvider scale :ui="{ background: 'bg-background-accented', content: 'min-h-dvh p-4' }">
  <PDrawer title="Example" close>
    <PButton label="Open" />
    <template #body>Page content scales behind this drawer.</template>
  </PDrawer>
</PDrawerProvider>

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`scale`	`false`	`boolean` Scale the page content while a descendant drawer is open.
`ui`		`{ root?: SlotClass; background?: SlotClass; content?: SlotClass; }`

Slots

Slot	Type
`default`	`{}`

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    drawerProvider: {
      slots: {
        root: 'relative isolate',
        background: 'absolute inset-0 bg-background-inverted',
        content: 'relative'
      },
      variants: {
        scale: {
          true: {
            content: [
              'pohon-drawer-indent bg-background overflow-hidden',
              'pohon-drawer-indent-transition'
            ]
          }
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from 'pohon-ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        drawerProvider: {
          slots: {
            root: 'relative isolate',
            background: 'absolute inset-0 bg-background-inverted',
            content: 'relative'
          },
          variants: {
            scale: {
              true: {
                content: [
                  'pohon-drawer-indent bg-background overflow-hidden',
                  'pohon-drawer-indent-transition'
                ]
              }
            }
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

Drawer

A drawer that smoothly slides in and out of the screen.

DropdownMenu

A menu to display actions when clicking on an element.