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 |