| 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 |