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 --> | 8 --> |
9 | 9 |
10 <link rel="import" href="../polymer/polymer.html"> | 10 <link rel="import" href="../polymer/polymer.html"> |
(...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
45 <paper-toolbar class="tall"> | 45 <paper-toolbar class="tall"> |
46 <paper-icon-button icon="menu"></paper-icon-button> | 46 <paper-icon-button icon="menu"></paper-icon-button> |
47 <div class="middle title">Middle Title</div> | 47 <div class="middle title">Middle Title</div> |
48 <div class="bottom title">Bottom Title</div> | 48 <div class="bottom title">Bottom Title</div> |
49 </paper-toolbar> | 49 </paper-toolbar> |
50 | 50 |
51 For `medium-tall` toolbar, the middle and bottom contents overlap and are | 51 For `medium-tall` toolbar, the middle and bottom contents overlap and are |
52 pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are | 52 pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are |
53 still honored separately. | 53 still honored separately. |
54 | 54 |
| 55 To make an element completely fit at the bottom of the toolbar, use `fit` along |
| 56 with `bottom`. |
| 57 |
| 58 <paper-toolbar class="tall"> |
| 59 <div id="progressBar" class="bottom fit"></div> |
| 60 </paper-toolbar> |
| 61 |
55 ### Styling | 62 ### Styling |
56 | 63 |
57 The following custom properties and mixins are available for styling: | 64 The following custom properties and mixins are available for styling: |
58 | 65 |
59 Custom property | Description | Default | 66 Custom property | Description | Default |
60 ----------------|-------------|---------- | 67 ----------------|-------------|---------- |
61 `--paper-toolbar-background` | Toolbar background color | `--default-primary
-color` | 68 `--paper-toolbar-background` | Toolbar background color | `--default-primary
-color` |
62 `--paper-toolbar-color` | Toolbar foreground color | `--text-primary-co
lor` | 69 `--paper-toolbar-color` | Toolbar foreground color | `--text-primary-co
lor` |
63 `--paper-toolbar` | Mixin applied to the toolbar | `{}` | 70 `--paper-toolbar` | Mixin applied to the toolbar | `{}` |
64 | 71 |
(...skipping 134 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
199 .toolbar-tools > ::content[select=".middle"] > .title, | 206 .toolbar-tools > ::content[select=".middle"] > .title, |
200 .toolbar-tools > ::content[select=".bottom"] > .title { | 207 .toolbar-tools > ::content[select=".bottom"] > .title { |
201 margin-left: 56px; | 208 margin-left: 56px; |
202 } | 209 } |
203 | 210 |
204 .toolbar-tools > ::content > paper-icon-button + .title, | 211 .toolbar-tools > ::content > paper-icon-button + .title, |
205 .toolbar-tools > ::content[select=".middle"] paper-icon-button + .title, | 212 .toolbar-tools > ::content[select=".middle"] paper-icon-button + .title, |
206 .toolbar-tools > ::content[select=".bottom"] paper-icon-button + .title { | 213 .toolbar-tools > ::content[select=".bottom"] paper-icon-button + .title { |
207 margin-left: 0; | 214 margin-left: 0; |
208 } | 215 } |
| 216 |
| 217 .toolbar-tools > ::content > .fit { |
| 218 position: absolute; |
| 219 top: auto; |
| 220 right: 0; |
| 221 bottom: 0; |
| 222 left: 0; |
| 223 width: auto; |
| 224 margin: 0; |
| 225 } |
| 226 |
209 </style> | 227 </style> |
210 | 228 |
211 <template> | 229 <template> |
212 | 230 |
213 <div id="topBar" class$="[[_computeBarClassName(justify)]]"> | 231 <div id="topBar" class$="[[_computeBarClassName(justify)]]"> |
214 <content select=":not(.middle):not(.bottom)"></content> | 232 <content select=":not(.middle):not(.bottom)"></content> |
215 </div> | 233 </div> |
216 | 234 |
217 <div id="middleBar" class$="[[_computeBarClassName(middleJustify)]]"> | 235 <div id="middleBar" class$="[[_computeBarClassName(middleJustify)]]"> |
218 <content select=".middle"></content> | 236 <content select=".middle"></content> |
(...skipping 116 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
335 } | 353 } |
336 } | 354 } |
337 } | 355 } |
338 if (labelledBy.length > 0) { | 356 if (labelledBy.length > 0) { |
339 this.setAttribute('aria-labelledby', labelledBy.join(' ')); | 357 this.setAttribute('aria-labelledby', labelledBy.join(' ')); |
340 } | 358 } |
341 }, | 359 }, |
342 | 360 |
343 _computeBarClassName: function(barJustify) { | 361 _computeBarClassName: function(barJustify) { |
344 var classObj = { | 362 var classObj = { |
345 center: true, | 363 'center': true, |
346 horizontal: true, | 364 'horizontal': true, |
347 layout: true, | 365 'layout': true, |
348 'toolbar-tools': true | 366 'toolbar-tools': true |
349 }; | 367 }; |
350 | 368 |
351 // If a blank string or any falsy value is given, no other class name is | 369 // If a blank string or any falsy value is given, no other class name is |
352 // added. | 370 // added. |
353 if (barJustify) { | 371 if (barJustify) { |
354 var justifyClassName = (barJustify === 'justified') ? | 372 var justifyClassName = (barJustify === 'justified') ? |
355 barJustify : | 373 barJustify : |
356 barJustify + '-justified'; | 374 barJustify + '-justified'; |
357 | 375 |
358 classObj[justifyClassName] = true; | 376 classObj[justifyClassName] = true; |
359 } | 377 } |
360 | 378 |
361 return classNames(classObj); | 379 return classNames(classObj); |
362 } | 380 } |
363 | 381 |
364 }); | 382 }); |
365 | 383 |
366 }()); | 384 }()); |
367 | 385 |
368 </script> | 386 </script> |
OLD | NEW |