st-ios-toggle

st-ios-toggle is a web component built with Stencil to display iOS style toggle checkbox.

Demo

Getting Started

To try this component:

git clone git@github.com:andregoncalves/stencil-ios-toggle.git
cd stencil-ios-toggle
git remote rm origin

and run:

npm install
npm start

Using this component

Script tag

• Put <script src='https://unpkg.com/stencil-ios-toggle@latest/dist/ios_toggle.js'></script> in the head of your index.html
• Then you can use the component

Node Modules

• Run npm install stencil-ios-toggle --save
• Put a script tag similar to this <script src='node_modules/stencil-ios-toggle/dist/ios_toggle.js></script> in the head of your index.html
• Then you can use the element <st-ios-toggle> anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install stencil-ios-toggle --save
• Add this import to your root component or root module: import 'stencil-ios-toggle';
• Then you can use the element <st-ios-toggle> anywhere in your template, JSX, html etc

Parameters

Attribute	Default	Description
theme	'ios'	Available themes are 'light', 'ios' and 'flat'
checked	false	If attribute exists checkbox will be checked
name	'st-ios-toggle'	Form name attribute
value	''	Form value attribute

Events

You can listen to the normal input value change event that will bubble up.

element = document.querySelector('st-ios-toggle');
element.addEventListener('change', (e) => {
  // e.target points to the input element
  console.log(e.target.checked);
})

Example usage

<st-ios-toggle name="toggle_1" class="my-class"></st-ios-toggle>
<st-ios-toggle name="toggle_2" class="my-class" theme="light" value="on"></st-ios-toggle>
<st-ios-toggle name="toggle_3" class="my-class" theme="ios" checked></st-ios-toggle>
<st-ios-toggle name="toggle_4" theme="flat"></st-ios-toggle>