81acda7162
* Add postcss-next postcss-include and reporter
* Add stylelint
* Add CSS colors
* Add CSS custom media queries
* Use dashes for CSS colors
* Add base CSS variables
* Remove AppBar SASS dependency from spec page
* Migrate AppBar style to PostCSS
* Migrate Avatar style to PostCSS
* Migrate Ripple style to PostCSS
* Remove unneeded media CSS import in Avatar
* Add shadows to CSS variables
* Migrate Button style to PostCSS
* Update webpack test config and linting from npm
* Migrate Input style to PostCSS
* Add missing input config variables for Dropdown and Autocomplete
* Migrate Chip style to PostCSS
* Migrate Autocomplete style to PostCSS
* Migrate Dropdown style to PostCSS
* Migrate animations to PostCSS
* Migrate Card style to PostCSS
* Migrate Checkbox style to PostCSS
* Migrate DataPicker style to PostCSS
* Migrate Dialog style to PostCSS
* Migrate Drawer style to PostCSS
* Add postcss-mixins and postcss-each
* Migrate Layout style to PostCSS
* Fix bug in button theme
* Bugfix in avatar css
* Add some missing nesting notations
* Migrate Link style to PostCSS
* Migrate List style to PostCSS
* Migrate Menu style to PostCSS
* Migrate Navigation style to PostCSS
* Migrate Overlay style to PostCSS
* Migrate ProgressBar style to PostCSS
* Migrate Radio style to PostCSS
* Migrate Slider style to PostCSS
* Migrate Snackbar style to PostCSS
* Migrate Switch style to PostCSS
* Migrate Table style to PostCSS
* Migrate Tabs style to PostCSS
* Migrate TimePicker to PostCSS
* Migrate Tooltip styles to PostCSS
* Update webpack config for testing and tests
* Migrate commons to PostCSS
* Remove sass from main project
* Bye from docs to sass
* Build with CSS
* Remove unneded deps for sass in docs subproject
* Fix tests
* use 4p shadow in AppBar as spec indicates
* Fixed typo in list/config.css
* Fix tests
* Fix linter errors
* Latest build
* Release 2.0.0-beta.0
* Remove sass lint
* fixes old sass var in css config
* Update linter
* New Table implementation
* Fix old sass var in list/config.css
See
|
||
---|---|---|
.. | ||
Switch.js | ||
Thumb.js | ||
config.css | ||
index.d.ts | ||
index.js | ||
readme.md | ||
theme.css |
readme.md
Switch
On/off switches toggle the state of a single settings option. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label. Switches take on the same visual properties of the radio button.
import Switch from 'react-toolbox/lib/switch';
class SwitchTest extends React.Component {
state = {
switch_1: true,
switch_2: false,
switch_3: true
};
handleChange = (field, value) => {
this.setState({...this.state, [field]: value});
};
render () {
return (
<section>
<Switch
checked={this.state.switch_1}
label="Push notifications"
onChange={this.handleChange.bind(this, 'switch_1')}
/>
<Switch
checked={this.state.switch_2}
label="Mail notifications"
onChange={this.handleChange.bind(this, 'switch_2')}
/>
<Switch
checked={this.state.switch_3}
disabled
label="Nothing, thanks"
onChange={this.handleChange.bind(this, 'switch_3')}
/>
</section>
);
}
}
This component can be styled by context providing a theme with the key RTSwitch
through the theme provider.
Properties
Name | Type | Default | Description |
---|---|---|---|
checked |
Boolean |
false |
If true, the switch will be enabled. |
className |
String |
'' |
Sets a class to give custom styles to the switch. |
disabled |
Boolean |
false |
If true, component will be disabled. |
label |
String |
The text string to use for the floating label element. | |
name |
String |
The text string used as name of the input. | |
onBlur |
Function |
Callback function that is fired when when the switch is blurred. | |
onChange |
Function |
Callback function that is fired when the component's value changes. | |
onFocus |
Function |
Callback function that is fired when the switch is focused. |
Theme
Name | Description |
---|---|
disabled |
Used for the root element if the component is disabled. |
field |
Used for the root element if the component is not disabled. |
input |
Used for the input element. |
off |
Used for a wrapper around the thumb if checked is false . |
on |
Used for a wrapper around the thumb if checked is true . |
ripple |
Used for the ripple inside the switch. |
text |
Used for the text label element. |
thumb |
Used for the thumb element. |