WireScript
Components

drawer

Slide-in panel.

A slide-in panel from the left or right side. Defined inside screens and triggered by :to "#id".

Usage

Position

(screen example "Example" :desktop
  (box :padding 16
    (text "Click buttons to open drawers"))

  ; Right side (default)
  (drawer :id "settings" :right
    (text "Settings"))

  ; Left side
  (drawer :id "menu" :left
    (text "Menu")))

Flags

FlagEffect
:openDrawer is initially open
:leftDrawer slides from left
:rightDrawer slides from right
:topDrawer slides from top
:bottomDrawer slides from bottom
:rowHorizontal layout
:colVertical layout
:gridGrid layout
:centerCenter alignment
:startStart alignment
:endEnd alignment
:betweenSpace between
:fullFull size
:fillFill available space

Properties

PropertyTypeExample
:idstring:id "settings"
:titlestring:title "Settings"
:positionstring:position "left"
:gapnumber:gap 16
:paddingnumber:padding 24
:widthnumber:width 350
:heightany:height "100%"

Note: Default width is 400px if not specified.

Examples

Initially Open Drawer

Settings Drawer

Mobile Navigation

Filter Drawer

Cart Drawer

On this page