-
Notifications
You must be signed in to change notification settings - Fork 62
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update readme to have an inline demo & not include docs (#153)
- Loading branch information
Showing
1 changed file
with
53 additions
and
53 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,63 +1,63 @@ | ||
|
|
||
| <!--- | ||
| This README is automatically generated from the comments in these files: | ||
| paper-checkbox.html | ||
| Edit those files, and our readme bot will duplicate them over here! | ||
| Edit this file, and the bot will squash your changes :) | ||
| The bot does some handling of markdown. Please file a bug if it does the wrong | ||
| thing! https://github.com/PolymerLabs/tedium/issues | ||
| --> | ||
|
|
||
| [](https://travis-ci.org/PolymerElements/paper-checkbox) | ||
|
|
||
| _[Demo and API docs](https://elements.polymer-project.org/elements/paper-checkbox)_ | ||
|
|
||
|
|
||
| ##<paper-checkbox> | ||
|
|
||
| Material design: [Checkbox](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox) | ||
|
|
||
| `paper-checkbox` is a button that can be either checked or unchecked. User | ||
| can tap the checkbox to check or uncheck it. Usually you use checkboxes | ||
| to allow user to select multiple options from a set. If you have a single | ||
| `paper-checkbox` is a [material design checkbox](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox). | ||
| User can tap the checkbox to check or uncheck it. Usually you use checkboxes | ||
| to allow user to select multiple options from a set. If you have a single | ||
| ON/OFF option, avoid using a single checkbox and use `paper-toggle-button` | ||
| instead. | ||
|
|
||
| Example: | ||
|
|
||
| <!--- | ||
| ``` | ||
| <custom-element-demo> | ||
| <template> | ||
| <script src="../webcomponentsjs/webcomponents-lite.js"></script> | ||
| <link rel="import" href="paper-checkbox.html"> | ||
| <style is="custom-style"> | ||
| paper-checkbox { | ||
| font-family: 'Roboto', sans-serif; | ||
| margin: 24px; | ||
| } | ||
| paper-checkbox:first-child { | ||
| --primary-color: #ff5722; | ||
| } | ||
| paper-checkbox.styled { | ||
| align-self: center; | ||
| border: 1px solid var(--paper-green-200); | ||
| padding: 8px 16px; | ||
| --paper-checkbox-checked-color: var(--paper-green-500); | ||
| --paper-checkbox-checked-ink-color: var(--paper-green-500); | ||
| --paper-checkbox-unchecked-color: var(--paper-green-900); | ||
| --paper-checkbox-unchecked-ink-color: var(--paper-green-900); | ||
| --paper-checkbox-label-color: var(--paper-green-500); | ||
| --paper-checkbox-label-spacing: 0; | ||
| --paper-checkbox-margin: 8px 16px 8px 0; | ||
| --paper-checkbox-vertical-align: top; | ||
| } | ||
| paper-checkbox .subtitle { | ||
| display: block; | ||
| font-size: 0.8em; | ||
| margin-top: 2px; | ||
| max-width: 150px; | ||
| } | ||
| </style> | ||
| <next-code-block></next-code-block> | ||
| </template> | ||
| </custom-element-demo> | ||
| ``` | ||
| --> | ||
| ```html | ||
| <paper-checkbox>label</paper-checkbox> | ||
|
|
||
| <paper-checkbox checked> label</paper-checkbox> | ||
| <paper-checkbox checked>Checked</paper-checkbox> | ||
| <paper-checkbox class="styled"> | ||
| Checkbox | ||
| <span class="subtitle"> | ||
| With a longer label | ||
| </span> | ||
| </paper-checkbox> | ||
| <paper-checkbox disabled>Disabled</paper-checkbox> | ||
| ``` | ||
|
|
||
| ### Styling | ||
|
|
||
| The following custom properties and mixins are available for styling: | ||
|
|
||
| | Custom property | Description | Default | | ||
| | --- | --- | --- | | ||
| | `--paper-checkbox-unchecked-background-color` | Checkbox background color when the input is not checked | `transparent` | | ||
| | `--paper-checkbox-unchecked-color` | Checkbox border color when the input is not checked | `--primary-text-color` | | ||
| | `--paper-checkbox-unchecked-ink-color` | Selected/focus ripple color when the input is not checked | `--primary-text-color` | | ||
| | `--paper-checkbox-checked-color` | Checkbox color when the input is checked | `--primary-color` | | ||
| | `--paper-checkbox-checked-ink-color` | Selected/focus ripple color when the input is checked | `--primary-color` | | ||
| | `--paper-checkbox-checkmark-color` | Checkmark color | `white` | | ||
| | `--paper-checkbox-label-color` | Label color | `--primary-text-color` | | ||
| | `--paper-checkbox-label-checked-color` | Label color when the input is checked | `--paper-checkbox-label-color` | | ||
| | `--paper-checkbox-label-spacing` | Spacing between the label and the checkbox | `8px` | | ||
| | `--paper-checkbox-label` | Mixin applied to the label | `{}` | | ||
| | `--paper-checkbox-label-checked` | Mixin applied to the label when the input is checked | `{}` | | ||
| | `--paper-checkbox-error-color` | Checkbox color when invalid | `--error-color` | | ||
| | `--paper-checkbox-size` | Size of the checkbox | `18px` | | ||
| | `--paper-checkbox-margin` | Margin around the checkbox container | `initial` | | ||
| | `--paper-checkbox-vertical-align` | Vertical alignment of the checkbox container | `middle` | | ||
|
|
||
| This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`. | ||
| In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`. | ||
|
|
||
|
|