| OLD | NEW |
|---|
| (Empty) | |
| 1 <!-- |
| 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 |
| 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 |
| 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 |
| 8 --><!-- |
| 9 `paper-toolbar` is a horizontal bar containing items that can be used for |
| 10 label, navigation, search and actions. The items place inside the |
| 11 `paper-toolbar` are projected into a `class="horizontal center layout"` containe
r inside of |
| 12 `paper-toolbar`'s Shadow DOM. You can use flex attributes to control the items' |
| 13 sizing. |
| 14 |
| 15 Example: |
| 16 |
| 17 <paper-toolbar> |
| 18 <paper-icon-button icon="menu" on-tap="{{menuAction}}"></paper-icon-button
> |
| 19 <div flex>Title</div> |
| 20 <paper-icon-button icon="more" on-tap="{{moreAction}}"></paper-icon-button
> |
| 21 </paper-toolbar> |
| 22 |
| 23 `paper-toolbar` has a standard height, but can made be taller by setting `tall` |
| 24 class on the `paper-toolbar`. This will make the toolbar 3x the normal height. |
| 25 |
| 26 <paper-toolbar class="tall"> |
| 27 <paper-icon-button icon="menu"></paper-icon-button> |
| 28 </paper-toolbar> |
| 29 |
| 30 Apply `medium-tall` class to make the toolbar medium tall. This will make the |
| 31 toolbar 2x the normal height. |
| 32 |
| 33 <paper-toolbar class="medium-tall"> |
| 34 <paper-icon-button icon="menu"></paper-icon-button> |
| 35 </paper-toolbar> |
| 36 |
| 37 When `tall`, items can pin to either the top (default), middle or bottom. Use |
| 38 `middle` class for middle content and `bottom` class for bottom content. |
| 39 |
| 40 <paper-toolbar class="tall"> |
| 41 <paper-icon-button icon="menu"></paper-icon-button> |
| 42 <div class="middle">Middle Title</div> |
| 43 <div class="bottom">Bottom Title</div> |
| 44 </paper-toolbar> |
| 45 |
| 46 For `medium-tall` toolbar, the middle and bottom contents overlap and are |
| 47 pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are |
| 48 still honored separately. |
| 49 |
| 50 @group Polymer Core Elements |
| 51 @element paper-toolbar |
| 52 @homepage github.io |
| 53 --><html><head><link rel="import" href="../polymer/polymer.html"> |
| 54 <link rel="import" href="../paper-styles/paper-styles.html"> |
| 55 |
| 56 <style is="x-style"> |
| 57 |
| 58 * { |
| 59 |
| 60 --paper-toolbar-background: var(--default-primary-color); |
| 61 --paper-toolbar-color: var(--text-primary-color); |
| 62 } |
| 63 </style> |
| 64 |
| 65 </head><body><dom-module id="paper-toolbar"> |
| 66 |
| 67 <style> |
| 68 :host { |
| 69 /* technical */ |
| 70 display: block; |
| 71 position: relative; |
| 72 box-sizing: border-box; |
| 73 -moz-box-sizing: border-box; |
| 74 |
| 75 /* size */ |
| 76 height: 64px; |
| 77 |
| 78 background: var(--paper-toolbar-background); |
| 79 color: var(--paper-toolbar-color); |
| 80 mixin(--paper-font-title); |
| 81 |
| 82 mixin(--paper-toolbar); |
| 83 } |
| 84 |
| 85 :host(.animate) { |
| 86 /* transition */ |
| 87 transition: height 0.18s ease-in; |
| 88 } |
| 89 |
| 90 :host(.medium-tall) { |
| 91 height: 128px; |
| 92 } |
| 93 |
| 94 :host(.tall) { |
| 95 height: 192px; |
| 96 } |
| 97 |
| 98 .toolbar-tools { |
| 99 position: relative; |
| 100 height: 64px; |
| 101 padding: 0 16px; |
| 102 pointer-events: none; |
| 103 } |
| 104 |
| 105 /* |
| 106 * TODO: Where should media query breakpoints live so they can be shared bet
ween elements? |
| 107 */ |
| 108 |
| 109 @media (max-width: 639px) { |
| 110 :host { |
| 111 height: 56px; |
| 112 } |
| 113 |
| 114 :host(.medium-tall) { |
| 115 height: 112px; |
| 116 } |
| 117 |
| 118 :host(.tall) { |
| 119 height: 168px; |
| 120 } |
| 121 |
| 122 .toolbar-tools { |
| 123 height: 56px; |
| 124 padding: 0; |
| 125 } |
| 126 } |
| 127 |
| 128 /* middle bar */ |
| 129 #middleBar { |
| 130 position: absolute; |
| 131 top: 0; |
| 132 right: 0; |
| 133 left: 0; |
| 134 } |
| 135 |
| 136 :host(.tall) #middleBar, |
| 137 :host(.medium-tall) #middleBar { |
| 138 -webkit-transform: translateY(100%); |
| 139 transform: translateY(100%); |
| 140 } |
| 141 |
| 142 /* bottom bar */ |
| 143 #bottomBar { |
| 144 position: absolute; |
| 145 right: 0; |
| 146 bottom: 0; |
| 147 left: 0; |
| 148 } |
| 149 |
| 150 /* |
| 151 * make elements (e.g. buttons) respond to mouse/touch events |
| 152 * |
| 153 * `.toolbar-tools` disables touch events so multiple toolbars can stack and
not |
| 154 * absorb events. All children must have pointer events re-enabled to work a
s |
| 155 * expected. |
| 156 */ |
| 157 .toolbar-tools > ::content > *:not([disabled]) { |
| 158 pointer-events: auto; |
| 159 } |
| 160 |
| 161 </style> |
| 162 |
| 163 <template> |
| 164 |
| 165 <div id="bottomBar" class$="[[_computeBarClassName(bottomJustify)]]"> |
| 166 <content select=".bottom"></content> |
| 167 </div> |
| 168 |
| 169 <div id="middleBar" class$="[[_computeBarClassName(middleJustify)]]"> |
| 170 <content select=".middle"></content> |
| 171 </div> |
| 172 |
| 173 <div id="topBar" class$="[[_computeBarClassName(justify)]]"> |
| 174 <content></content> |
| 175 </div> |
| 176 |
| 177 </template> |
| 178 |
| 179 </dom-module> |
| 180 |
| 181 <script src="paper-toolbar-extracted.js"></script></body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1140583003:
Material PDF: Add required Polymer 0.8 elements. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master