Drawer

Drop your things in this drawer.

Example

Props

🕹️ standard props
open
boolean
Controls the visibility of the drawer.
false
position
"left" | "top" | "right" | "bottom"
Position of the drawer relative to the screen.
"left"
overlay
boolean
Whether to display an overlay behind the drawer.
false
closeOnClickOutside
boolean
Whether to close the drawer when clicking outside of it.
true
items
Item[]
Array of items to be displayed in the navigator.
[]
teleportedUid
string | undefined
Unique ID for teleported elements.
undefined
_space
string | undefined
Custom space for the drawer.
undefined
_openingSpeed
string | undefined
Speed of the drawer opening animation.
undefined
_backgroundColor
string | undefined
Background color of the drawer.
undefined
_color
string | undefined
Text color of the drawer.
undefined
_overflow
string | undefined
Overflow behavior of the drawer.
undefined
_borderRadius
string | undefined
Border radius of the drawer.
undefined
_margin
string | undefined
Margin of the drawer.
undefined
_overlaySpeed
string | undefined
Speed of the overlay animation.
undefined
_overlayBackgroundColor
string | undefined
Background color of the overlay.
undefined
_overlayOpacity
string | undefined
Opacity of the overlay.
undefined
🎨 style props
--drawer-space
size
Space occupied by the drawer.
20rem
--drawer-opening-speed
time
Speed of the drawer opening animation.
.3s
--drawer-overlay-speed
time
Speed of the overlay animation.
.2s
--drawer-overlay-opacity
opacity
Opacity of the overlay.
50%
--drawer-overlay-background-color
color
Background color of the overlay.
rgb(var(--global-color-grey-900))
--drawer-z-index
z-index
Z-index of the drawer.
30
--drawer-background-color
color
Background color of the drawer.
rgb(var(--global-color-background-200))
--drawer-overflow
overflow
Overflow behavior of the drawer.
auto

Slots

children

Custom content inside the drawer

Default content:

<div
  style:display="flex"
  style:justify-content="center"
  style:align-items="center"
  style:margin-top={position == "left" || position == "right"
    ? "10px"
    : "0px"}
  style:height={position == "top" || position == "bottom"
    ? "100%"
    : "fit-content"}
>
  <Navigator
    {items}
    vertical={position == "right" || position == "left"}
    {onitemClick}
  />
</div>
    

Events

onclose
Triggered when the drawer is closed.
onitemClick

Triggered when an item in the navigator is clicked.

Attribute	Type	Description
item	Item	The item that was clicked.