He guys i want to have a drawer in a framed container like so instead of the whole page any ideas?
#Inner Drawer/ Model
tawdry nacelle
quick ridgeBOT
Hi @tawdry nacelle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To render a Drawer inside a specific container (not covering the whole page), you should use the portal prop of the UDrawer component. By default, the Drawer renders in a portal attached to the body, but you can set the portal prop to a specific element (like a div inside your framed container) so the Drawer appears only within that container.
How to do it:
- Add a ref or an id to your container element.
- Pass that element (or its selector) to the
portalprop ofUDrawer.
Example:
<template>
<div ref="drawerContainer" class="relative w-[400px] h-[600px] border">
<UDrawer :portal="drawerContainer">
<UButton label="Open" />
<template #content>
<div class="p-4">Drawer content inside container</div>
</template>
</UDrawer>
</div>
</template>
<script setup>
import { ref } from 'vue'
const drawerContainer = ref(null)
</script>
- The
portalprop can accept anHTMLElement, a selector string, ortrue/false(default istrue, which attaches to the body). - Make sure your container has
position: relativeor similar, so the Drawer positions correctly inside it.
Reference:
This approach is supported by the portal prop in the Drawer API, which allows you to specify where the Drawer should be rendered, not just the default body location Drawer Props.
If you want to see a visual effect like scaling the background only inside the container, you may need to adjust the should-scale-background and related props, but the main requirement is to use the portal prop as shown above.