New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@polymer/paper-checkbox
Advanced tools
@polymer/paper-checkbox - npm Package Compare versions
to
3.0.0-pre.22
@@ -18,24 +18,16 @@ { | ||
| "devDependencies": { | ||
| "@polymer/gen-typescript-declarations": "^1.2.0", | ||
| "bower": "^1.8.0", | ||
| "webmat": "^0.2.0", | ||
| "@webcomponents/webcomponentsjs": "^2.0.0", | ||
| "wct-browser-legacy": "^1.0.1", | ||
| "@polymer/iron-component-page": "^3.0.0-pre.21", | ||
| "@polymer/iron-demo-helpers": "^3.0.0-pre.21", | ||
| "@polymer/iron-flex-layout": "^3.0.0-pre.21", | ||
| "@polymer/iron-test-helpers": "^3.0.0-pre.21" | ||
| "@polymer/iron-demo-helpers": "^3.0.0-pre.20", | ||
| "@polymer/iron-flex-layout": "^3.0.0-pre.20", | ||
| "@polymer/iron-test-helpers": "^3.0.0-pre.20", | ||
| "@polymer/gen-typescript-declarations": "^1.5.0" | ||
| }, | ||
| "scripts": { | ||
| "update-types": "bower install && gen-typescript-declarations --deleteExisting --outDir .", | ||
| "format": "webmat && npm run update-types" | ||
| "format": "webmat", | ||
| "generate-types": "gen-typescript-declarations --deleteExisting --outDir .", | ||
| "prepack": "npm run generate-types" | ||
| }, | ||
| "version": "3.0.0-pre.21", | ||
| "resolutions": { | ||
| "inherits": "2.0.3", | ||
| "samsam": "1.1.3", | ||
| "supports-color": "3.1.2", | ||
| "type-detect": "1.0.0", | ||
| "@webcomponents/webcomponentsjs": "2.0.0-beta.2" | ||
| }, | ||
| "version": "3.0.0-pre.22", | ||
| "main": "paper-checkbox.js", | ||
@@ -45,8 +37,8 @@ "author": "The Polymer Authors", | ||
| "@polymer/polymer": "^3.0.0", | ||
| "@polymer/iron-checked-element-behavior": "^3.0.0-pre.21", | ||
| "@polymer/paper-behaviors": "^3.0.0-pre.21", | ||
| "@polymer/paper-ripple": "^3.0.0-pre.21", | ||
| "@polymer/paper-styles": "^3.0.0-pre.21", | ||
| "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.21" | ||
| "@polymer/iron-checked-element-behavior": "^3.0.0-pre.20", | ||
| "@polymer/paper-behaviors": "^3.0.0-pre.20", | ||
| "@polymer/paper-ripple": "^3.0.0-pre.20", | ||
| "@polymer/paper-styles": "^3.0.0-pre.20", | ||
| "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.20" | ||
| } | ||
| } |
@@ -10,244 +10,235 @@ /** | ||
| */ | ||
| /** | ||
| Material design: [Checkbox](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox) | ||
| import '@polymer/polymer/polymer-legacy.js'; | ||
| import '@polymer/paper-styles/default-theme.js'; | ||
| `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 | ||
| ON/OFF option, avoid using a single checkbox and use `paper-toggle-button` | ||
| instead. | ||
| import {PaperCheckedElementBehavior} from '@polymer/paper-behaviors/paper-checked-element-behavior.js'; | ||
| import {PaperInkyFocusBehaviorImpl} from '@polymer/paper-behaviors/paper-inky-focus-behavior.js'; | ||
| import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
| import {html} from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| import {afterNextRender} from '@polymer/polymer/lib/utils/render-status.js'; | ||
| Example: | ||
| const template = html`<style> | ||
| :host { | ||
| display: inline-block; | ||
| white-space: nowrap; | ||
| cursor: pointer; | ||
| --calculated-paper-checkbox-size: var(--paper-checkbox-size, 18px); | ||
| /* -1px is a sentinel for the default and is replaced in \`attached\`. */ | ||
| --calculated-paper-checkbox-ink-size: var(--paper-checkbox-ink-size, -1px); | ||
| @apply --paper-font-common-base; | ||
| line-height: 0; | ||
| -webkit-tap-highlight-color: transparent; | ||
| } | ||
| <paper-checkbox>label</paper-checkbox> | ||
| :host([hidden]) { | ||
| display: none !important; | ||
| } | ||
| <paper-checkbox checked> label</paper-checkbox> | ||
| :host(:focus) { | ||
| outline: none; | ||
| } | ||
| ### Styling | ||
| .hidden { | ||
| display: none; | ||
| } | ||
| The following custom properties and mixins are available for styling: | ||
| #checkboxContainer { | ||
| display: inline-block; | ||
| position: relative; | ||
| width: var(--calculated-paper-checkbox-size); | ||
| height: var(--calculated-paper-checkbox-size); | ||
| min-width: var(--calculated-paper-checkbox-size); | ||
| margin: var(--paper-checkbox-margin, initial); | ||
| vertical-align: var(--paper-checkbox-vertical-align, middle); | ||
| background-color: var(--paper-checkbox-unchecked-background-color, transparent); | ||
| } | ||
| 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-ink-size` | Size of the ripple | `48px` | ||
| `--paper-checkbox-margin` | Margin around the checkbox container | `initial` | ||
| `--paper-checkbox-vertical-align` | Vertical alignment of the checkbox container | `middle` | ||
| #ink { | ||
| position: absolute; | ||
| 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`. | ||
| /* Center the ripple in the checkbox by negative offsetting it by | ||
| * (inkWidth - rippleWidth) / 2 */ | ||
| top: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2); | ||
| left: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2); | ||
| width: var(--calculated-paper-checkbox-ink-size); | ||
| height: var(--calculated-paper-checkbox-ink-size); | ||
| color: var(--paper-checkbox-unchecked-ink-color, var(--primary-text-color)); | ||
| opacity: 0.6; | ||
| pointer-events: none; | ||
| } | ||
| @demo demo/index.html | ||
| */ | ||
| /* | ||
| FIXME(polymer-modulizer): the above comments were extracted | ||
| from HTML and may be out of place here. Review them and | ||
| then delete this comment! | ||
| */ | ||
| import '@polymer/polymer/polymer-legacy.js'; | ||
| #ink:dir(rtl) { | ||
| right: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2); | ||
| left: auto; | ||
| } | ||
| import '@polymer/paper-styles/default-theme.js'; | ||
| import { PaperCheckedElementBehavior } from '@polymer/paper-behaviors/paper-checked-element-behavior.js'; | ||
| import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
| import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js'; | ||
| import { PaperInkyFocusBehaviorImpl } from '@polymer/paper-behaviors/paper-inky-focus-behavior.js'; | ||
| const $_documentContainer = document.createElement('template'); | ||
| $_documentContainer.setAttribute('style', 'display: none;'); | ||
| #ink[checked] { | ||
| color: var(--paper-checkbox-checked-ink-color, var(--primary-color)); | ||
| } | ||
| $_documentContainer.innerHTML = `<dom-module id="paper-checkbox"> | ||
| <template strip-whitespace=""> | ||
| <style> | ||
| :host { | ||
| display: inline-block; | ||
| white-space: nowrap; | ||
| cursor: pointer; | ||
| --calculated-paper-checkbox-size: var(--paper-checkbox-size, 18px); | ||
| /* -1px is a sentinel for the default and is replaced in \`attached\`. */ | ||
| --calculated-paper-checkbox-ink-size: var(--paper-checkbox-ink-size, -1px); | ||
| @apply --paper-font-common-base; | ||
| line-height: 0; | ||
| -webkit-tap-highlight-color: transparent; | ||
| } | ||
| #checkbox { | ||
| position: relative; | ||
| box-sizing: border-box; | ||
| height: 100%; | ||
| border: solid 2px; | ||
| border-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color)); | ||
| border-radius: 2px; | ||
| pointer-events: none; | ||
| -webkit-transition: background-color 140ms, border-color 140ms; | ||
| transition: background-color 140ms, border-color 140ms; | ||
| } | ||
| :host([hidden]) { | ||
| display: none !important; | ||
| } | ||
| /* checkbox checked animations */ | ||
| #checkbox.checked #checkmark { | ||
| -webkit-animation: checkmark-expand 140ms ease-out forwards; | ||
| animation: checkmark-expand 140ms ease-out forwards; | ||
| } | ||
| :host(:focus) { | ||
| outline: none; | ||
| } | ||
| @-webkit-keyframes checkmark-expand { | ||
| 0% { | ||
| -webkit-transform: scale(0, 0) rotate(45deg); | ||
| } | ||
| 100% { | ||
| -webkit-transform: scale(1, 1) rotate(45deg); | ||
| } | ||
| } | ||
| .hidden { | ||
| display: none; | ||
| } | ||
| @keyframes checkmark-expand { | ||
| 0% { | ||
| transform: scale(0, 0) rotate(45deg); | ||
| } | ||
| 100% { | ||
| transform: scale(1, 1) rotate(45deg); | ||
| } | ||
| } | ||
| #checkboxContainer { | ||
| display: inline-block; | ||
| position: relative; | ||
| width: var(--calculated-paper-checkbox-size); | ||
| height: var(--calculated-paper-checkbox-size); | ||
| min-width: var(--calculated-paper-checkbox-size); | ||
| margin: var(--paper-checkbox-margin, initial); | ||
| vertical-align: var(--paper-checkbox-vertical-align, middle); | ||
| background-color: var(--paper-checkbox-unchecked-background-color, transparent); | ||
| } | ||
| #checkbox.checked { | ||
| background-color: var(--paper-checkbox-checked-color, var(--primary-color)); | ||
| border-color: var(--paper-checkbox-checked-color, var(--primary-color)); | ||
| } | ||
| #ink { | ||
| position: absolute; | ||
| #checkmark { | ||
| position: absolute; | ||
| width: 36%; | ||
| height: 70%; | ||
| border-style: solid; | ||
| border-top: none; | ||
| border-left: none; | ||
| border-right-width: calc(2/15 * var(--calculated-paper-checkbox-size)); | ||
| border-bottom-width: calc(2/15 * var(--calculated-paper-checkbox-size)); | ||
| border-color: var(--paper-checkbox-checkmark-color, white); | ||
| -webkit-transform-origin: 97% 86%; | ||
| transform-origin: 97% 86%; | ||
| box-sizing: content-box; /* protect against page-level box-sizing */ | ||
| } | ||
| /* Center the ripple in the checkbox by negative offsetting it by | ||
| * (inkWidth - rippleWidth) / 2 */ | ||
| top: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2); | ||
| left: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2); | ||
| width: var(--calculated-paper-checkbox-ink-size); | ||
| height: var(--calculated-paper-checkbox-ink-size); | ||
| color: var(--paper-checkbox-unchecked-ink-color, var(--primary-text-color)); | ||
| opacity: 0.6; | ||
| pointer-events: none; | ||
| } | ||
| #checkmark:dir(rtl) { | ||
| -webkit-transform-origin: 50% 14%; | ||
| transform-origin: 50% 14%; | ||
| } | ||
| #ink:dir(rtl) { | ||
| right: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2); | ||
| left: auto; | ||
| } | ||
| /* label */ | ||
| #checkboxLabel { | ||
| position: relative; | ||
| display: inline-block; | ||
| vertical-align: middle; | ||
| padding-left: var(--paper-checkbox-label-spacing, 8px); | ||
| white-space: normal; | ||
| line-height: normal; | ||
| color: var(--paper-checkbox-label-color, var(--primary-text-color)); | ||
| @apply --paper-checkbox-label; | ||
| } | ||
| #ink[checked] { | ||
| color: var(--paper-checkbox-checked-ink-color, var(--primary-color)); | ||
| } | ||
| :host([checked]) #checkboxLabel { | ||
| color: var(--paper-checkbox-label-checked-color, var(--paper-checkbox-label-color, var(--primary-text-color))); | ||
| @apply --paper-checkbox-label-checked; | ||
| } | ||
| #checkbox { | ||
| position: relative; | ||
| box-sizing: border-box; | ||
| height: 100%; | ||
| border: solid 2px; | ||
| border-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color)); | ||
| border-radius: 2px; | ||
| pointer-events: none; | ||
| -webkit-transition: background-color 140ms, border-color 140ms; | ||
| transition: background-color 140ms, border-color 140ms; | ||
| } | ||
| #checkboxLabel:dir(rtl) { | ||
| padding-right: var(--paper-checkbox-label-spacing, 8px); | ||
| padding-left: 0; | ||
| } | ||
| /* checkbox checked animations */ | ||
| #checkbox.checked #checkmark { | ||
| -webkit-animation: checkmark-expand 140ms ease-out forwards; | ||
| animation: checkmark-expand 140ms ease-out forwards; | ||
| } | ||
| #checkboxLabel[hidden] { | ||
| display: none; | ||
| } | ||
| @-webkit-keyframes checkmark-expand { | ||
| 0% { | ||
| -webkit-transform: scale(0, 0) rotate(45deg); | ||
| } | ||
| 100% { | ||
| -webkit-transform: scale(1, 1) rotate(45deg); | ||
| } | ||
| } | ||
| /* disabled state */ | ||
| @keyframes checkmark-expand { | ||
| 0% { | ||
| transform: scale(0, 0) rotate(45deg); | ||
| } | ||
| 100% { | ||
| transform: scale(1, 1) rotate(45deg); | ||
| } | ||
| } | ||
| :host([disabled]) #checkbox { | ||
| opacity: 0.5; | ||
| border-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color)); | ||
| } | ||
| #checkbox.checked { | ||
| background-color: var(--paper-checkbox-checked-color, var(--primary-color)); | ||
| border-color: var(--paper-checkbox-checked-color, var(--primary-color)); | ||
| } | ||
| :host([disabled][checked]) #checkbox { | ||
| background-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color)); | ||
| opacity: 0.5; | ||
| } | ||
| #checkmark { | ||
| position: absolute; | ||
| width: 36%; | ||
| height: 70%; | ||
| border-style: solid; | ||
| border-top: none; | ||
| border-left: none; | ||
| border-right-width: calc(2/15 * var(--calculated-paper-checkbox-size)); | ||
| border-bottom-width: calc(2/15 * var(--calculated-paper-checkbox-size)); | ||
| border-color: var(--paper-checkbox-checkmark-color, white); | ||
| -webkit-transform-origin: 97% 86%; | ||
| transform-origin: 97% 86%; | ||
| box-sizing: content-box; /* protect against page-level box-sizing */ | ||
| } | ||
| :host([disabled]) #checkboxLabel { | ||
| opacity: 0.65; | ||
| } | ||
| #checkmark:dir(rtl) { | ||
| -webkit-transform-origin: 50% 14%; | ||
| transform-origin: 50% 14%; | ||
| } | ||
| /* invalid state */ | ||
| #checkbox.invalid:not(.checked) { | ||
| border-color: var(--paper-checkbox-error-color, var(--error-color)); | ||
| } | ||
| </style> | ||
| /* label */ | ||
| #checkboxLabel { | ||
| position: relative; | ||
| display: inline-block; | ||
| vertical-align: middle; | ||
| padding-left: var(--paper-checkbox-label-spacing, 8px); | ||
| white-space: normal; | ||
| line-height: normal; | ||
| color: var(--paper-checkbox-label-color, var(--primary-text-color)); | ||
| @apply --paper-checkbox-label; | ||
| } | ||
| <div id="checkboxContainer"> | ||
| <div id="checkbox" class\$="[[_computeCheckboxClass(checked, invalid)]]"> | ||
| <div id="checkmark" class\$="[[_computeCheckmarkClass(checked)]]"></div> | ||
| </div> | ||
| </div> | ||
| :host([checked]) #checkboxLabel { | ||
| color: var(--paper-checkbox-label-checked-color, var(--paper-checkbox-label-color, var(--primary-text-color))); | ||
| @apply --paper-checkbox-label-checked; | ||
| } | ||
| <div id="checkboxLabel"><slot></slot></div>`; | ||
| template.setAttribute('strip-whitespace', ''); | ||
| #checkboxLabel:dir(rtl) { | ||
| padding-right: var(--paper-checkbox-label-spacing, 8px); | ||
| padding-left: 0; | ||
| } | ||
| /** | ||
| Material design: | ||
| [Checkbox](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox) | ||
| #checkboxLabel[hidden] { | ||
| display: none; | ||
| } | ||
| `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 ON/OFF option, | ||
| avoid using a single checkbox and use `paper-toggle-button` instead. | ||
| /* disabled state */ | ||
| Example: | ||
| :host([disabled]) #checkbox { | ||
| opacity: 0.5; | ||
| border-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color)); | ||
| } | ||
| <paper-checkbox>label</paper-checkbox> | ||
| :host([disabled][checked]) #checkbox { | ||
| background-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color)); | ||
| opacity: 0.5; | ||
| } | ||
| <paper-checkbox checked> label</paper-checkbox> | ||
| :host([disabled]) #checkboxLabel { | ||
| opacity: 0.65; | ||
| } | ||
| ### Styling | ||
| /* invalid state */ | ||
| #checkbox.invalid:not(.checked) { | ||
| border-color: var(--paper-checkbox-error-color, var(--error-color)); | ||
| } | ||
| </style> | ||
| The following custom properties and mixins are available for styling: | ||
| <div id="checkboxContainer"> | ||
| <div id="checkbox" class\$="[[_computeCheckboxClass(checked, invalid)]]"> | ||
| <div id="checkmark" class\$="[[_computeCheckmarkClass(checked)]]"></div> | ||
| </div> | ||
| </div> | ||
| 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-ink-size` | Size of the ripple | `48px` | ||
| `--paper-checkbox-margin` | Margin around the checkbox container | `initial` | ||
| `--paper-checkbox-vertical-align` | Vertical alignment of the checkbox container | `middle` | ||
| <div id="checkboxLabel"><slot></slot></div> | ||
| </template> | ||
| 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`. | ||
| </dom-module>`; | ||
| @demo demo/index.html | ||
| */ | ||
| Polymer({ | ||
| _template: template, | ||
| document.head.appendChild($_documentContainer.content); | ||
| Polymer({ | ||
| is: 'paper-checkbox', | ||
@@ -254,0 +245,0 @@ |
131
README.md
@@ -0,63 +1,86 @@ | ||
| [](https://www.npmjs.com/package/@polymer/paper-checkbox) | ||
| [](https://travis-ci.org/PolymerElements/paper-checkbox) | ||
| [](https://webcomponents.org/element/@polymer/paper-checkbox) | ||
| ## <paper-checkbox> | ||
| `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. | ||
| `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 ON/OFF option, | ||
| avoid using a single checkbox and use `paper-toggle-button` instead. | ||
| Example: | ||
| <!--- | ||
| See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-checkbox), | ||
| [Demo](https://www.webcomponents.org/element/@polymer/paper-checkbox/demo/demo/index.html). | ||
| ## Usage | ||
| ### Installation | ||
| ``` | ||
| <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; | ||
| } | ||
| npm install --save @polymer/paper-checkbox | ||
| ``` | ||
| 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> | ||
| ``` | ||
| --> | ||
| ### In an HTML file | ||
| ```html | ||
| <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> | ||
| <html> | ||
| <head> | ||
| <script type="module"> | ||
| import '@polymer/paper-checkbox/paper-checkbox.js'; | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <paper-checkbox>Unchecked</paper-checkbox> | ||
| <paper-checkbox checked>Checked</paper-checkbox> | ||
| <paper-checkbox disabled>Disabled</paper-checkbox> | ||
| </body> | ||
| </html> | ||
| ``` | ||
| ### In a Polymer 3 element | ||
| ```js | ||
| import {PolymerElement} from '@polymer/polymer/polymer-element.js'; | ||
| import {html} from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| import '@polymer/paper-checkbox/paper-checkbox.js'; | ||
| class ExampleElement extends PolymerElement { | ||
| static get template() { | ||
| return html` | ||
| <paper-checkbox>Unchecked</paper-checkbox> | ||
| <paper-checkbox checked>Checked</paper-checkbox> | ||
| <paper-checkbox disabled>Disabled</paper-checkbox> | ||
| `; | ||
| } | ||
| } | ||
| customElements.define('example-element', ExampleElement); | ||
| ``` | ||
| ## Contributing | ||
| If you want to send a PR to this element, here are the instructions for running | ||
| the tests and demo locally: | ||
| ### Installation | ||
| ```sh | ||
| git clone https://github.com/PolymerElements/paper-checkbox | ||
| cd paper-checkbox | ||
| npm install | ||
| npm install -g polymer-cli | ||
| ``` | ||
| ### Running the demo locally | ||
| ```sh | ||
| polymer serve --npm | ||
| open http://127.0.0.1:<port>/demo/ | ||
| ``` | ||
| ### Running the tests | ||
| ```sh | ||
| polymer test --npm | ||
| ``` |
Sorry, the diff of this file is not supported yet
New alerts
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Improved metrics
- Dev dependency count
7
-22.22%- Lines of code
387
15.18%- Number of lines in readme file
87
35.94%Worsened metrics
- Total package byte prevSize
27414
-33.28%- Number of package files
8
-42.86%- Number of medium supply chain risk alerts
1
Infinity%