Switch 开关

() => {
  const [checked, setchecked] = React.useState(false)
  return (
    <div style={{ marginLeft: '20px', marginTop: '10px' }}>
      <Switch value={checked} />
      <Switch value={!checked} style={{ marginLeft: '20px' }} />
    </div>
  )
}

<div style={{ marginLeft: '20px', marginTop: '10px' }}>
  <Switch value={true} disabled />
  <Switch style={{ marginLeft: '20px' }} value={false} disabled />
</div>

() => {
  const [checked, setchecked] = React.useState('ok')
  return (
    <div style={{ marginLeft: '20px', marginTop: '10px' }}>
      <Switch
        value={checked}
        onValue={'ok'}
        offValue={'off'}
        onChange={() => setchecked(checked == 'ok' ? 'off' : 'ok')}
      />
    </div>
  )
}

() => {
  const [checked, setchecked] = React.useState(false)
  return (
    <div style={{ marginLeft: '20px', marginTop: '10px' }}>
      <Switch
        value={checked}
        onText={'ok'}
        offText={'off'}
        onChange={() => setchecked(!checked)}
      />
    </div>
  )
}

() => {
  const [checked, setchecked] = React.useState(false)
  return (
    <div style={{ marginLeft: '20px', marginTop: '10px' }}>
      <Switch
        value={checked}
        onColor={'#50bfff'}
        offColor={'#ff4949'}
        onChange={() => setchecked(!checked)}
      />
    </div>
  )
}