Drawer

Navigation drawers provide access to destinations in your app. Side sheets are surfaces containing supplementary content that are anchored to the edge of the screen.

Usage

import { ItsyDrawer } from '@itsy-ui/navigation';

const schema = {
  "width": 520,
  "title": "Simple Drawer",
  "size": "default",
  "controlSchema": {
    "name": "label",
    "properties": {
      "ui:widget": "label",
      "title": "Temporary navigation drawers can toggle open or closed.
       Closed by default, the drawer opens temporarily above all other content 
       until a section is selected."
    }
  }
}

 <ItsyDrawer type="Drawer" schema={schema} />


API

name type default description
className String additional class name of root node.
style Object {} Inline style object
width String Width of the drawer control
schema Object {} Schema which contains information to be displayed inside drawer.


Schema API’s

name type default description
title String Drawer title text.
controlSchema object Schema widget to be displayed inside the drawer.
width number 520 Width of the drawer
showOK boolean true Flag to show/hide "Ok" button
okText string Ok Text to be displayed in "Ok" button
onOk function Callback to be triggered when click ok button
onOKTransition string Transition to be triggered when click ok button
showCancel boolean true Flag to show/hide "Cancel" button
cancelText string Ok Text to be displayed in "Cancel" button
onCancel function Callback to be triggered when click cancel button
onCancelTransition string Transition to be triggered when click cancel button


Compatibility

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Electron
Electron
Edge last 2 versions last 2 versions last 2 versions last 2 versions