third_party/polymer/components/paper-item/paper-item.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 -->
   9
  10 <!--
  11
  12 Material Design: <a href="http://www.google.com/design/spec/components/menus.html">Menus</a>
  13
  14 `paper-item` is a simple item object for use in menus. When the user touches the item, a ripple
  15 effect emanates from the point of contact. If used in a `core-selector`, the selected item will
  16 be highlighted.
  17
  18 Example:
  19
  20     <core-menu>
  21         <paper-item>Cut</paper-item>
  22         <paper-item>Copy</paper-item>
  23         <paper-item>Paste</paper-item>
  24     </core-menu>
  25
  26 Links
  27 -----
  28
  29 To use as a link, put an `<a>` element in the item. You may also use the `noink` attribute to
  30 prevent the ripple from "freezing" during a page navigation.
  31
  32 Example:
  33
  34     <paper-item noink>
  35         <a href="http://www.polymer-project.org" layout horizontal center>Polymer</a>
  36     </paper-item>
  37
  38 @group Paper Elements
  39 @element paper-item
  40 @extends paper-button-base
  41 @status unstable
  42 -->
  43
  44 <link href="../polymer/polymer.html" rel="import">
  45 <link href="../paper-button/paper-button-base.html" rel="import">
  46 <link href="../paper-ripple/paper-ripple.html" rel="import">
  47
  48 <polymer-element name="paper-item" extends="paper-button-base">
  49
  50   <template>
  51
  52     <style>
  53
  54       :host {
  55         display: block;
  56         position: relative;
  57         font-size: 16px;
  58         box-sizing: border-box;
  59         min-width: 7em;
  60         outline: none;
  61         -moz-user-select: none;
  62         -ms-user-select: none;
  63         -webkit-user-select: none;
  64         user-select: none;
  65         cursor: pointer;
  66         z-index: 0;
  67       }
  68
  69       :host([disabled]) {
  70         color: #a8a8a8;
  71         cursor: auto;
  72         pointer-events: none;
  73       }
  74
  75       :host(.core-selected) {
  76         background-color: #eaeaea;
  77       }
  78
  79       #ripple {
  80         pointer-events: none;
  81         z-index: -1;
  82       }
  83
  84       .button-content {
  85         padding: 0.9em 1em;
  86       }
  87
  88       polyfill-next-selector { content: '.button-content > a'; }
  89       ::content > a {
  90         height: 100%;
  91         /* flex */
  92         -ms-flex: 1 1 0.000000001px;
  93         -webkit-flex: 1;
  94         flex: 1;
  95         -webkit-flex-basis: 0.000000001px;
  96         flex-basis: 0.000000001px;
  97       }
  98
  99     </style>
 100
 101     <!-- this div is needed to position the ripple behind text content -->
 102     <div class="button-content" relative layout horizontal center>
 103       <content></content>
 104     </div>
 105
 106   </template>
 107
 108   <script>
 109     Polymer({
 110
 111       publish: {
 112
 113         /**
 114          * If true, the button will be styled with a shadow.
 115          *
 116          * @attribute raised
 117          * @type boolean
 118          * @default false
 119          */
 120         raised: false,
 121
 122         /**
 123          * By default the ripple emanates from where the user touched the button.
 124          * Set this to true to always center the ripple.
 125          *
 126          * @attribute recenteringTouch
 127          * @type boolean
 128          * @default false
 129          */
 130         recenteringTouch: false,
 131
 132         /**
 133          * By default the ripple expands to fill the button. Set this to false to
 134          * constrain the ripple to a circle within the button.
 135          *
 136          * @attribute fill
 137          * @type boolean
 138          * @default true
 139          */
 140         fill: true
 141
 142       }
 143
 144     });
 145   </script>
 146 </polymer-element>