stencil-ios-toggle v1.0.0

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

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>