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

Side by Side Diff: third_party/polymer/components/paper-checkbox/README.md

Issue 2906483004: [pinpoint] Add iron-form and paper-checkbox to polymer components. (Closed)
Patch Set: Created 3 years, 6 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 [![Build status](https://travis-ci.org/PolymerElements/paper-checkbox.svg?branch =master)](https://travis-ci.org/PolymerElements/paper-checkbox)
2
3 ##<paper-checkbox>
4
5 `paper-checkbox` is a [material design checkbox](https://www.google.com/design/s pec/components/selection-controls.html#selection-controls-checkbox).
6 User can tap the checkbox to check or uncheck it. Usually you use checkboxes
7 to allow user to select multiple options from a set. If you have a single
8 ON/OFF option, avoid using a single checkbox and use `paper-toggle-button`
9 instead.
10
11 Example:
12 <!---
13 ```
14 <custom-element-demo>
15 <template>
16 <script src="../webcomponentsjs/webcomponents-lite.js"></script>
17 <link rel="import" href="paper-checkbox.html">
18 <style is="custom-style">
19 paper-checkbox {
20 font-family: 'Roboto', sans-serif;
21 margin: 24px;
22 }
23
24 paper-checkbox:first-child {
25 --primary-color: #ff5722;
26 }
27
28 paper-checkbox.styled {
29 align-self: center;
30 border: 1px solid var(--paper-green-200);
31 padding: 8px 16px;
32 --paper-checkbox-checked-color: var(--paper-green-500);
33 --paper-checkbox-checked-ink-color: var(--paper-green-500);
34 --paper-checkbox-unchecked-color: var(--paper-green-900);
35 --paper-checkbox-unchecked-ink-color: var(--paper-green-900);
36 --paper-checkbox-label-color: var(--paper-green-500);
37 --paper-checkbox-label-spacing: 0;
38 --paper-checkbox-margin: 8px 16px 8px 0;
39 --paper-checkbox-vertical-align: top;
40 }
41
42 paper-checkbox .subtitle {
43 display: block;
44 font-size: 0.8em;
45 margin-top: 2px;
46 max-width: 150px;
47 }
48 </style>
49 <next-code-block></next-code-block>
50 </template>
51 </custom-element-demo>
52 ```
53 -->
54 ```html
55 <paper-checkbox checked>Checked</paper-checkbox>
56 <paper-checkbox class="styled">
57 Checkbox
58 <span class="subtitle">
59 With a longer label
60 </span>
61 </paper-checkbox>
62 <paper-checkbox disabled>Disabled</paper-checkbox>
63 ```
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698