| Index: third_party/polymer/v1_0/components-chromium/app-layout/app-toolbar/app-toolbar.html
|
| diff --git a/third_party/polymer/v1_0/components-chromium/app-layout/app-toolbar/app-toolbar.html b/third_party/polymer/v1_0/components-chromium/app-layout/app-toolbar/app-toolbar.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..aafe9fe5ca2d340b04354eed6d6ddc275bfeac13
|
| --- /dev/null
|
| +++ b/third_party/polymer/v1_0/components-chromium/app-layout/app-toolbar/app-toolbar.html
|
| @@ -0,0 +1,115 @@
|
| +<!--
|
| +@license
|
| +Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
| +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
| +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
| +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
| +Code distributed by Google as part of the polymer project is also
|
| +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
| +--><html><head><link rel="import" href="../../polymer/polymer.html">
|
| +<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
|
| +
|
| +<!--
|
| +app-toolbar is a horizontal toolbar containing items that can be used for
|
| +label, navigation, search and actions.
|
| +
|
| +### Example
|
| +
|
| +Add a title to the toolbar.
|
| +
|
| +```html
|
| +<app-toolbar>
|
| + <div title>App name</div>
|
| +</app-toolbar>
|
| +```
|
| +
|
| +Add a button to the left and right side of the toolbar.
|
| +
|
| +```html
|
| +<app-toolbar>
|
| + <paper-icon-button icon="menu"></paper-icon-button>
|
| + <div title>App name</div>
|
| + <paper-icon-button icon="search"></paper-icon-button>
|
| +</app-toolbar>
|
| +```
|
| +
|
| +You can use the attributes `top-item` or `bottom-item` to completely fit an element
|
| +to the top or bottom of the toolbar respectively.
|
| +
|
| +### Content attributes
|
| +
|
| +Attribute | Description
|
| +---------------------|---------------------------------------------------------
|
| +`title` | The main title element.
|
| +`condensed-title` | The title element if used inside a condensed app-header.
|
| +`spacer` | Adds a left margin of `64px`.
|
| +`bottom-item` | Sticks the element to the bottom of the toolbar.
|
| +`top-item` | Sticks the element to the top of the toolbar.
|
| +
|
| +### Styling
|
| +
|
| +Custom property | Description | Default
|
| +-----------------------------|------------------------------|-----------------------
|
| +`--app-toolbar-font-size` | Toolbar font size | 20px
|
| +
|
| +@group App Elements
|
| +@element app-toolbar
|
| +@demo app-toolbar/demo/index.html
|
| +-->
|
| +
|
| +</head><body><dom-module id="app-toolbar">
|
| + <template>
|
| + <style>
|
| + :host {
|
| + position: relative;
|
| +
|
| + @apply(--layout-horizontal);
|
| + @apply(--layout-center);
|
| +
|
| + height: 64px;
|
| + padding: 0 16px;
|
| +
|
| + pointer-events: none;
|
| +
|
| + font-size: var(--app-toolbar-font-size, 20px);
|
| + }
|
| +
|
| + :host > ::content > * {
|
| + pointer-events: auto;
|
| + }
|
| +
|
| + :host > ::content > paper-icon-button {
|
| + /* paper-icon-button/issues/33 */
|
| + font-size: 0;
|
| + }
|
| +
|
| + :host > ::content > [title],
|
| + :host > ::content > [condensed-title] {
|
| + pointer-events: none;
|
| + @apply(--layout-flex);
|
| + }
|
| +
|
| + :host > ::content > [bottom-item] {
|
| + position: absolute;
|
| + right: 0;
|
| + bottom: 0;
|
| + left: 0;
|
| + }
|
| +
|
| + :host > ::content > [top-item] {
|
| + position: absolute;
|
| + top: 0;
|
| + right: 0;
|
| + left: 0;
|
| + }
|
| +
|
| + :host > ::content > [spacer] {
|
| + margin-left: 64px;
|
| + }
|
| + </style>
|
| +
|
| + <content></content>
|
| + </template>
|
| +
|
| + </dom-module>
|
| +<script src="app-toolbar-extracted.js"></script></body></html>
|
|
|
Chromium Code Reviews
Issue 1984963002:
Roll Polymer elements (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master