Live Demo ↗ | API documentation ↗
<catalyst-toggle-button>
is a web component toggle button, part of the Catalyst Elements Collection
.
<catalyst-toggle-button>My Button</catalyst-toggle-button>
Install with npm:
npm install --save @catalyst-elements/catalyst-toggle-button
Install with yarn:
yarn add @catalyst-elements/catalyst-toggle-button
Please note that this package is not compatible with Bower.
Import the module on each page that uses the component.
<script type="module" src="node_modules/@catalyst-elements/catalyst-toggle-button/catalyst-toggle-button.js"></script>
Then simply use it like any other tag.
Import the script for the component on each page that it is uses on.
Note: you will also have to import the dependencies the component uses first.
<!-- Import dependencies -->
<script src="node_modules/@catalyst-elements/catalyst-labelable-mixin/catalyst-labelable-mixin.es5.min.js"></script>
<script src="node_modules/@catalyst-elements/catalyst-lazy-properties-mixin/catalyst-lazy-properties-mixin.es5.min.js"></script>
<script src="node_modules/@catalyst-elements/catalyst-toggle-mixin/catalyst-toggle-mixin.es5.min.js"></script>
<!-- Import the element -->
<script src="node_modules/@catalyst-elements/catalyst-toggle-button/catalyst-toggle-button.es5.min.js"></script>
Please note that this script has been transpiled to es5 and thus use of custom-elements-es5-adapter.js
or an equivalent library is required. See es5 support on the Catalyst Elements wiki for details.
The element can then be use it like any other tag.
See details on the Catalyst Elements' wiki: Browser Compatibility
Contributions are most welcome.
Please read our contribution guidelines.