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