This project is a port of bootstrap-switch for use in React.js
Verion 3.4.x is built for React.js 0.14. It will not work with earlier versions of React.js.
NOTE: The CSS from the original version is not fully compatible. There is CSS and LESS included in this repo, or any 3rd party themes can likely be made compatible with the changes shown in this commit.
npm install react-bootstrap-switch
var Switch = require('react-bootstrap-switch');
...
render: function() {
return <Switch />;
}
These should be defined on the JSX node, many cannot be changed once they have been set without recreating the node.
| Name | Type | Default | Values | Description |
|---|---|---|---|---|
| state | boolean | true | true, false | Initial starting state of the switch |
| size | string | null | null, 'mini', 'small', 'normal', 'large' | The checkbox size |
| animate | boolean | true | true, false | Animate the switch |
| disabled | boolean | false | true, false | Disable state |
| readonly | boolean | false | true, false | Readonly state |
| indeterminate | boolean | false | true, false | Indeterminate state |
| inverse | boolean | false | true, false | Inverse switch direction |
| onColor | string | 'primary' | 'primary', 'info', 'success', 'warning', 'danger', 'default' | Color of the on state of the switch |
| offColor | string | 'default' | 'primary', 'info', 'success', 'warning', 'danger', 'default' | Color of the off state of the switch |
| onText | string | 'ON' | Text of the on state of the switch | |
| offText | string | 'OFF' | Text of the off state of the switch | |
| labelText | string | '' | Text of the center handle of the switch | |
| handleWidth | string or number | 'auto' | 'auto' or Number | Width of the left and right sides in pixels |
| labelWidth | string or number | 'auto' | 'auto' or Number | Width of the center handle in pixels |
| baseClass | string | 'bootstrap-switch' | Global class prefix | |
| wrapperClass | string | 'wrapper' | Container element class(es) | |
| onChange | function | undefined | function(elm, state){} or function(state){} |
| Name | Parameters | Description |
|---|---|---|
| value | boolean | Get or set the switch state |
| valueState | boolean | Get or set the switch state |
| toggleValue | Toggle the switch state | |
| toggleState | Toggle the switch state | |
| disabled | boolean | Get or set the disabled state |
| toggleDisabled | Toggle the disabled state | |
| readonly | boolean | Get or set the readonly state |
| toggleReadonly | Toggle the readonly state | |
| handleWidth | string or number | Set the width of the left and right sides in pixels |
| labelWidth | string or number | Set the width of the center handle in pixels |
IE9+ and all the other modern browsers.
Import src/less/bootstrap2/bootstrap-switch.less for bootstrap 2 or src/less/bootstrap3/bootstrap-switch.less for bootstrap 3 in your compilation stack.
NOTE: The LESS files from the original switch are not fully compatible, updated versions are included in this repo.
Licensed under the MIT License