@minna-ui/toggle v0.5.0
@minna-ui/toggle
A simple toggle switch web component similar in function to a browser native <input type="checkbox"/> but much better looking and more understandable by users. It can be used standalone, in Svelte projects, or any JavaScript project.
TODO: Write note about @minna-ui/css interplay/dependency.
TODO: Example image.
TODO: Add link to demo and documentation page.
Usage
Standalone
The easiest way to use the component is to add the CDN hosted version directly in your HTML.
TIP: If you're already using a JavaScript bundler you should follow the the "Other JavaScript projects" instructions.
- Add the CSS and JS to your document, inside the
<head></head>:
<link href="https://cdn.jsdelivr.net/npm/@minna-ui/toggle/dist/index.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@minna-ui/toggle"></script>Or use a specific version:
<link href="https://cdn.jsdelivr.net/npm/@minna-ui/toggle@0.5.0/dist/index.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@minna-ui/toggle@0.5.0"></script>- Add an element where you want the component to show in your document
<body></body>:
<div id="minna-toggle"></div>- Initialise the component:
<script>
new MinnaToggle({
target: document.querySelector('#minna-toggle'),
data: {},
});
</script>Svelte projects
Because this is actually a Svelte component, using it in your Svelte projects is simple and allows for the most flexibility and best possible performance.
- Install the package:
yarn add @minna-ui/toggle- Add to your Svelte component:
MySvelteComponent.html:
<MinnaToggle/>
<script>
import MinnaToggle from '@minna-ui/toggle';
export default {
components: {
MinnaToggle,
},
};
</script>Other JavaScript projects
This component can also be used alongside any JavaScript project, regardless of your framework of choice, by using ES6 modules import.
- Install the package:
yarn add @minna-ui/toggle- Add to your files:
my-example.html:
<div id="minna-toggle"></div>my-example.js:
import MinnaToggle from '@minna-ui/toggle';
new MinnaToggle({
target: document.querySelector('#minna-toggle'),
data: {},
});Licence
@minna-ui/toggle is part of minna-ui, an Apache-2.0 licensed open source project. See LICENCE.
© 2018 We Are Genki