@rn-components-kit/checkbox v1.0.4
CheckBox
English | 中文
CheckBoxes allow users to complete tasks that involve making choices such as selecting options, or switching settings on or off.
How to use
npm install @rn-components-kit/checkbox --save| Preview | Code |
|---|---|
| Demo1 Code | |
| Demo2 Code | |
| Demo3 Code | |
| Demo4 Code |
Props
styletitletitleStyleiconSizedisabledcheckedcheckedIconTypecheckedIconColorcheckedImageunCheckedIconTypeunCheckedIconColorunCheckedImageanimationTypeonPress
Reference
Props
style
Allow you to customize style
| Type | Required | Default |
|---|---|---|
| object | no | - |
title
Title of checkbox
| Type | Required | Default |
|---|---|---|
| string | yes | - |
titleStyle
Allows you to customize title's style
| Type | Required | Default |
|---|---|---|
| object | no | - |
iconSize
Size of icon (or width and height for image, if you specify checkedImage/unCheckedImage)
| Type | Required | Default |
|---|---|---|
| number | no | 20 |
disabled
Determines whether checkbox is available
| Type | Required | Default |
|---|---|---|
| boolean | no | false |
checked
Flag for checking the icon
| Type | Required | Default |
|---|---|---|
| boolean | no | false |
checkedIconType
Checked icon (Icon Preset)
| Type | Required | Default |
|---|---|---|
| string | no | 'check-square-fill' |
checkedIconColor
Color of checked icon
| Type | Required | Default |
|---|---|---|
| string | no | '#1890FF' |
checkedImage
If you are not satisfied with icon preset, you can specify an image for checked icon
| Type | Required | Default |
|---|---|---|
| string | no | - |
unCheckedIconType
UnChecked icon (Icon Preset)
| Type | Required | Default |
|---|---|---|
| string | no | 'border' |
unCheckedIconColor
Color of unChecked icon
| Type | Required | Default |
|---|---|---|
| string | no | '#BFBFBF' |
unCheckedImage
If you are not satisfied with icon preset, you can specify an image for unChecked icon
| Type | Required | Default |
|---|---|---|
| string | no | - |
animationType
Determines which animation is adpoted when checked value changes
- none: no animation
- opacity: fade in/out
- size: zoom in/out
| Type | Required | Default |
|---|---|---|
enum('none', 'opacity', 'size') | no | 'opacity' |
onPress
() => voidA callback will be triggered when checkbox is pressed
| Type | Required | Default |
|---|---|---|
| function | no | () => {} |