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