English | 中文
Switching selector. It supports the following features:
- customize color
- customize size
- two types:
cupertinoandmaterial
npm install @rn-components-kit/switch --save| Preview | Code |
|---|---|
 |
Demo1 Code |
 |
Demo2 Code |
 |
Demo3 Code |
|
Demo4 Code |
|
Demo5 Code |
styletypevaluedisabledwidthheightthumbRadiusthumbColortrackOnColortrackOffColoronValueChange
Allows you to customize style
| Type | Required | Default |
|---|---|---|
| object | no | - |
Two types (cupertino for IOS and material for Android)
| Type | Required | Default |
|---|---|---|
enum('cupertino', 'material') |
no | 'cupertino' |
Determines whether switch is on when initial rendering
| Type | Required | Default |
|---|---|---|
| boolean | no | false |
Determines whether switch is touchabled
| Type | Required | Default |
|---|---|---|
| boolean | no | false |
Width of switch
| Type | Required | Default |
|---|---|---|
| number | no | 40 |
Height of switch's track
| Type | Required | Default |
|---|---|---|
| number | no | 20 |
Radius of thumb
| Type | Required | Default |
|---|---|---|
| number | no | 8 |
Color of thumb
| Type | Required | Default |
|---|---|---|
| string | no | '#FFF' |
Color of track when switch is "on" status
| Type | Required | Default |
|---|---|---|
| string | no | '#79D472' |
Color of track when switch is "off" status
| Type | Required | Default |
|---|---|---|
| string | no | '#CCC' |
(value: boolean) => voidA callback will be triggered when switch's status changes
| Type | Required | Default |
|---|---|---|
| function | no | () => {} |