Polymer-based web component for D2L checkboxes

[ This description is mirrored from README.md at github.com/BrightspaceUI/checkbox on 2019-05-10 ]

d2l-checkbox

Published on webcomponents.org Bower version Build status

Polymer-based web component for D2L checkboxes.

screenshot of checkbox component

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

Install

Link to this version
ImportedReleased 30 January 2018Apache License 2.0
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
bower install --save BrightspaceUI/checkbox"#0.2.1"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.2.1

Dependencies

  • d2l-colors#^3.1.2
  • d2l-typography#^6.0.0
  • polymer#1 - 2