OLD | NEW |
(Empty) | |
| 1 <!-- |
| 2 Copyright 2013 The Polymer Authors. All rights reserved. |
| 3 Use of this source code is governed by a BSD-style |
| 4 license that can be found in the LICENSE file. |
| 5 --> |
| 6 |
| 7 <!-- |
| 8 /** |
| 9 * @module Polymer UI Elements |
| 10 */ |
| 11 /** |
| 12 * polymer-ui-toolbar is a horizontal bar containing elements that can perform a
ctions. |
| 13 * |
| 14 * Example: |
| 15 * |
| 16 * <polymer-ui-toolbar> |
| 17 * <polymer-ui-icon-button src="menu.png" on-click="{{menuAction}}"></poly
mer-ui-icon-button> |
| 18 * <div flex>Title</div> |
| 19 * <polymer-ui-icon-button src="more.png" on-click="{{moreAction}}"></poly
mer-ui-icon-button> |
| 20 * </polymer-ui-toolbar> |
| 21 * |
| 22 * polymer-ui-toolbar can adopt to smaller screen size. If the attribute "respo
nsive" is set |
| 23 * and the screen size is less than the responsiveWidth (default to 800px), the
toolbar will |
| 24 * be moved to the bottom of the page. |
| 25 * |
| 26 * Example: |
| 27 * |
| 28 * <polymer-ui-toolbar> |
| 29 * <polymer-ui-icon-button icon="menu"></polymer-ui-icon-button> |
| 30 * <div flex>Title</div> |
| 31 * <polymer-ui-toolbar responsive> |
| 32 * <polymer-ui-icon-button icon="add"></polymer-ui-icon-button> |
| 33 * <polymer-ui-icon-button icon="trash"></polymer-ui-icon-button> |
| 34 * <polymer-ui-icon-button icon="search"></polymer-ui-icon-button> |
| 35 * </polymer-ui-toolbar> |
| 36 * </polymer-ui-toolbar> |
| 37 * |
| 38 * @class polymer-ui-toolbar |
| 39 */ |
| 40 /** |
| 41 * Max-width when element becomes responsive. |
| 42 * |
| 43 * @attribute responsiveWidth |
| 44 * @type string |
| 45 * @default '800px' |
| 46 */ |
| 47 --> |
| 48 <link rel="import" href="../polymer/polymer.html"> |
| 49 <link rel="import" href="../polymer-ui-theme-aware/polymer-ui-theme-aware.html"> |
| 50 <link rel="import" href="../polymer-media-query/polymer-media-query.html"> |
| 51 <link rel="import" href="../polymer-flex-layout/polymer-flex-layout.html"> |
| 52 |
| 53 <polymer-element name="polymer-ui-toolbar" extends="polymer-ui-theme-aware" attr
ibutes="responsiveWidth"> |
| 54 <template> |
| 55 <link rel="stylesheet" href="polymer-ui-toolbar.css"> |
| 56 <polymer-flex-layout align="center"></polymer-flex-layout> |
| 57 <polymer-media-query query="max-width: {{responsiveWidth}}" queryMatches="{{
queryMatches}}"></polymer-media-query> |
| 58 <content></content> |
| 59 </template> |
| 60 <script> |
| 61 Polymer('polymer-ui-toolbar', { |
| 62 responsiveWidth: '800px', |
| 63 queryMatches: false, |
| 64 defaultTheme: 'polymer-ui-light-theme', |
| 65 queryMatchesChanged: function() { |
| 66 this.classList.toggle('narrow-layout', this.queryMatches); |
| 67 } |
| 68 }); |
| 69 </script> |
| 70 </polymer-element> |
OLD | NEW |