midrissi / Switchery

Switchery - Switchery is a simple widget that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simple steps. You can easily customize switches, so that they match your design perfectly.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Custom Widget for Wakanda: Switcherry

Switchery is a simple widget that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simple steps. You can easily customize switches, so that they match your design perfectly.

Supported by all modern browsers: Chrome, Firefox, Opera, Safari, IE8+

The widget is an implementation of the Switcherry.

Preview

Live Preview

Properties

This widget Switcherry has the following properties:

  • color: color of the switch element (HEX or RGB value)
  • secondaryColor: secondary color for the box shadow and border, when the switch is off
  • disabled: enable or disable click events and changing the state of the switch (boolean value)
  • disabledOpacity: opacity of the switch when it's disabled (0 to 1)
  • speed: length of time that the transition will take, ex. '0.4s', '1s', '2.2s' (Note: transition speed of the handle is twice shorter)

And has the following methods:

  • toggle: Toggle the switcherry state

And has the following events:

  • onClick: This event will be triggred when the widget was clicked.
  • onChange: This event will be triggred when the value of the widget has been deleted.

Install

For more information on how to install a custom widget, refer to Installing a Custom Widget.

For more information about Custom Widgets, refer to Custom Widgets in the Architecture of Wakanda Applications manual.

About

Switchery - Switchery is a simple widget that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simple steps. You can easily customize switches, so that they match your design perfectly.


Languages

Language:JavaScript 99.2%Language:CSS 0.8%