Home | History | Annotate | Download | only in paper-item 
      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>
    147