English | 中文
Radio buttons allow users to select one option from a set. It supports following features:
- disable click
- customized checked/unChecked icon
- three animation types
npm install @rn-components-kit/radio --save| Preview | Code |
|---|---|
|
Demo1 Code |
|
Demo2 Code |
|
Demo3 Code |
|
Demo4 Code |
Allow you to customize style
| Type | Required | Default |
|---|---|---|
| object | no | - |
Default value to speficy which radio button is selected initially
| Type | Required | Default |
|---|---|---|
| any | no | - |
(value: any) => void| Type | Required | Default |
|---|---|---|
| function | no | () => {} |
A callback will be triggered when selected value changes
stylevaluetitletitleStyleiconSizedisabledcheckedcheckedIconTypecheckedIconColorcheckedImageunCheckedIconTypeunCheckedIconColorunCheckedImageanimationTypeonPress
Allow you to customize style
| Type | Required | Default |
|---|---|---|
| object | no | - |
According to value for comparison, to determine whether the selected
| Type | Required | Default |
|---|---|---|
| any | yes | - |
Title of radio button
| Type | Required | Default |
|---|---|---|
| string | yes | - |
Allows you to customize title's style
| Type | Required | Default |
|---|---|---|
| object | no | - |
Size of icon (or width and height for image, if you specify checkedImage/unCheckedImage)
| Type | Required | Default |
|---|---|---|
| number | no | 20 |
Determines whether radio button is available
| Type | Required | Default |
|---|---|---|
| boolean | no | false |
Flag for checking the icon
| Type | Required | Default |
|---|---|---|
| boolean | no | false |
Checked icon (Icon Preset)
| Type | Required | Default |
|---|---|---|
| string | no | 'check-radio' |
Color of checked icon
| Type | Required | Default |
|---|---|---|
| string | no | '#1890FF' |
If you are not satisfied with icon preset, you can specify an image for checked icon
| Type | Required | Default |
|---|---|---|
| string | no | - |
UnChecked icon (Icon Preset)
| Type | Required | Default |
|---|---|---|
| string | no | 'circle' |
Color of unChecked icon
| Type | Required | Default |
|---|---|---|
| string | no | '#BFBFBF' |
If you are not satisfied with icon preset, you can specify an image for unChecked icon
| Type | Required | Default |
|---|---|---|
| string | no | - |
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 | 'size' |
() => voidA callback will be triggered when radio button is pressed
| Type | Required | Default |
|---|---|---|
| function | no | () => {} |