Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

体验新版 GitCode，发现更多精彩内容 >>

提交 c3633b7a 编写于 作者: O oasis-cloud
浏览文件
操作

chore: icon 更换

上级 9d473b1a
隐藏空白更改
内联 并排
Showing with 221 addition and 185 deletion
src/packages/checkbox/checkbox.taro.tsx
浏览文件 @ c3633b7a
import React, { FunctionComponent, useEffect, useState } from 'react'
import Icon from '@/packages/icon/index.taro'
import CheckboxGroup from '@/packages/checkboxgroup/index.taro'
import { Checked, CheckDisabled, CheckNormal } from '@nutui/icons-react-taro'
import bem from '@/utils/bem'
import CheckboxGroup from '@/packages/checkboxgroup/index.taro'
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
interface InheritParentProps {
......@@ -16,9 +14,9 @@ export interface CheckboxProps extends BasicComponent {
disabled: boolean
textPosition: 'left' | 'right'
iconSize: string | number
iconName: string
iconActiveName: string
iconIndeterminateName: string
iconName: React.ReactNode
iconActiveName: React.ReactNode
iconIndeterminateName: React.ReactNode
iconClassPrefix: string
iconFontClassName: string
indeterminate: boolean
......@@ -80,26 +78,36 @@ export const Checkbox: FunctionComponent<
useEffect(() => {
setIndeterminate(indeterminate)
}, [indeterminate])
//
// const getIconName = () => {
// if (!innerChecked) {
// return iconName
// }
// if (_indeterminate) {
// return iconIndeterminateName
// }
// return iconActiveName
// }
const getIconName = () => {
const renderIcon = () => {
if (!innerChecked) {
return iconName
return React.isValidElement(iconName) ? (
React.cloneElement<any>(iconName, {})
) : (
<CheckNormal width={iconSize} height={iconSize} className={color()} />
)
}
if (_indeterminate) {
return iconIndeterminateName
return React.isValidElement(iconIndeterminateName) ? (
React.cloneElement<any>(iconIndeterminateName, {})
) : (
<CheckDisabled width={iconSize} height={iconSize} className={color()} />
)
}
return iconActiveName
}
const renderIcon = () => {
return (
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
name={getIconName()}
size={iconSize}
className={color()}
/>
return React.isValidElement(iconActiveName) ? (
React.cloneElement<any>(iconActiveName, {})
) : (
<Checked width={iconSize} height={iconSize} className={color()} />
)
}
const color = () => {
......
src/packages/checkbox/checkbox.tsx
浏览文件 @ c3633b7a
import React, { FunctionComponent, useEffect, useState } from 'react'
import Icon from '@/packages/icon'
import { Checked, CheckDisabled, CheckNormal } from '@nutui/icons-react'
import bem from '@/utils/bem'
import CheckboxGroup from '@/packages/checkboxgroup'
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
......@@ -14,9 +14,9 @@ export interface CheckboxProps extends BasicComponent {
disabled: boolean
textPosition: 'left' | 'right'
iconSize: string | number
iconName: string
iconActiveName: string
iconIndeterminateName: string
iconName: React.ReactNode
iconActiveName: React.ReactNode
iconIndeterminateName: React.ReactNode
iconClassPrefix: string
iconFontClassName: string
indeterminate: boolean
......@@ -78,26 +78,36 @@ export const Checkbox: FunctionComponent<
useEffect(() => {
setIndeterminate(indeterminate)
}, [indeterminate])
//
// const getIconName = () => {
// if (!innerChecked) {
// return iconName
// }
// if (_indeterminate) {
// return iconIndeterminateName
// }
// return iconActiveName
// }
const getIconName = () => {
const renderIcon = () => {
if (!innerChecked) {
return iconName
return React.isValidElement(iconName) ? (
React.cloneElement<any>(iconName, {})
) : (
<CheckNormal width={iconSize} height={iconSize} className={color()} />
)
}
if (_indeterminate) {
return iconIndeterminateName
return React.isValidElement(iconIndeterminateName) ? (
React.cloneElement<any>(iconIndeterminateName, {})
) : (
<CheckDisabled width={iconSize} height={iconSize} className={color()} />
)
}
return iconActiveName
}
const renderIcon = () => {
return (
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
name={getIconName()}
size={iconSize}
className={color()}
/>
return React.isValidElement(iconActiveName) ? (
React.cloneElement<any>(iconActiveName, {})
) : (
<Checked width={iconSize} height={iconSize} className={color()} />
)
}
const color = () => {
......
src/packages/checkbox/doc.en-US.md
浏览文件 @ c3633b7a
......@@ -405,28 +405,28 @@ export default CheckboxGroupOptions;
## Checkbox
| Props | Description | Type | Default |
|----------------| ----- | ----- |------------------|
| checked | Whether it is selected | Boolean | `false` |
| disabled | Whether to disable the selection | Boolean | `false` |
| textPosition | The location of the text, optionally：`left`,`right` | String | `right` |
| iconSize | [Icon size](#/icon) | String、Number | `18` |
| iconName | [Icon name](#/icon)，Before selecting (it is recommended to modify it with 'iconActiveName') | String | `'check-normal'` |
| iconActiveName | [Icon name](#/icon)，Once selected (it is recommended to modify it together with 'iconName') | String | `'checked'` |
| iconIndeterminateName | [Icon Name](#/en-US/icon)，Semi selected state | String | `'check-disabled'`|
| iconClassPrefix | Custom icon class name prefix, used to use custom icons | String | `nut-icon` |
| iconFontClassName | Basic class name of custom icon font | String | `nutui-iconfont` |
| label | The text content of the check box | String | - |
| Props | Description | Type | Default |
|----------------| ----- |-----------------|-------------------|
| checked | Whether it is selected | `boolean` | `false` |
| disabled | Whether to disable the selection | `boolean` | `false` |
| textPosition | The location of the text, optionally：`left`,`right` | `string` | `right` |
| iconSize | [Icon size](#/icon) | `string`、Number | `18` |
| iconName | [Icon name](#/icon)，Before selecting (it is recommended to modify it with 'iconActiveName') | `ReactNode` | `'CheckNormal'` |
| iconActiveName | [Icon name](#/icon)，Once selected (it is recommended to modify it together with 'iconName') | `ReactNode` | `'Checked'` |
| iconIndeterminateName | [Icon Name](#/en-US/icon)，Semi selected state | `ReactNode` | `'CheckDisabled'` |
| iconClassPrefix | Custom icon class name prefix, used to use custom icons | `string` | `nut-icon` |
| iconFontClassName | Basic class name of custom icon font | `string` | `nutui-iconfont` |
| label | The text content of the check box | `string` | - |
## Checkbox.Group
| Props | Description | Type | Default|
|----- | ----- | ----- | ----- |
| checkedValue | The identifier of the currently selected item, corresponding to 'label' | String | -|
| disabled | Whether to disable the selection will be used for all check boxes under it | Boolean | `false`|
| checkedValue | The identifier of the currently selected item, corresponding to 'label' | `string` | -|
| disabled | Whether to disable the selection will be used for all check boxes under it | `boolean` | `false`|
| max | Limit the maximum number of options | `undefined|number` | `undefined`|
| textPosition | Where the text is located, optional values: 'left', 'right' | String | `right` |
| direction | Use horizontal and vertical directions The optional values horizontal, vertical, | String | `vertical` |
| textPosition | Where the text is located, optional values: 'left', 'right' | `string` | `right` |
| direction | Use horizontal and vertical directions The optional values horizontal, vertical, | `string` | `vertical` |
| options `v1.3.10` | Render radios by configuring options | Array | `Array<{ label: string value: string disabled?: boolean }` |
## Checkbox Event
......
src/packages/checkbox/doc.md
浏览文件 @ c3633b7a
......@@ -402,28 +402,28 @@ export default CheckboxGroupOptions;
## Checkbox
| 字段 | 说明 | 类型 | 默认值 |
|-------------------------------| ----- | ----- | -----|
| checked | 是否处于选中状态 | Boolean | `false`|
| disabled | 是否禁用选择 | Boolean | `false`|
| textPosition | 文本所在的位置，可选值：`left`,`right` | String | `right`|
| iconSize | [图标尺寸](#/icon) | String、Number | `18`|
| iconName | [图标名称](#/icon)，选中前(建议和`iconActiveName`一起修改) | String | `'check-normal'`|
| iconActiveName | [图标名称](#/icon)，选中后(建议和`iconName`一起修改) | String | `'checked'`|
| iconIndeterminateName`v1.2.1` | [图标名称](#/icon)，半选状态 | String | `'check-disabled'`|
| iconClassPrefix`v1.2.1` | 自定义 icon 类名前缀，用于使用自定义图标 | String | `nut-icon` |
| iconFontClassName`v1.2.1` | 自定义 icon 字体基础类名 | String | `nutui-iconfont` |
| label | 复选框的文本内容 | String | -|
| 字段 | 说明 | 类型 | 默认值 |
|-------------------------------| ----- |---------------|-------------------|
| checked | 是否处于选中状态 | `boolean` | `false` |
| disabled | 是否禁用选择 | `boolean` | `false` |
| textPosition | 文本所在的位置，可选值：`left`,`right` | `string` | `right` |
| iconSize | [图标尺寸](#/icon) | `string`、`number` | `18` |
| iconName | [图标名称](#/icon)，选中前(建议和`iconActiveName`一起修改) | `ReactNode` | `'CheckNormal'` |
| iconActiveName | [图标名称](#/icon)，选中后(建议和`iconName`一起修改) | `ReactNode` | `'Checked'` |
| iconIndeterminateName`v1.2.1` | [图标名称](#/icon)，半选状态 | `ReactNode` | `'CheckDisabled'` |
| iconClassPrefix`v1.2.1` | 自定义 icon 类名前缀，用于使用自定义图标 | `string` | `nut-icon` |
| iconFontClassName`v1.2.1` | 自定义 icon 字体基础类名 | `string` | `nutui-iconfont` |
| label | 复选框的文本内容 | `string` | - |
## Checkbox.Group
| 字段 | 说明 | 类型 | 默认值|
|--------------| ----- |-------------| -- |
| checkedValue | 当前选中项的标识符，和 `label` 相对应 | String | -|
| disabled | 是否禁用选择,将用于其下的全部复选框 | Boolean | `false`|
| checkedValue | 当前选中项的标识符，和 `label` 相对应 | `string` | -|
| disabled | 是否禁用选择,将用于其下的全部复选框 | `boolean` | `false`|
| max`v1.2.1` | 限制最大可选数 | `undefined|number` | `undefined`|
| textPosition`v1.4.8` | 文本所在的位置，可选值：`left`,`right`| String| `right` |
| direction`v1.4.8` | 使用横纵方向 可选值 horizontal、vertical| String| `vertical` |
| textPosition`v1.4.8` | 文本所在的位置，可选值：`left`,`right`| `string`| `right` |
| direction`v1.4.8` | 使用横纵方向 可选值 horizontal、vertical| `string`| `vertical` |
| options `v1.3.10` | 配置 options 渲染复选按钮 | Array| `Array<{ label: string value: string disabled?: boolean }` |
## Checkbox Event
......
src/packages/checkbox/doc.taro.md
浏览文件 @ c3633b7a
......@@ -400,27 +400,27 @@ export default CheckboxGroupOptions;
## Checkbox
| 字段 | 说明 | 类型 | 默认值 |
|-------------------------------| ----- | ----- | -----|
| checked | 是否处于选中状态 | Boolean | `false`|
| disabled | 是否禁用选择 | Boolean | `false`|
| textPosition | 文本所在的位置，可选值：`left`,`right` | String | `right`|
| iconSize | [图标尺寸](#/icon) | String、Number | `18`|
| iconName | [图标名称](#/icon)，选中前(建议和`iconActiveName`一起修改) | String | `'check-normal'`|
| iconActiveName | [图标名称](#/icon)，选中后(建议和`iconName`一起修改) | String | `'checked'`|
| iconIndeterminateName`v1.2.1` | [图标名称](#/icon)，半选状态 | String | `'check-disabled'`|
| iconClassPrefix`v1.2.1` | 自定义 icon 类名前缀，用于使用自定义图标 | String | `nut-icon` |
| iconFontClassName`v1.2.1` | 自定义 icon 字体基础类名 | String | `nutui-iconfont` |
| label | 复选框的文本内容 | String | -|
|-------------------------------| ----- |---------------|-------------------|
| checked | 是否处于选中状态 | `boolean` | `false` |
| disabled | 是否禁用选择 | `boolean` | `false` |
| textPosition | 文本所在的位置，可选值：`left`,`right` | `string` | `right` |
| iconSize | [图标尺寸](#/icon) | `string`、`number` | `18` |
| iconName | [图标名称](#/icon)，选中前(建议和`iconActiveName`一起修改) | `ReactNode` | `'CheckNormal'` |
| iconActiveName | [图标名称](#/icon)，选中后(建议和`iconName`一起修改) | `ReactNode` | `'Checked'` |
| iconIndeterminateName`v1.2.1` | [图标名称](#/icon)，半选状态 | `ReactNode` | `'CheckDisabled'` |
| iconClassPrefix`v1.2.1` | 自定义 icon 类名前缀，用于使用自定义图标 | `string` | `nut-icon` |
| iconFontClassName`v1.2.1` | 自定义 icon 字体基础类名 | `string` | `nutui-iconfont` |
| label | 复选框的文本内容 | `string` | - |
## Checkbox.Group
| 字段 | 说明 | 类型 | 默认值|
|--------------| ----- |-------------| -- |
| checkedValue | 当前选中项的标识符，和 `label` 相对应 | String | -|
| disabled | 是否禁用选择,将用于其下的全部复选框 | Boolean | `false`|
| checkedValue | 当前选中项的标识符，和 `label` 相对应 | `string` | -|
| disabled | 是否禁用选择,将用于其下的全部复选框 | `boolean` | `false`|
| max`v1.2.1` | 限制最大可选数 | `undefined|number` | `undefined`|
| textPosition`v1.4.8` | 文本所在的位置，可选值：`left`,`right`| String| `right` |
| direction`v1.4.8` | 使用横纵方向 可选值 horizontal、vertical| String| `vertical` |
| textPosition`v1.4.8` | 文本所在的位置，可选值：`left`,`right`| `string`| `right` |
| direction`v1.4.8` | 使用横纵方向 可选值 horizontal、vertical| `string`| `vertical` |
| options `v1.3.10` | 配置 options 渲染复选按钮 | Array | `Array<{ label: string value: string disabled?: boolean }` |
## Checkbox Event
......
src/packages/checkbox/doc.zh-TW.md
浏览文件 @ c3633b7a
......@@ -403,26 +403,26 @@ export default CheckboxGroupOptions;
| 字段 | 說明 | 類型 | 默認值 |
|-------------------------------| ----- | ----- | -----|
| checked | 是否處於選中狀態 | Boolean | `false`|
| disabled | 是否禁用選擇 | Boolean | `false`|
| textPosition | 文本所在的位置，可選值：`left`,`right` | String | `right`|
| iconSize | [圖標尺寸](#/icon) | String、Number | `18`|
| iconName | [圖標名稱](#/icon)，選中前(建議和`iconActiveName`一起修改) | String | `'check-normal'`|
| iconActiveName | [圖標名稱](#/icon)，選中後(建議和`iconName`一起修改) | String | `'checked'`|
| iconIndeterminateName`v1.2.1` | [圖標名稱](#/icon)，半選狀態 | String | `'check-disabled'`|
| iconClassPrefix`v1.2.1` | 自定義 icon 類名前綴，用於使用自定義圖標 | String | `nut-icon` |
| iconFontClassName`v1.2.1` | 自定義 icon 字體基礎類名 | String | `nutui-iconfont` |
| label | 複選框的文本內容 | String | -|
| checked | 是否處於選中狀態 | `boolean` | `false`|
| disabled | 是否禁用選擇 | `boolean` | `false`|
| textPosition | 文本所在的位置，可選值：`left`,`right` | `string` | `right`|
| iconSize | [圖標尺寸](#/icon) | `string`、Number | `18`|
| iconName | [圖標名稱](#/icon)，選中前(建議和`iconActiveName`一起修改) | `string` | `'CheckNormal'`|
| iconActiveName | [圖標名稱](#/icon)，選中後(建議和`iconName`一起修改) | `string` | `'Checked'`|
| iconIndeterminateName`v1.2.1` | [圖標名稱](#/icon)，半選狀態 | `string` | `'CheckDisabled'`|
| iconClassPrefix`v1.2.1` | 自定義 icon 類名前綴，用於使用自定義圖標 | `string` | `nut-icon` |
| iconFontClassName`v1.2.1` | 自定義 icon 字體基礎類名 | `string` | `nutui-iconfont` |
| label | 複選框的文本內容 | `string` | -|
## Checkbox.Group
| 字段 | 說明 | 類型 | 默認值|
|--------------| ----- |-------------| -- |
| checkedValue | 當前選中項的標識符，和 `label` 相對應 | String | -|
| disabled | 是否禁用選擇,將用於其下的全部複選框 | Boolean | `false`|
| checkedValue | 當前選中項的標識符，和 `label` 相對應 | `string` | -|
| disabled | 是否禁用選擇,將用於其下的全部複選框 | `boolean` | `false`|
| max`v1.2.1` | 限制最大可選數 | `undefined|number` | `undefined`|
| textPosition | 文本所在的位置，可選值：'left'，'right' | String | `right` |
| direction | 使用橫縱方向 可選值 horizontal、vertical | String | `vertical` |
| textPosition | 文本所在的位置，可選值：'left'，'right' | `string` | `right` |
| direction | 使用橫縱方向 可選值 horizontal、vertical | `string` | `vertical` |
| options `v1.3.10` | 配置 options 渲染复选按钮 | Array | `Array<{ label: string value: string disabled?: boolean }` |
## Checkbox Event
......
src/packages/radio/doc.en-US.md
浏览文件 @ c3633b7a
......@@ -112,15 +112,16 @@ It is recommended that 'iconName' and 'iconActiveName' be modified together
```tsx
import React, { useState } from 'react';
import { Radio } from '@nutui/nutui-react';
import { CheckList } from '@nutui/icons-react'
const RadioGroupLast = () => {
const [radioVal] = useState('1')
return <>
<Radio.RadioGroup value={radioVal}>
<Radio value="1" iconName="checklist" iconActiveName="checklist">Custom
icons</Radio>
<Radio value="2" iconName="checklist" iconActiveName="checklist">Custom
icons</Radio>
<Radio value="1" iconName={<CheckList/>}
iconActiveName={<CheckList/>}>Custom icons</Radio>
<Radio value="2" iconName={<CheckList/>}
iconActiveName={<CheckList/>}>Custom icons</Radio>
</Radio.RadioGroup>
</>
}
......@@ -196,20 +197,20 @@ export default RadioGroupOptions;
| Props | Description | Type | Default |
|----------------| ----- | ----- |------------------|
| disabled | Disable the selection | Boolean | `false` |
| iconSize | [Icon size] (#/icon) | String、Number | `18` |
| iconName | [Icon Name] (#/icon), before selecting (it is recommended to modify it with 'iconActiveName') | String | `'check-normal'` |
| iconActiveName | [Icon Name] (#/icon), selected (it is recommended to modify it with 'iconName') | String | `'check-checked'` |
| value | Value is carrying identification, used in Group mode | String、Number、Boolean | - |
| shape | Shape, with optional values of button, round, | String | round |
| disabled | Disable the selection | `boolean` | `false` |
| iconSize | [Icon size] (#/icon) | `string`、`number` | `18` |
| iconName | [Icon Name] (#/icon), before selecting (it is recommended to modify it with 'iconActiveName') | `string` | `'check-normal'` |
| iconActiveName | [Icon Name] (#/icon), selected (it is recommended to modify it with 'iconName') | `string` | `'check-checked'` |
| value | Value is carrying identification, used in Group mode | `string`、`number`、`boolean` | - |
| shape | Shape, with optional values of button, round, | `string` | round |
### Radio.RadioGroup
| Props | Description | Type | Default |
|----------------| ----- | ----- |------------------|
| value | The identifier of the currently selected item, which is selected when the label value is consistent with the | String、Number、Boolean | - |
| textPosition | Where the text is located, optional values: 'left', 'right' | String | `right` |
| direction | Use horizontal and vertical directions The optional values horizontal, vertical, | String | `vertical` |
| value | The identifier of the currently selected item, which is selected when the label value is consistent with the | `string`、`number`、`boolean` | - |
| textPosition | Where the text is located, optional values: 'left', 'right' | `string` | `right` |
| direction | Use horizontal and vertical directions The optional values horizontal, vertical, | `string` | `vertical` |
| options `v1.3.10` | Render radios by configuring options | Array | `Array<{ label: string value: string disabled?: boolean }` |
## Radio.RadioGroup Event
......
src/packages/radio/doc.md
浏览文件 @ c3633b7a
......@@ -111,15 +111,16 @@ export default RadioGroupLast;
```tsx
import React, { useState } from 'react';
import { Radio } from '@nutui/nutui-react';
import { CheckList } from '@nutui/icons-react'
const RadioGroupLast = () => {
const [radioVal] = useState('1')
return <>
<Radio.RadioGroup value={radioVal}>
<Radio value="1" iconName="checklist"
iconActiveName="checklist">自定义图标</Radio>
<Radio value="2" iconName="checklist"
iconActiveName="checklist">自定义图标</Radio>
<Radio value="1" iconName={<CheckList/>}
iconActiveName={<CheckList/>}>自定义图标</Radio>
<Radio value="2" iconName={<CheckList/>}
iconActiveName={<CheckList/>}>自定义图标</Radio>
</Radio.RadioGroup>
</>
}
......@@ -182,7 +183,7 @@ const RadioGroupOptions = () => {
console.log(v)
setRadioVal(v)
}
return <Radio.RadioGroup options={optionsDemo1} value={radioVal} onChange={handleChange}></Radio.RadioGroup>
return <Radio.RadioGroup options={optionsDemo1} value={radioVal} onChange={handleChange} />
}
export default RadioGroupOptions;
```
......@@ -193,22 +194,22 @@ export default RadioGroupOptions;
### Radio
| 字段 | 说明 | 类型 | 默认值 |
|------------------|--------------------------------------------------------------|-------------------------|-------------------|
| disabled | 是否禁用选择 | Boolean | `false` |
| iconSize | [图标尺寸](#/icon) | String、Number | `18` |
| iconName | [图标名称](#/icon)，选中前(建议和`iconActiveName`一起修改) | String | `'check-normal'` |
| iconActiveName | [图标名称](#/icon)，选中后(建议和`iconName`一起修改) | String | `'check-checked'` |
| value | 携带的标识值，用于 Group 模式 | String、Number、Boolean | - |
| shape | 形状，可选值为 button、round | String | round |
| 字段 | 说明 | 类型 | 默认值 |
|------------------|--------------------------------------------------------------|-----------------------|------------------|
| disabled | 是否禁用选择 | `boolean` | `false` |
| iconSize | [图标尺寸](#/icon) | `string`、`number` | `18` |
| iconName | [图标名称](#/icon)，选中前(建议和`iconActiveName`一起修改) | `ReactNode` | `'CheckNormal'` |
| iconActiveName | [图标名称](#/icon)，选中后(建议和`iconName`一起修改) | `ReactNode` | `'CheckChecked'` |
| value | 携带的标识值，用于 Group 模式 | `string`、`number`、`boolean` | - |
| shape | 形状，可选值为 button、round | `string` | round |
### Radio.RadioGroup
| 字段 | 说明 | 类型 | 默认值 |
|---------------|-----------------------------------------------|-------------------------|------------|
| value | 当前选中项的标识符，与label值一致时呈选中状态 | String、Number、Boolean | - |
| textPosition | 文本所在的位置，可选值：`left`,`right` | String | `right` |
| direction | 使用横纵方向 可选值 horizontal、vertical | String | `vertical` |
| value | 当前选中项的标识符，与label值一致时呈选中状态 | `string`、`number`、`boolean` | - |
| textPosition | 文本所在的位置，可选值：`left`,`right` | `string` | `right` |
| direction | 使用横纵方向 可选值 horizontal、vertical | `string` | `vertical` |
| options `v1.3.10` | 配置 options 渲染单选按钮 | Array | `Array<{ label: string value: string disabled?: boolean }` |
......
src/packages/radio/doc.taro.md
浏览文件 @ c3633b7a
......@@ -110,15 +110,16 @@ export default RadioGroupLast;
```tsx
import React, { useState } from 'react';
import { Radio } from '@nutui/nutui-react-taro';
import { CheckList } from '@nutui/icons-react-taro'
const RadioGroupLast = () => {
const [radioVal] = useState('1')
return <>
<Radio.RadioGroup value={radioVal}>
<Radio value="1" iconName="checklist"
iconActiveName="checklist">自定义图标</Radio>
<Radio value="2" iconName="checklist"
iconActiveName="checklist">自定义图标</Radio>
<Radio value="1" iconName={<CheckList/>}
iconActiveName={<CheckList/>}>自定义图标</Radio>
<Radio value="2" iconName={<CheckList/>}
iconActiveName={<CheckList/>}>自定义图标</Radio>
</Radio.RadioGroup>
</>
}
......@@ -181,7 +182,7 @@ const RadioGroupOptions = () => {
console.log(v)
setRadioVal(v)
}
return <Radio.RadioGroup options={optionsDemo1} value={radioVal} onChange={handleChange}></Radio.RadioGroup>
return <Radio.RadioGroup options={optionsDemo1} value={radioVal} onChange={handleChange} />
}
export default RadioGroupOptions;
```
......@@ -193,21 +194,21 @@ export default RadioGroupOptions;
### Radio
| 字段 | 说明 | 类型 | 默认值 |
|------------------|--------------------------------------------------------------|-------------------------|-------------------|
| disabled | 是否禁用选择 | Boolean | `false` |
| iconSize | [图标尺寸](#/icon) | String、Number | `18` |
| iconName | [图标名称](#/icon)，选中前(建议和`iconActiveName`一起修改) | String | `'check-normal'` |
| iconActiveName | [图标名称](#/icon)，选中后(建议和`iconName`一起修改) | String | `'check-checked'` |
| value | 携带的标识值，用于 Group 模式 | String、Number、Boolean | - |
| shape | 形状，可选值为 button、round | String | round |
|------------------|--------------------------------------------------------------|-----------------------|------------------|
| disabled | 是否禁用选择 | `boolean` | `false` |
| iconSize | [图标尺寸](#/icon) | `string`、`number` | `18` |
| iconName | [图标名称](#/icon)，选中前(建议和`iconActiveName`一起修改) | `ReactNode` | `'CheckNormal'` |
| iconActiveName | [图标名称](#/icon)，选中后(建议和`iconName`一起修改) | `ReactNode` | `'CheckChecked'` |
| value | 携带的标识值，用于 Group 模式 | `string`、`number`、`boolean` | - |
| shape | 形状，可选值为 button、round | `string` | round |
### Radio.RadioGroup
| 字段 | 说明 | 类型 | 默认值 |
|---------------|-----------------------------------------------|-------------------------|------------|
| value | 当前选中项的标识符，与label值一致时呈选中状态 | String、Number、Boolean | - |
| textPosition | 文本所在的位置，可选值：`left`,`right` | String | `right` |
| direction | 使用横纵方向 可选值 horizontal、vertical | String | `vertical` |
| value | 当前选中项的标识符，与label值一致时呈选中状态 | `string`、`number`、`boolean` | - |
| textPosition | 文本所在的位置，可选值：`left`,`right` | `string` | `right` |
| direction | 使用横纵方向 可选值 horizontal、vertical | `string` | `vertical` |
| options `v1.3.10` | 配置 options 渲染单选按钮 | Array | `Array<{ label: string value: string disabled?: boolean }` |
......
src/packages/radio/doc.zh-TW.md
浏览文件 @ c3633b7a
......@@ -111,15 +111,16 @@ export default RadioGroupLast;
```tsx
import React, { useState } from 'react'
import { Radio } from '@nutui/nutui-react';
import { CheckList } from '@nutui/icons-react'
const RadioGroupLast = () => {
const [radioVal] = useState('1')
return <>
<Radio.RadioGroup value={radioVal}>
<Radio value="1" iconName="checklist"
iconActiveName="checklist">自訂圖示</Radio>
<Radio value="2" iconName="checklist"
iconActiveName="checklist">自訂圖示</Radio>
<Radio value="1" iconName={<CheckList/>}
iconActiveName={<CheckList/>}>自定义图标</Radio>
<Radio value="2" iconName={<CheckList/>}
iconActiveName={<CheckList/>}>自定义图标</Radio>
</Radio.RadioGroup>
</>
}
......@@ -195,20 +196,20 @@ export default RadioGroupOptions;
| 屬性 | 說明 | 類型 | 預設值 |
|------------------|--------------------------------------------------------------|-------------------------|-------------------|
| disabled | 是否禁用選擇 | Boolean | `false` |
| iconSize | [圖示尺寸](#/icon) | String、Number | `18` |
| iconName | [圖示名稱](#/icon)，選中前（建議和'iconActiveName'一起修改） | String | `'check-normal'` |
| iconActiveName | [圖示名稱](#/icon)，選取後（建議和'iconName'一起修改） | String | `'check-checked'` |
| value | 攜帶的標識值，用於 Group 模式 | String、Number、Boolean | - |
| shape | 形狀，可選值為 button、round | String | round |
| disabled | 是否禁用選擇 | `boolean` | `false` |
| iconSize | [圖示尺寸](#/icon) | `string`、`number` | `18` |
| iconName | [圖示名稱](#/icon)，選中前（建議和'iconActiveName'一起修改） | `string` | `'check-normal'` |
| iconActiveName | [圖示名稱](#/icon)，選取後（建議和'iconName'一起修改） | `string` | `'check-checked'` |
| value | 攜帶的標識值，用於 Group 模式 | `string`、`number`、`boolean` | - |
| shape | 形狀，可選值為 button、round | `string` | round |
### Radio.RadioGroup
| 屬性 | 說明 | 類型 | 預設值 |
|---------------|-----------------------------------------------|-------------------------|------------|
| value | 當前選取的標識碼，與label值一致時呈選中狀態 | String、Number、Boolean | - |
| textPosition | 文本所在的位置，可選值：'left'，'right' | String | `right` |
| direction | 使用橫縱方向 可選值 horizontal、vertical | String | `vertical` |
| value | 當前選取的標識碼，與label值一致時呈選中狀態 | `string`、`number`、`boolean` | - |
| textPosition | 文本所在的位置，可選值：'left'，'right' | `string` | `right` |
| direction | 使用橫縱方向 可選值 horizontal、vertical | `string` | `vertical` |
| options `v1.3.10` | 配置 options 渲染單選按鈕 | Array | `Array<{ label: string value: string disabled?: boolean }` |
## Radio.RadioGroup Event
......
src/packages/radio/radio.taro.tsx
浏览文件 @ c3633b7a
......@@ -5,7 +5,7 @@ import React, {
useEffect,
useState,
} from 'react'
import Icon from '@/packages/icon/index.taro'
import { CheckChecked, CheckNormal } from '@nutui/icons-react-taro'
import RadioContext from './context'
import RadioGroup from '@/packages/radiogroup/index.taro'
......@@ -23,8 +23,8 @@ export interface RadioProps extends BasicComponent {
shape: Shape
textPosition: Position
value: string | number | boolean
iconName: string
iconActiveName: string
iconName: React.ReactNode
iconActiveName: React.ReactNode
iconSize: string | number
onChange: MouseEventHandler<HTMLDivElement>
}
......@@ -112,16 +112,23 @@ export const Radio: FunctionComponent<
const renderIcon = () => {
const { iconName, iconSize, iconActiveName } = props
return (
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
name={
!disabledStatement && checkedStatement ? iconActiveName : iconName
}
size={iconSize}
className={color()}
/>
if (!disabledStatement && checkedStatement) {
return React.isValidElement(iconActiveName) ? (
React.cloneElement<any>(iconActiveName, {
size: iconSize,
className: color(),
})
) : (
<CheckChecked width={iconSize} height={iconSize} className={color()} />
)
}
return React.isValidElement(iconName) ? (
React.cloneElement<any>(iconName, {
size: iconSize,
className: color(),
})
) : (
<CheckNormal width={iconSize} height={iconSize} className={color()} />
)
}
const reverseState = textPosition === 'left'
......
src/packages/radio/radio.tsx
浏览文件 @ c3633b7a
......@@ -5,7 +5,7 @@ import React, {
useEffect,
useState,
} from 'react'
import Icon from '@/packages/icon'
import { CheckChecked, CheckNormal } from '@nutui/icons-react'
import RadioContext from './context'
import RadioGroup from '@/packages/radiogroup'
......@@ -23,8 +23,8 @@ export interface RadioProps extends BasicComponent {
shape: Shape
textPosition: Position
value: string | number | boolean
iconName: string
iconActiveName: string
iconName: React.ReactNode
iconActiveName: React.ReactNode
iconSize: string | number
onChange: MouseEventHandler<HTMLDivElement>
}
......@@ -112,16 +112,23 @@ export const Radio: FunctionComponent<
const renderIcon = () => {
const { iconName, iconSize, iconActiveName } = props
return (
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
name={
!disabledStatement && checkedStatement ? iconActiveName : iconName
}
size={iconSize}
className={color()}
/>
if (!disabledStatement && checkedStatement) {
return React.isValidElement(iconActiveName) ? (
React.cloneElement<any>(iconActiveName, {
size: iconSize,
className: color(),
})
) : (
<CheckChecked width={iconSize} height={iconSize} className={color()} />
)
}
return React.isValidElement(iconName) ? (
React.cloneElement<any>(iconName, {
size: iconSize,
className: color(),
})
) : (
<CheckNormal width={iconSize} height={iconSize} className={color()} />
)
}
const reverseState = textPosition === 'left'
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或