You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
361 lines
32 KiB
361 lines
32 KiB
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[1214],{226372:function(p,a,t){t.r(a);var m=t(502143),_=t(968521),g=t(720719),v=t(28840),R=t(759907),r=t(828089),h=t(825673),b=t(902068),Z=t(574399),f=t(863942),B=t(316073),x=t(24628),k=t(719260),C=t(956140),l=t(127179),d=t(905388),P=t(40428),D=t(606965),y=t(268696),E=t(587302),o=t(424128),w=t(249706),A=t(795127),O=t(116846),T=t(212039),M=t(73024),j=t(553913),i=t(606641),c=t(667294),e=t(370917);function u(){var s=(0,i.eL)(),n=s.texts;return(0,e.tZ)(i.dY,null,(0,e.tZ)(c.Fragment,null,(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("p",null,n[0].value),(0,e.tZ)("h2",{id:"when-to-use"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#when-to-use",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"When To Use"),(0,e.tZ)("ul",null,(0,e.tZ)("li",null,n[1].value),(0,e.tZ)("li",null,n[2].value)),(0,e.tZ)("h2",{id:"examples"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#examples",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Examples")),(0,e.tZ)(d.Z,{items:[{demo:{id:"components-radio-demo-basic"},previewerProps:{title:"Basic",filename:"components/radio/demo/basic.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Radio } from 'antd';
|
|
const App = () => <Radio>Radio</Radio>;
|
|
export default App;
|
|
`,description:"<p>The simplest use.</p>"}},{demo:{id:"components-radio-demo-disabled"},previewerProps:{title:"disabled",filename:"components/radio/demo/disabled.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
|
import { Button, Radio } from 'antd';
|
|
const App = () => {
|
|
const [disabled, setDisabled] = useState(true);
|
|
const toggleDisabled = () => {
|
|
setDisabled(!disabled);
|
|
};
|
|
return (
|
|
<>
|
|
<Radio defaultChecked={false} disabled={disabled}>
|
|
Disabled
|
|
</Radio>
|
|
<Radio defaultChecked disabled={disabled}>
|
|
Disabled
|
|
</Radio>
|
|
<br />
|
|
<Button
|
|
type="primary"
|
|
onClick={toggleDisabled}
|
|
style={{
|
|
marginTop: 16,
|
|
}}
|
|
>
|
|
Toggle disabled
|
|
</Button>
|
|
</>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>Radio unavailable.</p>"}},{demo:{id:"components-radio-demo-radiogroup"},previewerProps:{title:"Radio Group",filename:"components/radio/demo/radiogroup.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
|
import { Radio } from 'antd';
|
|
const App = () => {
|
|
const [value, setValue] = useState(1);
|
|
const onChange = (e) => {
|
|
console.log('radio checked', e.target.value);
|
|
setValue(e.target.value);
|
|
};
|
|
return (
|
|
<Radio.Group onChange={onChange} value={value}>
|
|
<Radio value={1}>A</Radio>
|
|
<Radio value={2}>B</Radio>
|
|
<Radio value={3}>C</Radio>
|
|
<Radio value={4}>D</Radio>
|
|
</Radio.Group>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>A group of radio components.</p>"}},{demo:{id:"components-radio-demo-radiogroup-more"},previewerProps:{title:"Vertical Radio.Group",filename:"components/radio/demo/radiogroup-more.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
|
import { Input, Radio, Space } from 'antd';
|
|
const App = () => {
|
|
const [value, setValue] = useState(1);
|
|
const onChange = (e) => {
|
|
console.log('radio checked', e.target.value);
|
|
setValue(e.target.value);
|
|
};
|
|
return (
|
|
<Radio.Group onChange={onChange} value={value}>
|
|
<Space direction="vertical">
|
|
<Radio value={1}>Option A</Radio>
|
|
<Radio value={2}>Option B</Radio>
|
|
<Radio value={3}>Option C</Radio>
|
|
<Radio value={4}>
|
|
More...
|
|
{value === 4 ? (
|
|
<Input
|
|
style={{
|
|
width: 100,
|
|
marginLeft: 10,
|
|
}}
|
|
/>
|
|
) : null}
|
|
</Radio>
|
|
</Space>
|
|
</Radio.Group>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>Vertical Radio.Group, with more radios.</p>"}},{demo:{id:"components-radio-demo-radiogroup-options"},previewerProps:{title:"Radio.Group group - optional",filename:"components/radio/demo/radiogroup-options.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
|
import { Radio } from 'antd';
|
|
const plainOptions = ['Apple', 'Pear', 'Orange'];
|
|
const options = [
|
|
{
|
|
label: 'Apple',
|
|
value: 'Apple',
|
|
},
|
|
{
|
|
label: 'Pear',
|
|
value: 'Pear',
|
|
},
|
|
{
|
|
label: 'Orange',
|
|
value: 'Orange',
|
|
},
|
|
];
|
|
const optionsWithDisabled = [
|
|
{
|
|
label: 'Apple',
|
|
value: 'Apple',
|
|
},
|
|
{
|
|
label: 'Pear',
|
|
value: 'Pear',
|
|
},
|
|
{
|
|
label: 'Orange',
|
|
value: 'Orange',
|
|
disabled: true,
|
|
},
|
|
];
|
|
const App = () => {
|
|
const [value1, setValue1] = useState('Apple');
|
|
const [value2, setValue2] = useState('Apple');
|
|
const [value3, setValue3] = useState('Apple');
|
|
const [value4, setValue4] = useState('Apple');
|
|
const onChange1 = ({ target: { value } }) => {
|
|
console.log('radio1 checked', value);
|
|
setValue1(value);
|
|
};
|
|
const onChange2 = ({ target: { value } }) => {
|
|
console.log('radio2 checked', value);
|
|
setValue2(value);
|
|
};
|
|
const onChange3 = ({ target: { value } }) => {
|
|
console.log('radio3 checked', value);
|
|
setValue3(value);
|
|
};
|
|
const onChange4 = ({ target: { value } }) => {
|
|
console.log('radio4 checked', value);
|
|
setValue4(value);
|
|
};
|
|
return (
|
|
<>
|
|
<Radio.Group options={plainOptions} onChange={onChange1} value={value1} />
|
|
<br />
|
|
<Radio.Group options={optionsWithDisabled} onChange={onChange2} value={value2} />
|
|
<br />
|
|
<br />
|
|
<Radio.Group options={options} onChange={onChange3} value={value3} optionType="button" />
|
|
<br />
|
|
<br />
|
|
<Radio.Group
|
|
options={optionsWithDisabled}
|
|
onChange={onChange4}
|
|
value={value4}
|
|
optionType="button"
|
|
buttonStyle="solid"
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>Render radios by configuring <code>options</code>. Radio type can also be set through the <code>optionType</code> parameter.</p>"}},{demo:{id:"components-radio-demo-radiobutton"},previewerProps:{title:"radio style",filename:"components/radio/demo/radiobutton.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Radio } from 'antd';
|
|
const onChange = (e) => {
|
|
console.log(\`radio checked:\${e.target.value}\`);
|
|
};
|
|
const App = () => (
|
|
<>
|
|
<Radio.Group onChange={onChange} defaultValue="a">
|
|
<Radio.Button value="a">Hangzhou</Radio.Button>
|
|
<Radio.Button value="b">Shanghai</Radio.Button>
|
|
<Radio.Button value="c">Beijing</Radio.Button>
|
|
<Radio.Button value="d">Chengdu</Radio.Button>
|
|
</Radio.Group>
|
|
<Radio.Group
|
|
onChange={onChange}
|
|
defaultValue="a"
|
|
style={{
|
|
marginTop: 16,
|
|
}}
|
|
>
|
|
<Radio.Button value="a">Hangzhou</Radio.Button>
|
|
<Radio.Button value="b" disabled>
|
|
Shanghai
|
|
</Radio.Button>
|
|
<Radio.Button value="c">Beijing</Radio.Button>
|
|
<Radio.Button value="d">Chengdu</Radio.Button>
|
|
</Radio.Group>
|
|
<Radio.Group
|
|
disabled
|
|
onChange={onChange}
|
|
defaultValue="a"
|
|
style={{
|
|
marginTop: 16,
|
|
}}
|
|
>
|
|
<Radio.Button value="a">Hangzhou</Radio.Button>
|
|
<Radio.Button value="b">Shanghai</Radio.Button>
|
|
<Radio.Button value="c">Beijing</Radio.Button>
|
|
<Radio.Button value="d">Chengdu</Radio.Button>
|
|
</Radio.Group>
|
|
</>
|
|
);
|
|
export default App;
|
|
`,description:"<p>The combination of radio button style.</p>"}},{demo:{id:"components-radio-demo-radiogroup-with-name"},previewerProps:{title:"Radio.Group with name",filename:"components/radio/demo/radiogroup-with-name.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Radio } from 'antd';
|
|
const App = () => (
|
|
<Radio.Group name="radiogroup" defaultValue={1}>
|
|
<Radio value={1}>A</Radio>
|
|
<Radio value={2}>B</Radio>
|
|
<Radio value={3}>C</Radio>
|
|
<Radio value={4}>D</Radio>
|
|
</Radio.Group>
|
|
);
|
|
export default App;
|
|
`,description:'<p>Passing the <code>name</code> property to all <code>input[type="radio"]</code> that are in the same Radio.Group. It is usually used to let the browser see your Radio.Group as a real "group" and keep the default behavior. For example, using left/right keyboard arrow to change your selection that in the same Radio.Group.</p>'}},{demo:{id:"components-radio-demo-size"},previewerProps:{title:"Size",filename:"components/radio/demo/size.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Radio } from 'antd';
|
|
const App = () => (
|
|
<>
|
|
<Radio.Group defaultValue="a" size="large">
|
|
<Radio.Button value="a">Hangzhou</Radio.Button>
|
|
<Radio.Button value="b">Shanghai</Radio.Button>
|
|
<Radio.Button value="c">Beijing</Radio.Button>
|
|
<Radio.Button value="d">Chengdu</Radio.Button>
|
|
</Radio.Group>
|
|
<Radio.Group
|
|
defaultValue="a"
|
|
style={{
|
|
marginTop: 16,
|
|
}}
|
|
>
|
|
<Radio.Button value="a">Hangzhou</Radio.Button>
|
|
<Radio.Button value="b">Shanghai</Radio.Button>
|
|
<Radio.Button value="c">Beijing</Radio.Button>
|
|
<Radio.Button value="d">Chengdu</Radio.Button>
|
|
</Radio.Group>
|
|
<Radio.Group
|
|
defaultValue="a"
|
|
size="small"
|
|
style={{
|
|
marginTop: 16,
|
|
}}
|
|
>
|
|
<Radio.Button value="a">Hangzhou</Radio.Button>
|
|
<Radio.Button value="b">Shanghai</Radio.Button>
|
|
<Radio.Button value="c">Beijing</Radio.Button>
|
|
<Radio.Button value="d">Chengdu</Radio.Button>
|
|
</Radio.Group>
|
|
</>
|
|
);
|
|
export default App;
|
|
`,description:"<p>There are three sizes available: large, medium, and small. It can coordinate with input box.</p>"}},{demo:{id:"components-radio-demo-radiobutton-solid"},previewerProps:{title:"Solid radio button",filename:"components/radio/demo/radiobutton-solid.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Radio } from 'antd';
|
|
const App = () => (
|
|
<>
|
|
<Radio.Group defaultValue="a" buttonStyle="solid">
|
|
<Radio.Button value="a">Hangzhou</Radio.Button>
|
|
<Radio.Button value="b">Shanghai</Radio.Button>
|
|
<Radio.Button value="c">Beijing</Radio.Button>
|
|
<Radio.Button value="d">Chengdu</Radio.Button>
|
|
</Radio.Group>
|
|
<Radio.Group
|
|
defaultValue="c"
|
|
buttonStyle="solid"
|
|
style={{
|
|
marginTop: 16,
|
|
}}
|
|
>
|
|
<Radio.Button value="a">Hangzhou</Radio.Button>
|
|
<Radio.Button value="b" disabled>
|
|
Shanghai
|
|
</Radio.Button>
|
|
<Radio.Button value="c">Beijing</Radio.Button>
|
|
<Radio.Button value="d">Chengdu</Radio.Button>
|
|
</Radio.Group>
|
|
</>
|
|
);
|
|
export default App;
|
|
`,description:"<p>Solid radio button style.</p>"}},{demo:{id:"components-radio-demo-badge"},previewerProps:{debug:!0,title:"Badge style",filename:"components/radio/demo/badge.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Badge, Radio } from 'antd';
|
|
const App = () => (
|
|
<Radio.Group buttonStyle="solid">
|
|
<Badge count={1}>
|
|
<Radio.Button value={1}>Click Me</Radio.Button>
|
|
</Badge>
|
|
<Badge count={2}>
|
|
<Radio.Button value={2}>Not Me</Radio.Button>
|
|
</Badge>
|
|
</Radio.Group>
|
|
);
|
|
export default App;
|
|
`,description:"<p>Test Badge style.</p>"}},{demo:{id:"components-radio-demo-wireframe"},previewerProps:{debug:!0,title:"Wireframe",filename:"components/radio/demo/wireframe.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { ConfigProvider, Radio } from 'antd';
|
|
const App = () => (
|
|
<ConfigProvider
|
|
theme={{
|
|
token: {
|
|
wireframe: true,
|
|
},
|
|
}}
|
|
>
|
|
<Radio.Group value={1}>
|
|
<Radio value={1}>A</Radio>
|
|
<Radio value={2}>B</Radio>
|
|
<Radio value={3}>C</Radio>
|
|
<Radio value={4}>D</Radio>
|
|
</Radio.Group>
|
|
<br />
|
|
<Radio.Group value={1} disabled>
|
|
<Radio value={1}>A</Radio>
|
|
<Radio value={2}>B</Radio>
|
|
<Radio value={3}>C</Radio>
|
|
<Radio value={4}>D</Radio>
|
|
</Radio.Group>
|
|
</ConfigProvider>
|
|
);
|
|
export default App;
|
|
`,description:"<p>Wireframe style.</p>"}},{demo:{id:"components-radio-demo-component-token"},previewerProps:{debug:!0,title:"Component Token",filename:"components/radio/demo/component-token.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { ConfigProvider, Radio, Space } from 'antd';
|
|
import React from 'react';
|
|
const App = () => (
|
|
<ConfigProvider
|
|
theme={{
|
|
components: {
|
|
Radio: {
|
|
radioSize: 20,
|
|
dotSize: 10,
|
|
dotColorDisabled: 'grey',
|
|
buttonBg: '#f6ffed',
|
|
buttonCheckedBg: '#d9f7be',
|
|
buttonColor: '#faad14',
|
|
buttonPaddingInline: 20,
|
|
buttonCheckedBgDisabled: '#fffbe6',
|
|
buttonCheckedColorDisabled: '#ffe58f',
|
|
buttonSolidCheckedColor: '#ffa39e',
|
|
wrapperMarginInlineEnd: 20,
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<Space direction="vertical">
|
|
<Radio checked>Test</Radio>
|
|
<Radio checked disabled>
|
|
Disabled
|
|
</Radio>
|
|
<Radio.Group defaultValue="a">
|
|
<Radio.Button value="a">Hangzhou</Radio.Button>
|
|
<Radio.Button value="b">Shanghai</Radio.Button>
|
|
<Radio.Button value="c">Beijing</Radio.Button>
|
|
<Radio.Button value="d">Chengdu</Radio.Button>
|
|
</Radio.Group>
|
|
<Radio.Group defaultValue="a" disabled>
|
|
<Radio.Button value="a">Hangzhou</Radio.Button>
|
|
<Radio.Button value="b">Shanghai</Radio.Button>
|
|
<Radio.Button value="c">Beijing</Radio.Button>
|
|
<Radio.Button value="d">Chengdu</Radio.Button>
|
|
</Radio.Group>
|
|
<Radio.Group defaultValue="a" buttonStyle="solid">
|
|
<Radio.Button value="a">Hangzhou</Radio.Button>
|
|
<Radio.Button value="b">Shanghai</Radio.Button>
|
|
<Radio.Button value="c">Beijing</Radio.Button>
|
|
<Radio.Button value="d">Chengdu</Radio.Button>
|
|
</Radio.Group>
|
|
</Space>
|
|
</ConfigProvider>
|
|
);
|
|
export default App;
|
|
`,description:"<p>Component Token debug.</p>"}}]}),(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("h2",{id:"api"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#api",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"API"),(0,e.tZ)("h3",{id:"radioradiobutton"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#radioradiobutton",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Radio/Radio.Button"),(0,e.tZ)(r.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,n[3].value),(0,e.tZ)("th",null,n[4].value),(0,e.tZ)("th",null,n[5].value),(0,e.tZ)("th",null,n[6].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[7].value),(0,e.tZ)("td",null,n[8].value),(0,e.tZ)("td",null,n[9].value),(0,e.tZ)("td",null,n[10].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[11].value),(0,e.tZ)("td",null,n[12].value),(0,e.tZ)("td",null,n[13].value),(0,e.tZ)("td",null,n[14].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[15].value),(0,e.tZ)("td",null,n[16].value),(0,e.tZ)("td",null,n[17].value),(0,e.tZ)("td",null,n[18].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[19].value),(0,e.tZ)("td",null,n[20].value),(0,e.tZ)("td",null,n[21].value),(0,e.tZ)("td",null,n[22].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[23].value),(0,e.tZ)("td",null,n[24].value),(0,e.tZ)("td",null,n[25].value),(0,e.tZ)("td",null,n[26].value)))),(0,e.tZ)("h3",{id:"radiogroup"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#radiogroup",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"RadioGroup"),(0,e.tZ)("p",null,n[27].value,(0,e.tZ)("code",null,n[28].value),n[29].value),(0,e.tZ)(r.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,n[30].value),(0,e.tZ)("th",null,n[31].value),(0,e.tZ)("th",null,n[32].value),(0,e.tZ)("th",null,n[33].value),(0,e.tZ)("th",null,n[34].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[35].value),(0,e.tZ)("td",null,n[36].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[37].value),n[38].value,(0,e.tZ)("code",null,n[39].value)),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[40].value)),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[41].value),(0,e.tZ)("td",null,n[42].value),(0,e.tZ)("td",null,n[43].value),(0,e.tZ)("td",null,n[44].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[45].value),(0,e.tZ)("td",null,n[46].value),(0,e.tZ)("td",null,n[47].value),(0,e.tZ)("td",null,n[48].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[49].value),(0,e.tZ)("td",null,n[50].value,(0,e.tZ)("code",null,n[51].value),n[52].value,(0,e.tZ)("code",null,n[53].value),n[54].value),(0,e.tZ)("td",null,n[55].value),(0,e.tZ)("td",null,n[56].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[57].value),(0,e.tZ)("td",null,n[58].value),(0,e.tZ)("td",null,n[59].value),(0,e.tZ)("td",null,n[60].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[61].value),(0,e.tZ)("td",null,n[62].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[63].value),n[64].value,(0,e.tZ)("code",null,n[65].value)),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[66].value)),(0,e.tZ)("td",null,n[67].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[68].value),(0,e.tZ)("td",null,n[69].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[70].value),n[71].value,(0,e.tZ)("code",null,n[72].value),n[73].value,(0,e.tZ)("code",null,n[74].value)),(0,e.tZ)("td",null,n[75].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[76].value),(0,e.tZ)("td",null,n[77].value),(0,e.tZ)("td",null,n[78].value),(0,e.tZ)("td",null,n[79].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[80].value),(0,e.tZ)("td",null,n[81].value),(0,e.tZ)("td",null,n[82].value),(0,e.tZ)("td",null,n[83].value),(0,e.tZ)("td",null)))),(0,e.tZ)("h2",{id:"methods"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#methods",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Methods"),(0,e.tZ)("h3",{id:"radio"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#radio",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Radio"),(0,e.tZ)(r.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,n[84].value),(0,e.tZ)("th",null,n[85].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[86].value),(0,e.tZ)("td",null,n[87].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[88].value),(0,e.tZ)("td",null,n[89].value)))),(0,e.tZ)("h2",{id:"design-token"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#design-token",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Design Token")),(0,e.tZ)(l.Z,{component:"Radio"})))}a.default=u}}]);
|
|
|