nuke-switch

v2.3.12
开关
nuke nuke-switch

Switch

  • category: Components
  • chinese: 开关
  • type: Basic

Usage

Switch is a switch button component with status switching.

API

Attribute Description Type Default
disabled Is the switch interactive? boolean true
checked Turn on or off(Controlled usage, Need to cooperate with onValueChange) boolean false
defaultChecked Default selection(uncontrolled usage) boolean false
onValueChange call this function when Switch changes function(value) null

Usage in controlled or uncontrolled

All input and interaction class components have controlled usage and uncontrolled usage.

  • Controlled usage: component status is affected by external incoming props. The external props changes, so that the components will change, such as:
constructor() {
    super();
    this.state = {
        checked: true
    }
}
change = (value) => {
    this.setState({
        checked:!value
    });
}
//...
render(){
    return (<Switch checked={this.state.checked} onValueChange={this.change}/>)
}
  • Uncontrolled usage: The component itself changes freely and changes what is externally changed through the event, such as:
change = (value) => {
    console.log('switch change to: ',value);
}
//...
render(){
    return (<Switch defaultChecked={true} onValueChange={this.change}/>)
}

The Other

npm i nuke-switch

Metadata

Downloads