Components
Drawer
The best way to navigate through your app on mobile devices.
Usage
<template>
<NXW-Drawer v-model="true" height="h-full" absolute :disable-overflow="false">
<div
v-for="item in drawerItems"
:key="item.text"
class="h-14 w-full cursor-pointer flex items-center px-2 gap-10 hover:bg-primary-400/50 transition-color ease-in-out duration-300"
>
<div class="w-12 grid place-items-center">
<UIcon :name="item.icon" class="size-7" />
</div>
<div>
{{ item.text }}
</div>
</div>
</NXW-Drawer>
</template>
Props
absolute
boolean
Default
false
border
boolean
|
string
Default
border-r dark:border-zinc-700 border-gray-500
color
object
Default
{
"bg": "bg-gray-200 dark:bg-zinc-900",
"overlayBg": "bg-black/50"
}
disableOverflow
boolean
Default
true
expandOnHover
boolean
|
object
Default
{
"width": "w-12",
"hoverWidth": "hover:w-80"
}
fixed
boolean
Default
true
height
string
Default
h-screen
mobileWidth
number
Default
768
noMobile
boolean
Default
false
overlay
boolean
Default
true
permanent
boolean
Default
false
right
boolean
Default
false
transition
boolean
|
object
Default
{
"duration": "duration-300",
"ease": "ease-in-out"
}
width
string
Default
w-80
zIndex
string
Default
z-[100]
Slots
default (slot)
The content of the drawer.