Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(137)

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-drawer-panel/README.md

Issue 1766433002: Roll Polymer to 1.3.1 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: rebase Created 4 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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 [![Build Status](https://travis-ci.org/PolymerElements/paper-drawer-panel.svg?br anch=master)](https://travis-ci.org/PolymerElements/paper-drawer-panel) 15 [![Build status](https://travis-ci.org/PolymerElements/paper-drawer-panel.svg?br anch=master)](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 ##&lt;paper-drawer-panel&gt; 20 ##&lt;paper-drawer-panel&gt;
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
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698