Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(176)

Side by Side Diff: pkg/polymer/lib/elements/polymer-ui-toolbar/polymer-ui-toolbar.html

Issue 175443005: [polymer] import all elements (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: updated from bower Created 6 years, 9 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 | Annotate | Revision Log
OLDNEW
(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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698