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 * @module Polymer UI Elements |
| 9 */ |
| 10 /** |
| 11 * polymer-ui-breadcrumbs shows the user where they are in relation to a |
| 12 * hierarchy. Use 'crumbs' property to specify the content for breadcumbs. |
| 13 * |
| 14 * Example: |
| 15 * |
| 16 * <polymer-ui-breadcrumbs crumbs="{{crumbs}}" selectedCrumb="{{crumb}}"></p
olymer-ui-breadcrumbs> |
| 17 * |
| 18 * .... |
| 19 * this.crumbs = [ |
| 20 * {label: 'Overview'}, |
| 21 * {label: 'Subitem1'}, |
| 22 * {label: 'Subitem2'}, |
| 23 * {label: 'Subitem3'} |
| 24 * ]; |
| 25 * |
| 26 * @class polymer-ui-breadcrumbs |
| 27 */ |
| 28 /** |
| 29 * An array of objects describing the content for breadcrumbs. |
| 30 * |
| 31 * Example: |
| 32 * |
| 33 * this.crumbs = [ |
| 34 * {label: 'Overview'}, |
| 35 * {label: 'Subitem1'}, |
| 36 * {label: 'Subitem2'}, |
| 37 * {label: 'Subitem3'} |
| 38 * ]; |
| 39 * |
| 40 * @attribute crumbs |
| 41 * @type object |
| 42 * @default null |
| 43 */ |
| 44 /** |
| 45 * The index of the selected crumb. |
| 46 * |
| 47 * @attribute selected |
| 48 * @type number |
| 49 * @default null |
| 50 */ |
| 51 /** |
| 52 * Returns the model associated with the selected crumb. |
| 53 * |
| 54 * @attribute selectedCrumb |
| 55 * @type object |
| 56 * @default null |
| 57 */ |
| 58 --> |
| 59 <link rel="import" href="../polymer/polymer.html"> |
| 60 <link rel="import" href="../polymer-ui-icon/polymer-ui-icon.html"> |
| 61 <link rel="import" href="../polymer-selector/polymer-selector.html"> |
| 62 |
| 63 <polymer-element name="polymer-ui-breadcrumbs" attributes="crumbs selected selec
tedCrumb"> |
| 64 <template> |
| 65 <link rel="stylesheet" href="polymer-ui-breadcrumbs.css"> |
| 66 <div id="crumbs"> |
| 67 <template repeat="{{crumbs}}"> |
| 68 <li class="label"><a href="{{href}}" disabled?="{{!href}}">{{label}}</a>
</li> |
| 69 <polymer-ui-icon icon="dropdown"></polymer-ui-icon> |
| 70 </template> |
| 71 </div> |
| 72 <polymer-selector target="{{$.crumbs}}" itemsSelector="li" selected="{{selec
ted}}" selectedModel="{{selectedCrumb}}"></polymer-selector> |
| 73 </template> |
| 74 <script> |
| 75 Polymer('polymer-ui-breadcrumbs', { |
| 76 created: function() { |
| 77 this.crumbs = []; |
| 78 } |
| 79 }); |
| 80 </script> |
| 81 </polymer-element> |
OLD | NEW |