Nuxt•4d ago

drag drawer to resize

how do i take my UDrawer which is only about 200px high due to minimal content and let me resize it to take up the full height of the window

8 Replies

kapa.ai•4d ago

Hi @pearbender. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The knowledge sources do not indicate that the UDrawer component in Nuxt UI Pro currently supports resizing by dragging, similar to how DashboardSidebar or DashboardPanel can be made resizable with a handle. UDrawer supports drag-to-open/close (with the handle), but not drag-to-resize for changing its height or width interactively. To make the drawer take up the full height of the window, you can ensure your content fills the available space by applying appropriate classes (e.g., min-h-screen or h-full) to the content inside the drawer. For example:

<template>
  <UDrawer>
    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
    <template #content>
      <div class="min-h-screen m-4"> <!-- This div will fill the viewport height -->
        <Placeholder />
      </div>
    </template>
  </UDrawer>
</template>

<template>
  <UDrawer>
    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
    <template #content>
      <div class="min-h-screen m-4"> <!-- This div will fill the viewport height -->
        <Placeholder />
      </div>
    </template>
  </UDrawer>
</template>

However, this only makes the content fill the height; it does not allow the user to resize the drawer by dragging. The drawer's height is determined by its content and the direction prop (e.g., direction="bottom" or direction="right"), but there is no documented prop or slot for user-resizable height or width via dragging for UDrawer as of now. If you need a resizable panel, consider using UDashboardPanel or UDashboardSidebar, which do support resizing via the resizable prop and a drag handle DashboardPanel Usage DashboardSidebar Usage. In summary:
- UDrawer does not support drag-to-resize for height/width.
- You can make its content fill the window, but not resize the drawer itself by dragging UDrawer Usage.
- For resizable panels, use UDashboardPanel or UDashboardSidebar. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@779279431419559947> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

pearbenderOP•4d ago

@kapa.ai What are the snap points then?

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- In the context of drawers (and similar overlay components), snap points are an array of values (percentages or pixel values) that define preset positions the drawer can "snap" to as the user drags it. For example, if you set snap points to [0.2, 0.5, 0.8], the drawer can be dragged to 20%, 50%, or 80% of the screen height, and will "snap" to the nearest one when released. From the knowledge sources, the snapPoints prop is described as:

snapPoints?: (string | number)[]
Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible. Example [0.2, 0.5, 0.8]. You can also use px values, which doesn't take screen height into account.

— Dashboard Sidebar Props

While this description is found under the DashboardSidebar component, the same prop and behavior are referenced in the context of drawers and overlays, indicating that snap points allow you to control how much of the screen the drawer will cover at each draggable "stop." This is useful for creating drawers that can be partially or fully expanded by the user. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@779279431419559947> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

pearbenderOP•4d ago

@kapa.ai This is exactly what i want but it's not working

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- If you have set the snapPoints prop on UDrawer but it is not working as expected, the knowledge sources do not provide a detailed example or troubleshooting steps specifically for snapPoints on UDrawer. The documentation describes snapPoints as an array of numbers (percentages or pixel values) that define the positions the drawer can snap to, such as [0.2, 0.5, 0.8], but does not include a working code example or mention any required additional setup for UDrawer Dashboard Sidebar Props. If snapPoints is not functioning, possible reasons (based on the available documentation) could include: - The prop may not be fully supported or implemented for UDrawer, as most detailed documentation and examples are for DashboardSidebar and DashboardPanel. - There may be required context or additional props not covered in the knowledge sources. I'm sorry, but the knowledge sources do not contain enough information to provide a definitive solution for snapPoints not working with UDrawer. You may want to check the official documentation for updates or reach out to the Nuxt UI community for further assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@779279431419559947> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

drag drawer to resize

Did you find this page helpful?