paper-item.html 3.29 KB
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at
The complete set of authors may be found at
The complete set of contributors may be found at
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-behaviors/iron-control-state.html">
<link rel="import" href="../iron-behaviors/iron-button-state.html">
<link rel="import" href="../paper-styles/paper-styles.html">
<link rel="import" href="paper-item-shared-styles.html">

Material design: [Lists](

`<paper-item>` is a non-interactive list item. By default, it is a horizontal flexbox.


Use this element with `<paper-item-body>` to make Material Design styled two-line and three-line

      <paper-item-body two-line>
        <div>Show your status</div>
        <div secondary>Your status is visible to everyone</div>
      <iron-icon icon="warning"></iron-icon>

### Styling

The following custom properties and mixins are available for styling:

Custom property               | Description                                    | Default
`--paper-item-min-height`     | Minimum height of the item                     | `48px`
`--paper-item`                | Mixin applied to the item                      | `{}`
`--paper-item-selected-weight`| The font weight of a selected item             | `bold`
`--paper-item-selected`       | Mixin applied to selected paper-items                | `{}`
`--paper-item-disabled-color` | The color for disabled paper-items             | `--disabled-text-color`
`--paper-item-disabled`       | Mixin applied to disabled paper-items        | `{}`
`--paper-item-focused`        | Mixin applied to focused paper-items         | `{}`
`--paper-item-focused-before` | Mixin applied to :before focused paper-items | `{}`

### Accessibility

This element has `role="listitem"` by default. Depending on usage, it may be more appropriate to set
`role="menuitem"`, `role="menuitemcheckbox"` or `role="menuitemradio"`.

    <paper-item role="menuitemcheckbox">
        Show your status

@group Paper Elements
@element paper-item
@demo demo/index.html

<dom-module id="paper-item">
    <style include="paper-item-shared-styles"></style>
      :host {



      is: 'paper-item',

      hostAttributes: {
        role: 'listitem',
        tabindex: '0'

      behaviors: [