Model/Drawer Render

[QaahirStewart]

Description

Hey how would we do this. I want to have the drawer work in(fit in) a container or frame ex like the mobile frame such as Linktree preview.

https://streamable.com/4wxdch

[J-Michalek]

You might be looking for this: https://ui.nuxt.com/components/drawer#scale-background It looks similar to what is shown in the video.

[QaahirStewart]

No not this, i want to render a drawer inside a frame example I have a site on 1 side I have mobile frame/screen in the frame I want the drawer to work not the whole screen. It's basically something like linktree.

[QaahirStewart]

[QaahirStewart]

For reference the picture included the right side has the mobile frame. Clicking one of the buttons/links inside the mobile frame brings up the drawer within the mobile frame. I want the drawer to work inside the mobile frame / container.

Maybe i think it has something to do with portals/ teleport but I can't quite figure it out.

[J-Michalek]

@QaahirStewart Seems like I missunderstood your question at first, I thought you wanted the drawer to behave as such on a mobile device but it is just a container on a web page. Yes, you can do that with a portal prop, here is an example:

20250531-0440-27.1571360.mp4

<script setup lang="ts">
const container = useTemplateRef<HTMLElement>('container')
</script>

<template>
  <div>
    <UDrawer
      title="Drawer inside a container"
      direction="bottom"
      :overlay="false"
      :portal="container ?? undefined"
      :ui="{
        content: 'absolute'
      }"
    >
      <UButton color="neutral" variant="outline" label="Open in container" />

      <template #body>
        <Placeholder class="h-5 w-full" />
      </template>
    </UDrawer>

    <div ref="container" class="relative h-40 w-40 bg-error-500 overflow-hidden" />
  </div>
</template>

[QaahirStewart]

Yes thanks this is what i was looking for, Much Appreciated.