Service workers: Allow HTTPS pages arrived at via HTTP redirect to use SW
[chromium-blink-merge.git] / third_party / polymer / v1_0 / components-chromium / paper-drawer-panel / README.md
blob282866367f82eed7e65d9301df396aaa0e68317b
1 # paper-drawer-panel
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.
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.
13 Example:
15 ```html
16 <paper-drawer-panel>
17   <div drawer> Drawer panel... </div>
18   <div main> Main panel... </div>
19 </paper-drawer-panel>
20 ```
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`.
25 Example:
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 ```
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.
44 Example:
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 ```
64 To position the drawer to the right, add `right-drawer` attribute.
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 ```