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

Side by Side Diff: polymer_1.2.3/paper-item/README.md

Issue 1581713003: [third_party] add polymer 1.2.3 (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: bower.json Created 4 years, 11 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
OLDNEW
(Empty)
1
2 <!---
3
4 This README is automatically generated from the comments in these files:
5 paper-icon-item.html paper-item-behavior.html paper-item-body.html paper-item .html
6
7 Edit those files, and our readme bot will duplicate them over here!
8 Edit this file, and the bot will squash your changes :)
9
10 -->
11
12 [![Build Status](https://travis-ci.org/PolymerElements/paper-item.svg?branch=mas ter)](https://travis-ci.org/PolymerElements/paper-item)
13
14 _[Demo and API Docs](https://elements.polymer-project.org/elements/paper-item)_
15
16
17 ##&lt;paper-item&gt;
18
19
20 Material design: [Lists](https://www.google.com/design/spec/components/lists.htm l)
21
22 `<paper-item>` is an interactive list item. By default, it is a horizontal flexb ox.
23
24 <paper-item>Item</paper-item>
25
26 Use this element with `<paper-item-body>` to make Material Design styled two-lin e and three-line
27 items.
28
29 <paper-item>
30 <paper-item-body two-line>
31 <div>Show your status</div>
32 <div secondary>Your status is visible to everyone</div>
33 </paper-item-body>
34 <iron-icon icon="warning"></iron-icon>
35 </paper-item>
36
37 ### Styling
38
39 The following custom properties and mixins are available for styling:
40
41 Custom property | Description | D efault
42 ------------------------------|----------------------------------------------|-- --------
43 `--paper-item-min-height` | Minimum height of the item | ` 48px`
44 `--paper-item` | Mixin applied to the item | ` {}`
45 `--paper-item-selected-weight`| The font weight of a selected item | ` bold`
46 `--paper-item-selected` | Mixin applied to selected paper-items | ` {}`
47 `--paper-item-disabled-color` | The color for disabled paper-items | ` --disabled-text-color`
48 `--paper-item-disabled` | Mixin applied to disabled paper-items | ` {}`
49 `--paper-item-focused` | Mixin applied to focused paper-items | ` {}`
50 `--paper-item-focused-before` | Mixin applied to :before focused paper-items | ` {}`
51
52 ### Accessibility
53
54 This element has `role="listitem"` by default. Depending on usage, it may be mor e appropriate to set
55 `role="menuitem"`, `role="menuitemcheckbox"` or `role="menuitemradio"`.
56
57 <paper-item role="menuitemcheckbox">
58 <paper-item-body>
59 Show your status
60 </paper-item-body>
61 <paper-checkbox></paper-checkbox>
62 </paper-item>
63
64
65
66 ##&lt;paper-icon-item&gt;
67
68
69 `<paper-icon-item>` is a convenience element to make an item with icon. It is an interactive list
70 item with a fixed-width icon area, according to Material Design. This is useful if the icons are of
71 varying widths, but you want the item bodies to line up. Use this like a `<paper -item>`. The child
72 node with the attribute `item-icon` is placed in the icon area.
73
74 <paper-icon-item>
75 <iron-icon icon="favorite" item-icon></iron-icon>
76 Favorite
77 </paper-icon-item>
78 <paper-icon-item>
79 <div class="avatar" item-icon></div>
80 Avatar
81 </paper-icon-item>
82
83 ### Styling
84
85 The following custom properties and mixins are available for styling:
86
87 Custom property | Description | Default
88 ------------------------------|------------------------------------------------| ----------
89 `--paper-item-icon-width` | Width of the icon area | `56px`
90 `--paper-icon-item` | Mixin applied to the item | `{}`
91 `--paper-item-selected-weight`| The font weight of a selected item | `bold`
92 `--paper-item-selected` | Mixin applied to selected paper-items | `{}`
93 `--paper-item-disabled-color` | The color for disabled paper-items | `--disabled-text-color`
94 `--paper-item-disabled` | Mixin applied to disabled paper-items | ` {}`
95 `--paper-item-focused` | Mixin applied to focused paper-items | ` {}`
96 `--paper-item-focused-before` | Mixin applied to :before focused paper-items | ` {}`
97
98
99 ##&lt;paper-item-body&gt;
100
101
102 Use `<paper-item-body>` in a `<paper-item>` or `<paper-icon-item>` to make two- or
103 three- line items. It is a flex item that is a vertical flexbox.
104
105 <paper-item>
106 <paper-item-body two-line>
107 <div>Show your status</div>
108 <div secondary>Your status is visible to everyone</div>
109 </paper-item-body>
110 </paper-item>
111
112 The child elements with the `secondary` attribute is given secondary text stylin g.
113
114 ### Styling
115
116 The following custom properties and mixins are available for styling:
117
118 Custom property | Description | Default
119 ----------------|-------------|----------
120 `--paper-item-body-two-line-min-height` | Minimum height of a two-line item | `72px`
121 `--paper-item-body-three-line-min-height` | Minimum height of a three-line item | `88px`
122 `--paper-item-body-secondary-color` | Foreground color for the `secondary` area | `--secondary-text-color`
123 `--paper-item-body-secondary` | Mixin applied to the `secondary` are a | `{}`
124
125
126
127 <!-- No docs for Polymer.PaperItemBehavior found. -->
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698