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 [email protected]: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>