OLD | NEW |
(Empty) | |
| 1 |
| 2 <!--- |
| 3 |
| 4 This README is automatically generated from the comments in these files: |
| 5 paper-drawer-panel.html |
| 6 |
| 7 Edit those files, and our readme bot will duplicate them over here! |
| 8 Edit this file, and the bot will squash your changes :) |
| 9 |
| 10 --> |
| 11 |
| 12 [![Build Status](https://travis-ci.org/PolymerElements/paper-drawer-panel.svg?br
anch=master)](https://travis-ci.org/PolymerElements/paper-drawer-panel) |
| 13 |
| 14 _[Demo and API Docs](https://elements.polymer-project.org/elements/paper-drawer-
panel)_ |
| 15 |
| 16 |
| 17 ##<paper-drawer-panel> |
| 18 |
| 19 |
| 20 Material design: [Navigation drawer](https://www.google.com/design/spec/patterns
/navigation-drawer.html) |
| 21 |
| 22 `paper-drawer-panel` contains a drawer panel and a main panel. The drawer |
| 23 and the main panel are side-by-side with drawer on the left. When the browser |
| 24 window size is smaller than the `responsiveWidth`, `paper-drawer-panel` |
| 25 changes to narrow layout. In narrow layout, the drawer will be stacked on top |
| 26 of the main panel. The drawer will slide in/out to hide/reveal the main |
| 27 panel. |
| 28 |
| 29 Use the attribute `drawer` to indicate that the element is the drawer panel and |
| 30 `main` to indicate that the element is the main panel. |
| 31 |
| 32 Example: |
| 33 |
| 34 <paper-drawer-panel> |
| 35 <div drawer> Drawer panel... </div> |
| 36 <div main> Main panel... </div> |
| 37 </paper-drawer-panel> |
| 38 |
| 39 The drawer and the main panels are not scrollable. You can set CSS overflow |
| 40 property on the elements to make them scrollable or use `paper-header-panel`. |
| 41 |
| 42 Example: |
| 43 |
| 44 <paper-drawer-panel> |
| 45 <paper-header-panel drawer> |
| 46 <paper-toolbar></paper-toolbar> |
| 47 <div> Drawer content... </div> |
| 48 </paper-header-panel> |
| 49 <paper-header-panel main> |
| 50 <paper-toolbar></paper-toolbar> |
| 51 <div> Main content... </div> |
| 52 </paper-header-panel> |
| 53 </paper-drawer-panel> |
| 54 |
| 55 An element that should toggle the drawer will automatically do so if it's |
| 56 given the `paper-drawer-toggle` attribute. Also this element will automatically |
| 57 be hidden in wide layout. |
| 58 |
| 59 Example: |
| 60 |
| 61 <paper-drawer-panel> |
| 62 <paper-header-panel drawer> |
| 63 <paper-toolbar> |
| 64 <div>Application</div> |
| 65 </paper-toolbar> |
| 66 <div> Drawer content... </div> |
| 67 </paper-header-panel> |
| 68 <paper-header-panel main> |
| 69 <paper-toolbar> |
| 70 <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button
> |
| 71 <div>Title</div> |
| 72 </paper-toolbar> |
| 73 <div> Main content... </div> |
| 74 </paper-header-panel> |
| 75 </paper-drawer-panel> |
| 76 |
| 77 To position the drawer to the right, add `right-drawer` attribute. |
| 78 |
| 79 <paper-drawer-panel right-drawer> |
| 80 <div drawer> Drawer panel... </div> |
| 81 <div main> Main panel... </div> |
| 82 </paper-drawer-panel> |
| 83 |
| 84 ### Styling |
| 85 |
| 86 To change the main container: |
| 87 |
| 88 paper-drawer-panel { |
| 89 --paper-drawer-panel-main-container: { |
| 90 background-color: gray; |
| 91 }; |
| 92 } |
| 93 |
| 94 To change the drawer container when it's in the left side: |
| 95 |
| 96 paper-drawer-panel { |
| 97 --paper-drawer-panel-left-drawer-container: { |
| 98 background-color: white; |
| 99 }; |
| 100 } |
| 101 |
| 102 To change the drawer container when it's in the right side: |
| 103 |
| 104 paper-drawer-panel { |
| 105 --paper-drawer-panel-right-drawer-container: { |
| 106 background-color: white; |
| 107 }; |
| 108 } |
| 109 |
| 110 To customize the scrim: |
| 111 |
| 112 paper-drawer-panel { |
| 113 --paper-drawer-panel-scrim: { |
| 114 background-color: red; |
| 115 }; |
| 116 } |
| 117 |
| 118 The following custom properties and mixins are available for styling: |
| 119 |
| 120 Custom property | Description | Default |
| 121 ----------------|-------------|---------- |
| 122 `--paper-drawer-panel-scrim-opacity` | Scrim opacity | 1 |
| 123 `--paper-drawer-panel-drawer-container` | Mixin applied to drawer container | {} |
| 124 `--paper-drawer-panel-left-drawer-container` | Mixin applied to container when i
t's in the left side | {} |
| 125 `--paper-drawer-panel-main-container` | Mixin applied to main container | {} |
| 126 `--paper-drawer-panel-right-drawer-container` | Mixin applied to container when
it's in the right side | {} |
| 127 `--paper-drawer-panel-scrim` | Mixin applied to scrim | {} |
| 128 |
| 129 |
OLD | NEW |