third_party/polymer/v1_0/components-chromium/app-layout/app-toolbar/app-toolbar.html - Issue 1984963002: Roll Polymer elements

Side by Side Diff: third_party/polymer/v1_0/components-chromium/app-layout/app-toolbar/app-toolbar.html

Issue 1984963002: Roll Polymer elements (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 4 years, 7 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

« no previous file with comments | « third_party/polymer/v1_0/components-chromium/app-layout/app-scrollpos-control/compiled_resources2.gyp ('k') | third_party/polymer/v1_0/components-chromium/app-layout/app-toolbar/app-toolbar-extracted.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!--

	2 @license

	3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.

	4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt

	5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt

	6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt

	7 Code distributed by Google as part of the polymer project is also

	8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt

	9 --><html><head><link rel="import" href="../../polymer/polymer.html">

	10 <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">

	11

	12 <!--

	13 app-toolbar is a horizontal toolbar containing items that can be used for

	14 label, navigation, search and actions.

	15

	16 ### Example

	17

	18 Add a title to the toolbar.

	19

	20 ```html

	21 <app-toolbar>

	22 <div title>App name</div>

	23 </app-toolbar>

	24 ```

	25

	26 Add a button to the left and right side of the toolbar.

	27

	28 ```html

	29 <app-toolbar>

	30 <paper-icon-button icon="menu"></paper-icon-button>

	31 <div title>App name</div>

	32 <paper-icon-button icon="search"></paper-icon-button>

	33 </app-toolbar>

	34 ```

	35

	36 You can use the attributes `top-item` or `bottom-item` to completely fit an elem ent

	37 to the top or bottom of the toolbar respectively.

	38

	39 ### Content attributes

	40

	41 Attribute \| Description

	42 ---------------------\|---------------------------------------------------------

	43 `title` \| The main title element.

	44 `condensed-title` \| The title element if used inside a condensed app-header.

	45 `spacer` \| Adds a left margin of `64px`.

	46 `bottom-item` \| Sticks the element to the bottom of the toolbar.

	47 `top-item` \| Sticks the element to the top of the toolbar.

	48

	49 ### Styling

	50

	51 Custom property \| Description \| Default

	52 -----------------------------\|------------------------------\|------------------- ----

	53 `--app-toolbar-font-size` \| Toolbar font size \| 20px

	54

	55 @group App Elements

	56 @element app-toolbar

	57 @demo app-toolbar/demo/index.html

	58 -->

	59

	60 </head><body><dom-module id="app-toolbar">

	61 <template>

	62 <style>

	63 :host {

	64 position: relative;

	65

	66 @apply(--layout-horizontal);

	67 @apply(--layout-center);

	68

	69 height: 64px;

	70 padding: 0 16px;

	71

	72 pointer-events: none;

	73

	74 font-size: var(--app-toolbar-font-size, 20px);

	75 }

	76

	77 :host > ::content > * {

	78 pointer-events: auto;

	79 }

	80

	81 :host > ::content > paper-icon-button {

	82 /* paper-icon-button/issues/33 */

	83 font-size: 0;

	84 }

	85

	86 :host > ::content > [title],

	87 :host > ::content > [condensed-title] {

	88 pointer-events: none;

	89 @apply(--layout-flex);

	90 }

	91

	92 :host > ::content > [bottom-item] {

	93 position: absolute;

	94 right: 0;

	95 bottom: 0;

	96 left: 0;

	97 }

	98

	99 :host > ::content > [top-item] {

	100 position: absolute;

	101 top: 0;

	102 right: 0;

	103 left: 0;

	104 }

	105

	106 :host > ::content > [spacer] {

	107 margin-left: 64px;

	108 }

	109 </style>

	110

	111 <content></content>

	112 </template>

	113

	114 </dom-module>

	115 <script src="app-toolbar-extracted.js"></script></body></html>

OLD	NEW