OLD | NEW |
1 <!-- | 1 <!-- |
2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
6 Code distributed by Google as part of the polymer project is also | 6 Code distributed by Google as part of the polymer project is also |
7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
8 --><html><head><link rel="import" href="../polymer/polymer.html"> | 8 --><html><head><link rel="import" href="../polymer/polymer.html"> |
9 <link rel="import" href="../iron-media-query/iron-media-query.html"> | 9 <link rel="import" href="../iron-media-query/iron-media-query.html"> |
10 <link rel="import" href="../iron-selector/iron-selector.html"> | 10 <link rel="import" href="../iron-selector/iron-selector.html"> |
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
65 </paper-header-panel> | 65 </paper-header-panel> |
66 </paper-drawer-panel> | 66 </paper-drawer-panel> |
67 | 67 |
68 To position the drawer to the right, add `right-drawer` attribute. | 68 To position the drawer to the right, add `right-drawer` attribute. |
69 | 69 |
70 <paper-drawer-panel right-drawer> | 70 <paper-drawer-panel right-drawer> |
71 <div drawer> Drawer panel... </div> | 71 <div drawer> Drawer panel... </div> |
72 <div main> Main panel... </div> | 72 <div main> Main panel... </div> |
73 </paper-drawer-panel> | 73 </paper-drawer-panel> |
74 | 74 |
75 Styling paper-drawer-panel: | 75 Styling `paper-drawer-panel` |
76 | 76 |
77 To change the main container: | 77 To change the main container: |
78 paper-drawer-panel { | 78 |
79 --paper-drawer-panel-main-container: { | 79 paper-drawer-panel { |
80 background-color: gray; | 80 --paper-drawer-panel-main-container: { |
81 }; | 81 background-color: gray; |
82 } | 82 }; |
| 83 } |
83 | 84 |
84 To change the drawer container when it's in the left side: | 85 To change the drawer container when it's in the left side: |
85 paper-drawer-panel { | 86 |
86 --paper-drawer-panel-left-drawer-container: { | 87 paper-drawer-panel { |
87 background-color: white; | 88 --paper-drawer-panel-left-drawer-container: { |
88 }; | 89 background-color: white; |
89 } | 90 }; |
| 91 } |
90 | 92 |
91 To change the drawer container when it's in the right side: | 93 To change the drawer container when it's in the right side: |
92 | 94 |
93 paper-drawer-panel { | 95 paper-drawer-panel { |
94 --paper-drawer-panel-right-drawer-container: { | 96 --paper-drawer-panel-right-drawer-container: { |
95 background-color: white; | 97 background-color: white; |
96 }; | 98 }; |
97 } | 99 } |
98 | 100 |
99 @group Paper elements | 101 @group Paper elements |
100 @element paper-drawer-panel | 102 @element paper-drawer-panel |
101 @demo demo/index.html | 103 @demo demo/index.html |
102 @hero hero.svg | 104 @hero hero.svg |
103 --> | 105 --> |
104 | 106 |
105 </head><body><dom-module id="paper-drawer-panel"> | 107 </head><body><dom-module id="paper-drawer-panel"> |
106 <link rel="import" type="css" href="paper-drawer-panel.css"> | 108 <link rel="import" type="css" href="paper-drawer-panel.css"> |
107 | 109 |
108 <template> | 110 <template> |
109 <iron-media-query id="mq" on-query-matches-changed="_onQueryMatchesChanged"
query="[[_computeMediaQuery(forceNarrow, responsiveWidth)]]"> | 111 <iron-media-query id="mq" on-query-matches-changed="_onQueryMatchesChanged"
query="[[_computeMediaQuery(forceNarrow, responsiveWidth)]]"> |
110 </iron-media-query> | 112 </iron-media-query> |
111 | 113 |
112 <iron-selector attr-for-selected="id" class$="[[_computeIronSelectorClass(na
rrow, transition, dragging, rightDrawer)]]" activate-event="" selected="[[select
ed]]"> | 114 <iron-selector attr-for-selected="id" class$="[[_computeIronSelectorClass(na
rrow, transition, dragging, rightDrawer, peeking)]]" activate-event="" selected=
"[[selected]]"> |
113 | 115 |
114 <div id="main" style$="[[_computeMainStyle(narrow, rightDrawer, drawerWidt
h)]]"> | 116 <div id="main" style$="[[_computeMainStyle(narrow, rightDrawer, drawerWidt
h)]]"> |
115 <content select="[main]"></content> | 117 <content select="[main]"></content> |
116 <div id="scrim" on-tap="closeDrawer"></div> | 118 <div id="scrim" on-tap="closeDrawer"></div> |
117 </div> | 119 </div> |
118 | 120 |
119 <div id="drawer" style$="[[_computeDrawerStyle(drawerWidth)]]"> | 121 <div id="drawer" style$="[[_computeDrawerStyle(drawerWidth)]]"> |
120 <content select="[drawer]"></content> | 122 <content select="[drawer]"></content> |
121 </div> | 123 </div> |
122 | 124 |
123 </iron-selector> | 125 </iron-selector> |
124 </template> | 126 </template> |
125 | 127 |
126 </dom-module> | 128 </dom-module> |
127 | 129 |
128 <script src="paper-drawer-panel-extracted.js"></script></body></html> | 130 <script src="paper-drawer-panel-extracted.js"></script></body></html> |
OLD | NEW |