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")))

Properties

accepts contentaccepts children

Identity

PropertyTypeDefault
:idstring-

Spacing

PropertyTypeDefault
:gapnumber0
:paddingnumber0

Dimensions

PropertyTypeDefault
:widthany-
:heightany-

Position

PropertyTypeDefault
:positionsymbol-
:topflag-
:bottomflag-
:leftflag-
:rightflag-

State

PropertyTypeDefault
:openflag-

Content

PropertyTypeDefault
:titlestring-

Note: Default width is 400px if not specified.

Examples

Initially Open Drawer

Settings Drawer

Mobile Navigation

Filter Drawer

Cart Drawer

On this page