checkbox:
[ This description is mirrored from README.md at github.com/BrightspaceUI/checkbox on 2019-05-10 ]
d2l-checkbox
Polymer-based web component for D2L checkboxes.
For further information on this and other Brightspace UI components, see the docs at ui.developers.brightspace.com.
Installation
d2l-checkbox can be installed from Bower:
bower install d2l-checkbox
Usage
Include the webcomponents.js “lite” polyfill (for browsers who don’t natively support web components), then import d2l-checkbox.html:
<head>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../d2l-checkbox/d2l-checkbox.html">
</head>
A <d2l-checkbox> custom element can now be used in your application. The label
for your checkbox should be placed inside the element:
<d2l-checkbox>Label for checkbox</d2l-checkbox>
Many of the same attributes from native <input type="checkbox"> are available:
<d2l-checkbox checked>Checked checkbox</d2l-checkbox>
To hide the label when space is limited, use the aria-label attribute to
provide an accessible label:
<d2l-checkbox aria-label="label for checkbox"></d2l-checkbox>
To align following related content below checkboxes, the d2l-checkbox-spacer element can be used.
<d2l-checkbox>Label for checkbox</d2l-checkbox>
<d2l-checkbox-spacer style="color:#999999;">
Additional content can go here and will<br>
also line up nicely with the checkbox.
</d2l-checkbox-spacer>
Developing, Testing and Contributing
After cloning the repo, run npm install to install dependencies.
If you don’t have it already, install the Polymer CLI globally:
npm install -g polymer-cli
To start a local web server that hosts the demo page and tests:
polymer serve
To lint (eslint and Polymer lint):
npm run lint
To run unit tests locally using Polymer test:
polymer test --skip-plugin sauce
To lint AND run local unit tests:
npm test