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.
264 lines
22 KiB
264 lines
22 KiB
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[2790],{693877:function(p,c,t){t.r(c);var m=t(502143),h=t(968521),g=t(720719),b=t(28840),i=t(759907),r=t(828089),k=t(825673),v=t(902068),x=t(574399),C=t(863942),Z=t(316073),f=t(24628),E=t(719260),P=t(956140),a=t(127179),s=t(905388),D=t(40428),O=t(606965),y=t(268696),A=t(587302),o=t(424128),M=t(249706),w=t(795127),T=t(116846),L=t(212039),I=t(73024),R=t(553913),l=t(606641),d=t(667294),e=t(370917);function u(){var _=(0,l.eL)(),n=_.texts;return(0,e.tZ)(l.dY,null,(0,e.tZ)(d.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)(s.Z,{items:[{demo:{id:"components-checkbox-demo-basic"},previewerProps:{title:"Basic",filename:"components/checkbox/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 { Checkbox } from 'antd';
|
|
const onChange = (e) => {
|
|
console.log(\`checked = \${e.target.checked}\`);
|
|
};
|
|
const App = () => <Checkbox onChange={onChange}>Checkbox</Checkbox>;
|
|
export default App;
|
|
`,description:"<p>Basic usage of checkbox.</p>"}},{demo:{id:"components-checkbox-demo-disabled"},previewerProps:{title:"Disabled",filename:"components/checkbox/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 from 'react';
|
|
import { Checkbox } from 'antd';
|
|
const App = () => (
|
|
<>
|
|
<Checkbox defaultChecked={false} disabled />
|
|
<br />
|
|
<Checkbox indeterminate disabled />
|
|
<br />
|
|
<Checkbox defaultChecked disabled />
|
|
</>
|
|
);
|
|
export default App;
|
|
`,description:"<p>Disabled checkbox.</p>"}},{demo:{id:"components-checkbox-demo-controller"},previewerProps:{title:"Controlled Checkbox",filename:"components/checkbox/demo/controller.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, Checkbox } from 'antd';
|
|
const App = () => {
|
|
const [checked, setChecked] = useState(true);
|
|
const [disabled, setDisabled] = useState(false);
|
|
const toggleChecked = () => {
|
|
setChecked(!checked);
|
|
};
|
|
const toggleDisable = () => {
|
|
setDisabled(!disabled);
|
|
};
|
|
const onChange = (e) => {
|
|
console.log('checked = ', e.target.checked);
|
|
setChecked(e.target.checked);
|
|
};
|
|
const label = \`\${checked ? 'Checked' : 'Unchecked'}-\${disabled ? 'Disabled' : 'Enabled'}\`;
|
|
return (
|
|
<>
|
|
<p
|
|
style={{
|
|
marginBottom: '20px',
|
|
}}
|
|
>
|
|
<Checkbox checked={checked} disabled={disabled} onChange={onChange}>
|
|
{label}
|
|
</Checkbox>
|
|
</p>
|
|
<p>
|
|
<Button type="primary" size="small" onClick={toggleChecked}>
|
|
{!checked ? 'Check' : 'Uncheck'}
|
|
</Button>
|
|
<Button
|
|
style={{
|
|
margin: '0 10px',
|
|
}}
|
|
type="primary"
|
|
size="small"
|
|
onClick={toggleDisable}
|
|
>
|
|
{!disabled ? 'Disable' : 'Enable'}
|
|
</Button>
|
|
</p>
|
|
</>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>Communicated with other components.</p>"}},{demo:{id:"components-checkbox-demo-group"},previewerProps:{title:"Checkbox Group",filename:"components/checkbox/demo/group.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 { Checkbox } from 'antd';
|
|
import React from 'react';
|
|
const onChange = (checkedValues) => {
|
|
console.log('checked = ', checkedValues);
|
|
};
|
|
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: false,
|
|
},
|
|
];
|
|
const App = () => (
|
|
<>
|
|
<Checkbox.Group options={plainOptions} defaultValue={['Apple']} onChange={onChange} />
|
|
<br />
|
|
<br />
|
|
<Checkbox.Group options={options} defaultValue={['Pear']} onChange={onChange} />
|
|
<br />
|
|
<br />
|
|
<Checkbox.Group
|
|
options={optionsWithDisabled}
|
|
disabled
|
|
defaultValue={['Apple']}
|
|
onChange={onChange}
|
|
/>
|
|
</>
|
|
);
|
|
export default App;
|
|
`,description:"<p>Generate a group of checkboxes from an array.</p>"}},{demo:{id:"components-checkbox-demo-check-all"},previewerProps:{title:"Check all",filename:"components/checkbox/demo/check-all.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 { Checkbox, Divider } from 'antd';
|
|
const CheckboxGroup = Checkbox.Group;
|
|
const plainOptions = ['Apple', 'Pear', 'Orange'];
|
|
const defaultCheckedList = ['Apple', 'Orange'];
|
|
const App = () => {
|
|
const [checkedList, setCheckedList] = useState(defaultCheckedList);
|
|
const [indeterminate, setIndeterminate] = useState(true);
|
|
const [checkAll, setCheckAll] = useState(false);
|
|
const onChange = (list) => {
|
|
setCheckedList(list);
|
|
setIndeterminate(!!list.length && list.length < plainOptions.length);
|
|
setCheckAll(list.length === plainOptions.length);
|
|
};
|
|
const onCheckAllChange = (e) => {
|
|
setCheckedList(e.target.checked ? plainOptions : []);
|
|
setIndeterminate(false);
|
|
setCheckAll(e.target.checked);
|
|
};
|
|
return (
|
|
<>
|
|
<Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
|
|
Check all
|
|
</Checkbox>
|
|
<Divider />
|
|
<CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} />
|
|
</>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>The <code>indeterminate</code> property can help you to achieve a 'check all' effect.</p>"}},{demo:{id:"components-checkbox-demo-layout"},previewerProps:{title:"Use with Grid",filename:"components/checkbox/demo/layout.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 { Checkbox, Col, Row } from 'antd';
|
|
const onChange = (checkedValues) => {
|
|
console.log('checked = ', checkedValues);
|
|
};
|
|
const App = () => (
|
|
<Checkbox.Group
|
|
style={{
|
|
width: '100%',
|
|
}}
|
|
onChange={onChange}
|
|
>
|
|
<Row>
|
|
<Col span={8}>
|
|
<Checkbox value="A">A</Checkbox>
|
|
</Col>
|
|
<Col span={8}>
|
|
<Checkbox value="B">B</Checkbox>
|
|
</Col>
|
|
<Col span={8}>
|
|
<Checkbox value="C">C</Checkbox>
|
|
</Col>
|
|
<Col span={8}>
|
|
<Checkbox value="D">D</Checkbox>
|
|
</Col>
|
|
<Col span={8}>
|
|
<Checkbox value="E">E</Checkbox>
|
|
</Col>
|
|
</Row>
|
|
</Checkbox.Group>
|
|
);
|
|
export default App;
|
|
`,description:"<p>We can use Checkbox and Grid in Checkbox.Group, to implement complex layout.</p>"}},{demo:{id:"components-checkbox-demo-debug-line"},previewerProps:{debug:!0,title:"Same line",filename:"components/checkbox/demo/debug-line.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 { Checkbox, ConfigProvider, Radio, Space } from 'antd';
|
|
import React from 'react';
|
|
const sharedStyle = {
|
|
border: '1px solid red',
|
|
marginBottom: 16,
|
|
};
|
|
const App = () => (
|
|
<div>
|
|
<Space style={sharedStyle} align="center">
|
|
<Checkbox value="light" />
|
|
<div>Bamboo</div>
|
|
<Checkbox value="little">Little</Checkbox>
|
|
</Space>
|
|
|
|
<Space style={sharedStyle} align="center">
|
|
<Radio value="light" />
|
|
<div>Bamboo</div>
|
|
<Radio value="little">Little</Radio>
|
|
</Space>
|
|
|
|
<div
|
|
style={{
|
|
...sharedStyle,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<Checkbox value="light" />
|
|
<div>Bamboo</div>
|
|
<Checkbox value="little">Little</Checkbox>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
...sharedStyle,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<Radio value="light" />
|
|
<div>Bamboo</div>
|
|
<Radio value="little">Little</Radio>
|
|
</div>
|
|
|
|
<div>
|
|
<ConfigProvider
|
|
theme={{
|
|
token: {
|
|
controlHeight: 48,
|
|
},
|
|
}}
|
|
>
|
|
<Checkbox>Aligned</Checkbox>
|
|
</ConfigProvider>
|
|
</div>
|
|
|
|
<div>
|
|
<Checkbox>
|
|
<span
|
|
style={{
|
|
fontSize: 32,
|
|
}}
|
|
>
|
|
Aligned
|
|
</span>
|
|
</Checkbox>
|
|
</div>
|
|
</div>
|
|
);
|
|
export default App;
|
|
`,description:"<p>Same line</p>"}},{demo:{id:"components-checkbox-demo-debug-disable-popover"},previewerProps:{debug:!0,title:"Disabled to show Tooltip",filename:"components/checkbox/demo/debug-disable-popover.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 { Checkbox, Popover } from 'antd';
|
|
const App = () => (
|
|
<div
|
|
style={{
|
|
padding: 56,
|
|
}}
|
|
>
|
|
<Popover content="xxxx" trigger="hover">
|
|
<Checkbox disabled checked />
|
|
</Popover>
|
|
</div>
|
|
);
|
|
export default App;
|
|
`,description:"<p>Disable to show/hide Tooltip</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)("h4",{id:"checkbox"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#checkbox",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Checkbox"),(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)("th",null,n[7].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(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)("td",null,n[11].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(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)("td",null,n[15].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(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)("td",null,n[19].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(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)("td",null,n[23].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(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)("td",null,n[27].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[28].value),(0,e.tZ)("td",null,n[29].value),(0,e.tZ)("td",null,n[30].value),(0,e.tZ)("td",null,n[31].value),(0,e.tZ)("td",null)))),(0,e.tZ)("h4",{id:"checkbox-group"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#checkbox-group",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Checkbox Group"),(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[32].value),(0,e.tZ)("th",null,n[33].value),(0,e.tZ)("th",null,n[34].value),(0,e.tZ)("th",null,n[35].value),(0,e.tZ)("th",null,n[36].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[37].value),(0,e.tZ)("td",null,n[38].value),(0,e.tZ)("td",null,n[39].value),(0,e.tZ)("td",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)("code",null,n[47].value),n[48].value,(0,e.tZ)("code",null,n[49].value),n[50].value),(0,e.tZ)("td",null,n[51].value),(0,e.tZ)("td",null,n[52].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[53].value),(0,e.tZ)("td",null,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,n[63].value),(0,e.tZ)("td",null,n[64].value),(0,e.tZ)("td",null)))),(0,e.tZ)("h5",{id:"option"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#option",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Option"),(0,e.tZ)(i.Z,{lang:"typescript"},n[65].value),(0,e.tZ)("h3",{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)("h4",{id:"checkbox-1"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#checkbox-1",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Checkbox"),(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[66].value),(0,e.tZ)("th",null,n[67].value),(0,e.tZ)("th",null,n[68].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[69].value),(0,e.tZ)("td",null,n[70].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[71].value),(0,e.tZ)("td",null,n[72].value),(0,e.tZ)("td",null)))),(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)(a.Z,{component:"Checkbox"})))}c.default=u}}]);
|
|
|