https://github.com/andregoncalves/stencil-ios-toggle
iOS like toggle checkbox web component
https://github.com/andregoncalves/stencil-ios-toggle
jsx stencil toggle-switches webcomponents
Last synced: 2 months ago
JSON representation
iOS like toggle checkbox web component
- Host: GitHub
- URL: https://github.com/andregoncalves/stencil-ios-toggle
- Owner: andregoncalves
- License: mit
- Created: 2018-02-27T16:23:57.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-02-27T17:01:12.000Z (over 7 years ago)
- Last Synced: 2025-03-18T14:12:01.593Z (3 months ago)
- Topics: jsx, stencil, toggle-switches, webcomponents
- Language: CSS
- Size: 56.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# st-ios-toggle
st-ios-toggle is a web component built with [Stencil](https://stenciljs.com/) to display iOS style toggle checkbox.
## Demo
## Getting Started
To try this component:
```bash
git clone [email protected]:andregoncalves/stencil-ios-toggle.git
cd stencil-ios-toggle
git remote rm origin
```
and run:
```bash
npm install
npm start
```
## Using this component
### Script tag
- Put `` 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 `` 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.
```js
element = document.querySelector('st-ios-toggle');
element.addEventListener('change', (e) => {
// e.target points to the input element
console.log(e.target.checked);
})
```
## Example usage
```html
<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>
```