source/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2026-02-09 02:49:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Radio.Group & Checkbox.Group Option support className (#52917)

Browse Source
This commit is contained in:
lijianan
2025-02-24 13:41:19 +08:00
committed by GitHub
parent 77254d3d0e
commit e123ec16e5
13 changed files with 81 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@@ -1130,7 +1130,7 @@ exports[`renders components/radio/demo/radiogroup.tsx extend context correctly 1
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-wrapper ant-radio-wrapper-checked"
class="ant-radio-wrapper ant-radio-wrapper-checked option-1"
>
<span
class="ant-radio ant-wave-target ant-radio-checked"
@@ -1177,7 +1177,7 @@ exports[`renders components/radio/demo/radiogroup.tsx extend context correctly 1
</span>
</label>
<label
class="ant-radio-wrapper"
class="ant-radio-wrapper option-2"
>
<span
class="ant-radio ant-wave-target"
@@ -1223,7 +1223,7 @@ exports[`renders components/radio/demo/radiogroup.tsx extend context correctly 1
</span>
</label>
<label
class="ant-radio-wrapper"
class="ant-radio-wrapper option-3"
>
<span
class="ant-radio ant-wave-target"
@@ -1269,7 +1269,7 @@ exports[`renders components/radio/demo/radiogroup.tsx extend context correctly 1
</span>
</label>
<label
class="ant-radio-wrapper"
class="ant-radio-wrapper option-4"
>
<span
class="ant-radio ant-wave-target"
@@ -1718,7 +1718,7 @@ Array [
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-wrapper ant-radio-wrapper-checked"
class="ant-radio-wrapper ant-radio-wrapper-checked label-1"
>
<span
class="ant-radio ant-wave-target ant-radio-checked"
@@ -1741,7 +1741,7 @@ Array [
</span>
</label>
<label
class="ant-radio-wrapper"
class="ant-radio-wrapper label-2"
>
<span
class="ant-radio ant-wave-target"
@@ -1763,7 +1763,7 @@ Array [
</span>
</label>
<label
class="ant-radio-wrapper ant-radio-wrapper-disabled"
class="ant-radio-wrapper ant-radio-wrapper-disabled label-3"
>
<span
class="ant-radio ant-wave-target ant-radio-disabled"
@@ -1792,7 +1792,7 @@ Array [
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked label-1"
>
<span
class="ant-radio-button ant-radio-button-checked"
@@ -1815,7 +1815,7 @@ Array [
</span>
</label>
<label
class="ant-radio-button-wrapper"
class="ant-radio-button-wrapper label-2"
>
<span
class="ant-radio-button"
@@ -1837,7 +1837,7 @@ Array [
</span>
</label>
<label
class="ant-radio-button-wrapper"
class="ant-radio-button-wrapper label-3"
title="Orange"
>
<span
@@ -1866,7 +1866,7 @@ Array [
class="ant-radio-group ant-radio-group-solid"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked label-1"
>
<span
class="ant-radio-button ant-radio-button-checked"
@@ -1889,7 +1889,7 @@ Array [
</span>
</label>
<label
class="ant-radio-button-wrapper"
class="ant-radio-button-wrapper label-2"
>
<span
class="ant-radio-button"
@@ -1911,7 +1911,7 @@ Array [
</span>
</label>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"
class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled label-3"
>
<span
class="ant-radio-button ant-radio-button-disabled"

26
components/radio/__tests__/__snapshots__/demo.test.tsx.snap
View File

@@ -1116,7 +1116,7 @@ exports[`renders components/radio/demo/radiogroup.tsx correctly 1`] = `
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-wrapper ant-radio-wrapper-checked"
class="ant-radio-wrapper ant-radio-wrapper-checked option-1"
>
<span
class="ant-radio ant-wave-target ant-radio-checked"
@@ -1163,7 +1163,7 @@ exports[`renders components/radio/demo/radiogroup.tsx correctly 1`] = `
</span>
</label>
<label
class="ant-radio-wrapper"
class="ant-radio-wrapper option-2"
>
<span
class="ant-radio ant-wave-target"
@@ -1209,7 +1209,7 @@ exports[`renders components/radio/demo/radiogroup.tsx correctly 1`] = `
</span>
</label>
<label
class="ant-radio-wrapper"
class="ant-radio-wrapper option-3"
>
<span
class="ant-radio ant-wave-target"
@@ -1255,7 +1255,7 @@ exports[`renders components/radio/demo/radiogroup.tsx correctly 1`] = `
</span>
</label>
<label
class="ant-radio-wrapper"
class="ant-radio-wrapper option-4"
>
<span
class="ant-radio ant-wave-target"
@@ -1698,7 +1698,7 @@ Array [
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-wrapper ant-radio-wrapper-checked"
class="ant-radio-wrapper ant-radio-wrapper-checked label-1"
>
<span
class="ant-radio ant-wave-target ant-radio-checked"
@@ -1721,7 +1721,7 @@ Array [
</span>
</label>
<label
class="ant-radio-wrapper"
class="ant-radio-wrapper label-2"
>
<span
class="ant-radio ant-wave-target"
@@ -1743,7 +1743,7 @@ Array [
</span>
</label>
<label
class="ant-radio-wrapper ant-radio-wrapper-disabled"
class="ant-radio-wrapper ant-radio-wrapper-disabled label-3"
>
<span
class="ant-radio ant-wave-target ant-radio-disabled"
@@ -1772,7 +1772,7 @@ Array [
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked label-1"
>
<span
class="ant-radio-button ant-radio-button-checked"
@@ -1795,7 +1795,7 @@ Array [
</span>
</label>
<label
class="ant-radio-button-wrapper"
class="ant-radio-button-wrapper label-2"
>
<span
class="ant-radio-button"
@@ -1817,7 +1817,7 @@ Array [
</span>
</label>
<label
class="ant-radio-button-wrapper"
class="ant-radio-button-wrapper label-3"
title="Orange"
>
<span
@@ -1846,7 +1846,7 @@ Array [
class="ant-radio-group ant-radio-group-solid"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked label-1"
>
<span
class="ant-radio-button ant-radio-button-checked"
@@ -1869,7 +1869,7 @@ Array [
</span>
</label>
<label
class="ant-radio-button-wrapper"
class="ant-radio-button-wrapper label-2"
>
<span
class="ant-radio-button"
@@ -1891,7 +1891,7 @@ Array [
</span>
</label>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"
class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled label-3"
>
<span
class="ant-radio-button ant-radio-button-disabled"

12
components/radio/demo/radiogroup-options.tsx
View File

@@ -6,15 +6,15 @@ import type { CheckboxGroupProps } from 'antd/es/checkbox';
const plainOptions: CheckboxGroupProps<string>['options'] = ['Apple', 'Pear', 'Orange'];
const options: CheckboxGroupProps<string>['options'] = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange', title: 'Orange' },
{ label: 'Apple', value: 'Apple', className: 'label-1' },
{ label: 'Pear', value: 'Pear', className: 'label-2' },
{ label: 'Orange', value: 'Orange', title: 'Orange', className: 'label-3' },
];
const optionsWithDisabled: CheckboxGroupProps<string>['options'] = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange', disabled: true },
{ label: 'Apple', value: 'Apple', className: 'label-1' },
{ label: 'Pear', value: 'Pear', className: 'label-2' },
{ label: 'Orange', value: 'Orange', className: 'label-3', disabled: true },
];
const App: React.FC = () => {

4
components/radio/demo/radiogroup.tsx
View File

@@ -22,6 +22,7 @@ const App: React.FC = () => {
options={[
{
value: 1,
className: 'option-1',
label: (
<Flex gap="small" justify="center" align="center" vertical>
<LineChartOutlined style={{ fontSize: 18 }} />
@@ -31,6 +32,7 @@ const App: React.FC = () => {
},
{
value: 2,
className: 'option-2',
label: (
<Flex gap="small" justify="center" align="center" vertical>
<DotChartOutlined style={{ fontSize: 18 }} />
@@ -40,6 +42,7 @@ const App: React.FC = () => {
},
{
value: 3,
className: 'option-3',
label: (
<Flex gap="small" justify="center" align="center" vertical>
<BarChartOutlined style={{ fontSize: 18 }} />
@@ -49,6 +52,7 @@ const App: React.FC = () => {
},
{
value: 4,
className: 'option-4',
label: (
<Flex gap="small" justify="center" align="center" vertical>
<PieChartOutlined style={{ fontSize: 18 }} />

3
components/radio/group.tsx
View File

@@ -1,5 +1,6 @@
import * as React from 'react';
import classNames from 'classnames';
import useId from 'rc-util/lib/hooks/useId';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
import pickAttrs from 'rc-util/lib/pickAttrs';
@@ -15,7 +16,6 @@ import type {
} from './interface';
import Radio from './radio';
import useStyle from './style';
import useId from 'rc-util/lib/hooks/useId';
const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref) => {
const { getPrefixCls, direction } = React.useContext(ConfigContext);
@@ -98,6 +98,7 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref
checked={value === option.value}
title={option.title}
style={option.style}
className={option.className} // 👈 5.25.0+
id={option.id}
required={option.required}
>

9
components/radio/index.en-US.md
View File

@@ -20,9 +20,9 @@ return (
<Radio.Group
value={value}
options={[
{ value: 1, label: "A" },
{ value: 2, label: "B"},
{ value: 3, label: "C" },
{ value: 1, label: 'A' },
{ value: 2, label: 'B' },
{ value: 3, label: 'C' },
]}
/>
);
@@ -70,7 +70,7 @@ Common props ref：[Common props](/docs/react/common-props)
| disabled | Disable radio | boolean | false |
| value | According to value for comparison, to determine whether the selected | any | - |
### RadioGroup
### Radio.Group
Radio group can wrap a group of `Radio`。
@@ -94,6 +94,7 @@ Radio group can wrap a group of `Radio`。
| label | The text used to display as the Radio option | `string` | - | 4.4.0 |
| value | The value associated with the Radio option | `string` \| `number` \| `boolean` | - | 4.4.0 |
| style | The style to apply to the Radio option | `React.CSSProperties` | - | 4.4.0 |
| className | className of the Radio option | `string` | - | 5.25.0 |
| disabled | Specifies whether the Radio option is disabled | `boolean` | `false` | 4.4.0 |
| title | Adds the Title attribute value | `string` | - | 4.4.0 |
| id | Adds the Radio Id attribute value | `string` | - | 4.4.0 |

9
components/radio/index.zh-CN.md
View File

@@ -21,9 +21,9 @@ return (
<Radio.Group
value={value}
options={[
{ value: 1, label: "A" },
{ value: 2, label: "B"},
{ value: 3, label: "C" },
{ value: 1, label: 'A' },
{ value: 2, label: 'B' },
{ value: 3, label: 'C' },
]}
/>
);
@@ -92,11 +92,12 @@ return (
### CheckboxOptionType
| Property | Description | Type | Default | Version |
| 属性 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| label | 用于作为 Radio 选项展示的文本 | `string` | - | 4.4.0 |
| value | 关联 Radio 选项的值 | `string` \| `number` \| `boolean` | - | 4.4.0 |
| style | 应用到 Radio 选项的 style | `React.CSSProperties` | - | 4.4.0 |
| className | Radio 选项的类名 | `string` | - | 5.25.0 |
| disabled | 指定 Radio 选项是否要禁用 | `boolean` | `false` | 4.4.0 |
| title | 添加 Title 属性值 | `string` | - | 4.4.0 |
| id | 添加 Radio Id 属性值 | `string` | - | 4.4.0 |