third_party/polymer/v1_0/components-chromium/paper-drawer-panel/README.md

   1 # paper-drawer-panel
   2
   3 `paper-drawer-panel` contains a drawer panel and a main panel.  The drawer
   4 and the main panel are side-by-side with drawer on the left.  When the browser
   5 window size is smaller than the `responsiveWidth`, `paper-drawer-panel`
   6 changes to narrow layout.  In narrow layout, the drawer will be stacked on top
   7 of the main panel.  The drawer will slide in/out to hide/reveal the main
   8 panel.
   9
  10 Use the attribute `drawer` to indicate that the element is the drawer panel and
  11 `main` to indicate that the element is the main panel.
  12
  13 Example:
  14
  15 ```html
  16 <paper-drawer-panel>
  17   <div drawer> Drawer panel... </div>
  18   <div main> Main panel... </div>
  19 </paper-drawer-panel>
  20 ```
  21
  22 The drawer and the main panels are not scrollable.  You can set CSS overflow
  23 property on the elements to make them scrollable or use `paper-header-panel`.
  24
  25 Example:
  26
  27 ```html
  28 <paper-drawer-panel>
  29   <paper-header-panel drawer>
  30     <paper-toolbar></paper-toolbar>
  31     <div> Drawer content... </div>
  32   </paper-header-panel>
  33   <paper-header-panel main>
  34     <paper-toolbar></paper-toolbar>
  35     <div> Main content... </div>
  36   </paper-header-panel>
  37 </paper-drawer-panel>
  38 ```
  39
  40 An element that should toggle the drawer will automatically do so if it's
  41 given the `paper-drawer-toggle` attribute.  Also this element will automatically
  42 be hidden in wide layout.
  43
  44 Example:
  45
  46 ```html
  47 <paper-drawer-panel>
  48   <paper-header-panel drawer>
  49     <paper-toolbar>
  50       <div>Application</div>
  51     </paper-toolbar>
  52     <div> Drawer content... </div>
  53   </paper-header-panel>
  54   <paper-header-panel main>
  55     <paper-toolbar>
  56       <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
  57       <div>Title</div>
  58     </paper-toolbar>
  59     <div> Main content... </div>
  60   </paper-header-panel>
  61 </paper-drawer-panel>
  62 ```
  63
  64 To position the drawer to the right, add `right-drawer` attribute.
  65
  66 ```html
  67 <paper-drawer-panel right-drawer>
  68   <div drawer> Drawer panel... </div>
  69   <div main> Main panel... </div>
  70 </paper-drawer-panel>
  71 ```