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.
886 lines
56 KiB
886 lines
56 KiB
1 year ago
|
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[2805],{179671:function(m,a,t){t.r(a);var g=t(502143),v=t(968521),h=t(720719),_=t(28840),o=t(759907),r=t(828089),Z=t(825673),b=t(902068),f=t(574399),x=t(863942),C=t(316073),k=t(24628),j=t(719260),y=t(956140),i=t(127179),s=t(905388),w=t(40428),P=t(606965),D=t(268696),E=t(587302),l=t(424128),O=t(249706),z=t(795127),L=t(116846),A=t(212039),R=t(73024),M=t(553913),c=t(606641),d=t(667294),n=t(370917);function u(){var p=(0,c.eL)(),e=p.texts;return(0,n.tZ)(c.dY,null,(0,n.tZ)(d.Fragment,null,(0,n.tZ)("div",{className:"markdown"},(0,n.tZ)("p",null,e[0].value),(0,n.tZ)("h2",{id:"\u4F55\u65F6\u4F7F\u7528"},(0,n.tZ)(l.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u4F55\u65F6\u4F7F\u7528",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"\u4F55\u65F6\u4F7F\u7528"),(0,n.tZ)("ul",null,(0,n.tZ)("li",null,e[1].value),(0,n.tZ)("li",null,e[2].value),(0,n.tZ)("li",null,e[3].value)),(0,n.tZ)("h2",{id:"\u4EE3\u7801\u6F14\u793A"},(0,n.tZ)(l.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u4EE3\u7801\u6F14\u793A",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"\u4EE3\u7801\u6F14\u793A")),(0,n.tZ)(s.Z,{items:[{demo:{id:"components-cascader-demo-basic"},previewerProps:{title:"\u57FA\u672C",filename:"components/cascader/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 { Cascader } from 'antd';
|
||
|
|
const options = [
|
||
|
|
{
|
||
|
|
value: 'zhejiang',
|
||
|
|
label: 'Zhejiang',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'hangzhou',
|
||
|
|
label: 'Hangzhou',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'xihu',
|
||
|
|
label: 'West Lake',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'jiangsu',
|
||
|
|
label: 'Jiangsu',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'nanjing',
|
||
|
|
label: 'Nanjing',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'zhonghuamen',
|
||
|
|
label: 'Zhong Hua Men',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const onChange = (value) => {
|
||
|
|
console.log(value);
|
||
|
|
};
|
||
|
|
const App = () => <Cascader options={options} onChange={onChange} placeholder="Please select" />;
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u7701\u5E02\u533A\u7EA7\u8054\u3002</p>"}},{demo:{id:"components-cascader-demo-default-value"},previewerProps:{title:"\u9ED8\u8BA4\u503C",filename:"components/cascader/demo/default-value.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 { Cascader } from 'antd';
|
||
|
|
const options = [
|
||
|
|
{
|
||
|
|
value: 'zhejiang',
|
||
|
|
label: 'Zhejiang',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'hangzhou',
|
||
|
|
label: 'Hangzhou',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'xihu',
|
||
|
|
label: 'West Lake',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'jiangsu',
|
||
|
|
label: 'Jiangsu',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'nanjing',
|
||
|
|
label: 'Nanjing',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'zhonghuamen',
|
||
|
|
label: 'Zhong Hua Men',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const onChange = (value) => {
|
||
|
|
console.log(value);
|
||
|
|
};
|
||
|
|
const App = () => (
|
||
|
|
<Cascader defaultValue={['zhejiang', 'hangzhou', 'xihu']} options={options} onChange={onChange} />
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u9ED8\u8BA4\u503C\u901A\u8FC7\u6570\u7EC4\u7684\u65B9\u5F0F\u6307\u5B9A\u3002</p>"}},{demo:{id:"components-cascader-demo-custom-trigger"},previewerProps:{title:"\u53EF\u4EE5\u81EA\u5B9A\u4E49\u663E\u793A",filename:"components/cascader/demo/custom-trigger.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 { Cascader } from 'antd';
|
||
|
|
const options = [
|
||
|
|
{
|
||
|
|
value: 'zhejiang',
|
||
|
|
label: 'Zhejiang',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'hangzhou',
|
||
|
|
label: 'Hangzhou',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'jiangsu',
|
||
|
|
label: 'Jiangsu',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'nanjing',
|
||
|
|
label: 'Nanjing',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const App = () => {
|
||
|
|
const [text, setText] = useState('Unselect');
|
||
|
|
const onChange = (_, selectedOptions) => {
|
||
|
|
setText(selectedOptions.map((o) => o.label).join(', '));
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<span>
|
||
|
|
{text}
|
||
|
|
|
||
|
|
<Cascader options={options} onChange={onChange}>
|
||
|
|
<a href="#">Change city</a>
|
||
|
|
</Cascader>
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u5207\u6362\u6309\u94AE\u548C\u7ED3\u679C\u5206\u5F00\u3002</p>"}},{demo:{id:"components-cascader-demo-hover"},previewerProps:{title:"\u79FB\u5165\u5C55\u5F00",filename:"components/cascader/demo/hover.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 { Cascader } from 'antd';
|
||
|
|
const options = [
|
||
|
|
{
|
||
|
|
value: 'zhejiang',
|
||
|
|
label: 'Zhejiang',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'hangzhou',
|
||
|
|
label: 'Hangzhou',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'xihu',
|
||
|
|
label: 'West Lake',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'jiangsu',
|
||
|
|
label: 'Jiangsu',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'nanjing',
|
||
|
|
label: 'Nanjing',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'zhonghuamen',
|
||
|
|
label: 'Zhong Hua Men',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const onChange = (value) => {
|
||
|
|
console.log(value);
|
||
|
|
};
|
||
|
|
|
||
|
|
// Just show the latest item.
|
||
|
|
const displayRender = (labels) => labels[labels.length - 1];
|
||
|
|
const App = () => (
|
||
|
|
<Cascader
|
||
|
|
options={options}
|
||
|
|
expandTrigger="hover"
|
||
|
|
displayRender={displayRender}
|
||
|
|
onChange={onChange}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u901A\u8FC7\u79FB\u5165\u5C55\u5F00\u4E0B\u7EA7\u83DC\u5355\uFF0C\u70B9\u51FB\u5B8C\u6210\u9009\u62E9\u3002</p>"}},{demo:{id:"components-cascader-demo-disabled-option"},previewerProps:{title:"\u7981\u7528\u9009\u9879",filename:"components/cascader/demo/disabled-option.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 { Cascader } from 'antd';
|
||
|
|
const options = [
|
||
|
|
{
|
||
|
|
value: 'zhejiang',
|
||
|
|
label: 'Zhejiang',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'hangzhou',
|
||
|
|
label: 'Hangzhou',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'xihu',
|
||
|
|
label: 'West Lake',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'jiangsu',
|
||
|
|
label: 'Jiangsu',
|
||
|
|
disabled: true,
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'nanjing',
|
||
|
|
label: 'Nanjing',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'zhonghuamen',
|
||
|
|
label: 'Zhong Hua Men',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const onChange = (value) => {
|
||
|
|
console.log(value);
|
||
|
|
};
|
||
|
|
const App = () => <Cascader options={options} onChange={onChange} />;
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u901A\u8FC7\u6307\u5B9A options \u91CC\u7684 <code>disabled</code> \u5B57\u6BB5\u3002</p>"}},{demo:{id:"components-cascader-demo-change-on-select"},previewerProps:{title:"\u9009\u62E9\u5373\u6539\u53D8",filename:"components/cascader/demo/change-on-select.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 { Cascader } from 'antd';
|
||
|
|
const options = [
|
||
|
|
{
|
||
|
|
value: 'zhejiang',
|
||
|
|
label: 'Zhejiang',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'hangzhou',
|
||
|
|
label: 'Hanzhou',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'xihu',
|
||
|
|
label: 'West Lake',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'jiangsu',
|
||
|
|
label: 'Jiangsu',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'nanjing',
|
||
|
|
label: 'Nanjing',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'zhonghuamen',
|
||
|
|
label: 'Zhong Hua Men',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const onChange = (value) => {
|
||
|
|
console.log(value);
|
||
|
|
};
|
||
|
|
const App = () => <Cascader options={options} onChange={onChange} changeOnSelect />;
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u8FD9\u79CD\u4EA4\u4E92\u5141\u8BB8\u53EA\u9009\u4E2D\u7236\u7EA7\u9009\u9879\u3002</p>"}},{demo:{id:"components-cascader-demo-multiple"},previewerProps:{title:"\u591A\u9009",filename:"components/cascader/demo/multiple.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 { Cascader } from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
const options = [
|
||
|
|
{
|
||
|
|
label: 'Light',
|
||
|
|
value: 'light',
|
||
|
|
children: new Array(20).fill(null).map((_, index) => ({
|
||
|
|
label: \`Number \${index}\`,
|
||
|
|
value: index,
|
||
|
|
})),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Bamboo',
|
||
|
|
value: 'bamboo',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
label: 'Little',
|
||
|
|
value: 'little',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
label: 'Toy Fish',
|
||
|
|
value: 'fish',
|
||
|
|
disableCheckbox: true,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Toy Cards',
|
||
|
|
value: 'cards',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Toy Bird',
|
||
|
|
value: 'bird',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const onChange = (value) => {
|
||
|
|
console.log(value);
|
||
|
|
};
|
||
|
|
const App = () => (
|
||
|
|
<Cascader
|
||
|
|
style={{
|
||
|
|
width: '100%',
|
||
|
|
}}
|
||
|
|
options={options}
|
||
|
|
onChange={onChange}
|
||
|
|
multiple
|
||
|
|
maxTagCount="responsive"
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u4E00\u6B21\u6027\u9009\u62E9\u591A\u4E2A\u9009\u9879\u3002\u901A\u8FC7\u6DFB\u52A0 <code>disableCheckbox</code> \u5C5E\u6027,\u9009\u62E9\u5177\u4F53\u67D0\u4E00\u4E2A<code>checkbox</code>\u7981\u7528 \u3002\u53EF\u4EE5\u901A\u8FC7\u7C7B\u540D\u4FEE\u6539\u7981\u7528\u7684\u6837\u5F0F\u3002</p>"}},{demo:{id:"components-cascader-demo-showcheckedstrategy"},previewerProps:{title:"\u81EA\u5B9A\u4E49\u56DE\u586B\u65B9\u5F0F",filename:"components/cascader/demo/showCheckedStrategy.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 { Cascader } from 'antd';
|
||
|
|
const { SHOW_CHILD } = Cascader;
|
||
|
|
const options = [
|
||
|
|
{
|
||
|
|
label: 'Light',
|
||
|
|
value: 'light',
|
||
|
|
children: new Array(20).fill(null).map((_, index) => ({
|
||
|
|
label: \`Number \${index}\`,
|
||
|
|
value: index,
|
||
|
|
})),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Bamboo',
|
||
|
|
value: 'bamboo',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
label: 'Little',
|
||
|
|
value: 'little',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
label: 'Toy Fish',
|
||
|
|
value: 'fish',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Toy Cards',
|
||
|
|
value: 'cards',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Toy Bird',
|
||
|
|
value: 'bird',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const App = () => {
|
||
|
|
const onChange = (value) => {
|
||
|
|
console.log(value);
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Cascader
|
||
|
|
style={{
|
||
|
|
width: '100%',
|
||
|
|
}}
|
||
|
|
options={options}
|
||
|
|
onChange={onChange}
|
||
|
|
multiple
|
||
|
|
maxTagCount="responsive"
|
||
|
|
showCheckedStrategy={SHOW_CHILD}
|
||
|
|
defaultValue={[
|
||
|
|
['bamboo', 'little', 'fish'],
|
||
|
|
['bamboo', 'little', 'cards'],
|
||
|
|
['bamboo', 'little', 'bird'],
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<Cascader
|
||
|
|
style={{
|
||
|
|
width: '100%',
|
||
|
|
}}
|
||
|
|
options={options}
|
||
|
|
onChange={onChange}
|
||
|
|
multiple
|
||
|
|
maxTagCount="responsive"
|
||
|
|
defaultValue={['bamboo']}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u901A\u8FC7\u8BBE\u7F6E <code>ShowCheckedStrategy</code> \u9009\u62E9\u56DE\u586B\u65B9\u5F0F\u3002</p>"}},{demo:{id:"components-cascader-demo-size"},previewerProps:{title:"\u5927\u5C0F",filename:"components/cascader/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 { Cascader } from 'antd';
|
||
|
|
const options = [
|
||
|
|
{
|
||
|
|
value: 'zhejiang',
|
||
|
|
label: 'Zhejiang',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'hangzhou',
|
||
|
|
label: 'Hangzhou',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'xihu',
|
||
|
|
label: 'West Lake',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'jiangsu',
|
||
|
|
label: 'Jiangsu',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'nanjing',
|
||
|
|
label: 'Nanjing',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'zhonghuamen',
|
||
|
|
label: 'Zhong Hua Men',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const onChange = (value) => {
|
||
|
|
console.log(value);
|
||
|
|
};
|
||
|
|
const App = () => (
|
||
|
|
<>
|
||
|
|
<Cascader size="large" options={options} onChange={onChange} />
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<Cascader options={options} onChange={onChange} />
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<Cascader size="small" options={options} onChange={onChange} />
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u4E0D\u540C\u5927\u5C0F\u7684\u7EA7\u8054\u9009\u62E9\u5668\u3002</p>"}},{demo:{id:"components-cascader-demo-custom-render"},previewerProps:{title:"\u81EA\u5B9A\u4E49\u5DF2\u9009\u9879",filename:"components/cascader/demo/custom-render.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 { Cascader } from 'antd';
|
||
|
|
const options = [
|
||
|
|
{
|
||
|
|
value: 'zhejiang',
|
||
|
|
label: 'Zhejiang',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'hangzhou',
|
||
|
|
label: 'Hangzhou',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'xihu',
|
||
|
|
label: 'West Lake',
|
||
|
|
code: 752100,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'jiangsu',
|
||
|
|
label: 'Jiangsu',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'nanjing',
|
||
|
|
label: 'Nanjing',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'zhonghuamen',
|
||
|
|
label: 'Zhong Hua Men',
|
||
|
|
code: 453400,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const handleAreaClick = (e, label, option) => {
|
||
|
|
e.stopPropagation();
|
||
|
|
console.log('clicked', label, option);
|
||
|
|
};
|
||
|
|
const displayRender = (labels, selectedOptions) =>
|
||
|
|
labels.map((label, i) => {
|
||
|
|
const option = selectedOptions[i];
|
||
|
|
if (i === labels.length - 1) {
|
||
|
|
return (
|
||
|
|
<span key={option.value}>
|
||
|
|
{label} (<a onClick={(e) => handleAreaClick(e, label, option)}>{option.code}</a>)
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
return <span key={option.value}>{label} / </span>;
|
||
|
|
});
|
||
|
|
const App = () => (
|
||
|
|
<Cascader
|
||
|
|
options={options}
|
||
|
|
defaultValue={['zhejiang', 'hangzhou', 'xihu']}
|
||
|
|
displayRender={displayRender}
|
||
|
|
style={{
|
||
|
|
width: '100%',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u4F8B\u5982\u7ED9\u6700\u540E\u4E00\u9879\u52A0\u4E0A\u90AE\u7F16\u94FE\u63A5\u3002</p>"}},{demo:{id:"components-cascader-demo-search"},previewerProps:{title:"\u641C\u7D22",filename:"components/cascader/demo/search.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 { Cascader } from 'antd';
|
||
|
|
const options = [
|
||
|
|
{
|
||
|
|
value: 'zhejiang',
|
||
|
|
label: 'Zhejiang',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'hangzhou',
|
||
|
|
label: 'Hangzhou',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'xihu',
|
||
|
|
label: 'West Lake',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'xiasha',
|
||
|
|
label: 'Xia Sha',
|
||
|
|
disabled: true,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'jiangsu',
|
||
|
|
label: 'Jiangsu',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'nanjing',
|
||
|
|
label: 'Nanjing',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'zhonghuamen',
|
||
|
|
label: 'Zhong Hua men',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const onChange = (value, selectedOptions) => {
|
||
|
|
console.log(value, selectedOptions);
|
||
|
|
};
|
||
|
|
const filter = (inputValue, path) =>
|
||
|
|
path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
|
||
|
|
const App = () => (
|
||
|
|
<Cascader
|
||
|
|
options={options}
|
||
|
|
onChange={onChange}
|
||
|
|
placeholder="Please select"
|
||
|
|
showSearch={{
|
||
|
|
filter,
|
||
|
|
}}
|
||
|
|
onSearch={(value) => console.log(value)}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:`<p>\u53EF\u4EE5\u76F4\u63A5\u641C\u7D22\u9009\u9879\u5E76\u9009\u62E9\u3002</p>
|
||
|
|
<blockquote>
|
||
|
|
<p><code>Cascader[showSearch]</code> \u6682\u4E0D\u652F\u6301\u670D\u52A1\u7AEF\u641C\u7D22\uFF0C\u66F4\u591A\u4FE1\u606F\u89C1 <a href="https://github.com/ant-design/ant-design/issues/5547">#5547</a></p>
|
||
|
|
</blockquote>`}},{demo:{id:"components-cascader-demo-lazy"},previewerProps:{title:"\u52A8\u6001\u52A0\u8F7D\u9009\u9879",filename:"components/cascader/demo/lazy.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 { Cascader } from 'antd';
|
||
|
|
import React, { useState } from 'react';
|
||
|
|
const optionLists = [
|
||
|
|
{
|
||
|
|
value: 'zhejiang',
|
||
|
|
label: 'Zhejiang',
|
||
|
|
isLeaf: false,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'jiangsu',
|
||
|
|
label: 'Jiangsu',
|
||
|
|
isLeaf: false,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const App = () => {
|
||
|
|
const [options, setOptions] = useState(optionLists);
|
||
|
|
const onChange = (value, selectedOptions) => {
|
||
|
|
console.log(value, selectedOptions);
|
||
|
|
};
|
||
|
|
const loadData = (selectedOptions) => {
|
||
|
|
const targetOption = selectedOptions[selectedOptions.length - 1];
|
||
|
|
|
||
|
|
// load options lazily
|
||
|
|
setTimeout(() => {
|
||
|
|
targetOption.children = [
|
||
|
|
{
|
||
|
|
label: \`\${targetOption.label} Dynamic 1\`,
|
||
|
|
value: 'dynamic1',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: \`\${targetOption.label} Dynamic 2\`,
|
||
|
|
value: 'dynamic2',
|
||
|
|
},
|
||
|
|
];
|
||
|
|
setOptions([...options]);
|
||
|
|
}, 1000);
|
||
|
|
};
|
||
|
|
return <Cascader options={options} loadData={loadData} onChange={onChange} changeOnSelect />;
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:`<p>\u4F7F\u7528 <code>loadData</code> \u5B9E\u73B0\u52A8\u6001\u52A0\u8F7D\u9009\u9879\u3002</p>
|
||
|
|
<blockquote>
|
||
|
|
<p>\u6CE8\u610F\uFF1A<code>loadData</code> \u4E0E <code>showSearch</code> \u65E0\u6CD5\u4E00\u8D77\u4F7F\u7528\u3002</p>
|
||
|
|
</blockquote>`}},{demo:{id:"components-cascader-demo-fields-name"},previewerProps:{title:"\u81EA\u5B9A\u4E49\u5B57\u6BB5\u540D",filename:"components/cascader/demo/fields-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 { Cascader } from 'antd';
|
||
|
|
const options = [
|
||
|
|
{
|
||
|
|
code: 'zhejiang',
|
||
|
|
name: 'Zhejiang',
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
code: 'hangzhou',
|
||
|
|
name: 'Hangzhou',
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
code: 'xihu',
|
||
|
|
name: 'West Lake',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
code: 'jiangsu',
|
||
|
|
name: 'Jiangsu',
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
code: 'nanjing',
|
||
|
|
name: 'Nanjing',
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
code: 'zhonghuamen',
|
||
|
|
name: 'Zhong Hua Men',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const onChange = (value) => {
|
||
|
|
console.log(value);
|
||
|
|
};
|
||
|
|
const App = () => (
|
||
|
|
<Cascader
|
||
|
|
fieldNames={{
|
||
|
|
label: 'name',
|
||
|
|
value: 'code',
|
||
|
|
children: 'items',
|
||
|
|
}}
|
||
|
|
options={options}
|
||
|
|
onChange={onChange}
|
||
|
|
placeholder="Please select"
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u81EA\u5B9A\u4E49\u5B57\u6BB5\u540D\u3002</p>"}},{demo:{id:"components-cascader-demo-suffix"},previewerProps:{debug:!0,title:"\u81EA\u5B9A\u4E49\u56FE\u6807",filename:"components/cascader/demo/suffix.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 { SmileOutlined } from '@ant-design/icons';
|
||
|
|
import { Cascader } from 'antd';
|
||
|
|
const options = [
|
||
|
|
{
|
||
|
|
value: 'zhejiang',
|
||
|
|
label: 'Zhejiang',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'hangzhou',
|
||
|
|
label: 'Hangzhou',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'xihu',
|
||
|
|
label: 'West Lake',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'jiangsu',
|
||
|
|
label: 'Jiangsu',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'nanjing',
|
||
|
|
label: 'Nanjing',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'zhonghuamen',
|
||
|
|
label: 'Zhong Hua Men',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const onChange = (value) => {
|
||
|
|
console.log(value);
|
||
|
|
};
|
||
|
|
const App = () => (
|
||
|
|
<>
|
||
|
|
<Cascader
|
||
|
|
suffixIcon={<SmileOutlined />}
|
||
|
|
options={options}
|
||
|
|
onChange={onChange}
|
||
|
|
placeholder="Please select"
|
||
|
|
/>
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<Cascader suffixIcon="ab" options={options} onChange={onChange} placeholder="Please select" />
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<Cascader
|
||
|
|
expandIcon={<SmileOutlined />}
|
||
|
|
options={options}
|
||
|
|
onChange={onChange}
|
||
|
|
placeholder="Please select"
|
||
|
|
/>
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<Cascader expandIcon="ab" options={options} onChange={onChange} placeholder="Please select" />
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u901A\u8FC7 <code>suffixIcon</code> \u81EA\u5B9A\u4E49\u9009\u62E9\u6846\u540E\u7F00\u56FE\u6807\uFF0C\u901A\u8FC7 <code>expandIcon</code> \u81EA\u5B9A\u4E49\u6B21\u7EA7\u83DC\u5355\u5C55\u5F00\u56FE\u6807\u3002</p>"}},{demo:{id:"components-cascader-demo-custom-dropdown"},previewerProps:{title:"\u6269\u5C55\u83DC\u5355",filename:"components/cascader/demo/custom-dropdown.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 { Cascader, Divider } from 'antd';
|
||
|
|
const options = [
|
||
|
|
{
|
||
|
|
value: 'zhejiang',
|
||
|
|
label: 'Zhejiang',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'hangzhou',
|
||
|
|
label: 'Hangzhou',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'xihu',
|
||
|
|
label: 'West Lake',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'jiangsu',
|
||
|
|
label: 'Jiangsu',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'nanjing',
|
||
|
|
label: 'Nanjing',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'zhonghuamen',
|
||
|
|
label: 'Zhong Hua Men',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const dropdownRender = (menus) => (
|
||
|
|
<div>
|
||
|
|
{menus}
|
||
|
|
<Divider
|
||
|
|
style={{
|
||
|
|
margin: 0,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
padding: 8,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
The footer is not very short.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
const App = () => (
|
||
|
|
<Cascader options={options} dropdownRender={dropdownRender} placeholder="Please select" />
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u4F7F\u7528 <code>dropdownRender</code> \u5BF9\u4E0B\u62C9\u83DC\u5355\u8FDB\u884C\u81EA\u7531\u6269\u5C55\u3002</p>"}},{demo:{id:"components-cascader-demo-placement"},previewerProps:{title:"\u5F39\u51FA\u4F4D\u7F6E",filename:"components/cascader/demo/placement.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 { Cascader, Radio } from 'antd';
|
||
|
|
const options = [
|
||
|
|
{
|
||
|
|
value: 'zhejiang',
|
||
|
|
label: 'Zhejiang',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'hangzhou',
|
||
|
|
label: 'Hangzhou',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'xihu',
|
||
|
|
label: 'West Lake',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'jiangsu',
|
||
|
|
label: 'Jiangsu',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'nanjing',
|
||
|
|
label: 'Nanjing',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'zhonghuamen',
|
||
|
|
label: 'Zhong Hua Men',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const App = () => {
|
||
|
|
const [placement, SetPlacement] = useState('topLeft');
|
||
|
|
const placementChange = (e) => {
|
||
|
|
SetPlacement(e.target.value);
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Radio.Group value={placement} onChange={placementChange}>
|
||
|
|
<Radio.Button value="topLeft">topLeft</Radio.Button>
|
||
|
|
<Radio.Button value="topRight">topRight</Radio.Button>
|
||
|
|
<Radio.Button value="bottomLeft">bottomLeft</Radio.Button>
|
||
|
|
<Radio.Button value="bottomRight">bottomRight</Radio.Button>
|
||
|
|
</Radio.Group>
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<Cascader options={options} placeholder="Please select" placement={placement} />
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u53EF\u4EE5\u901A\u8FC7 <code>placement</code> \u624B\u52A8\u6307\u5B9A\u5F39\u51FA\u7684\u4F4D\u7F6E\u3002</p>"}},{demo:{id:"components-cascader-demo-status"},previewerProps:{title:"\u81EA\u5B9A\u4E49\u72B6\u6001",filename:"components/cascader/demo/status.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 { Cascader, Space } from 'antd';
|
||
|
|
const App = () => (
|
||
|
|
<Space direction="vertical">
|
||
|
|
<Cascader status="error" placeholder="Error" />
|
||
|
|
<Cascader status="warning" multiple placeholder="Warning multiple" />
|
||
|
|
</Space>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u4F7F\u7528 <code>status</code> \u4E3A Cascader \u6DFB\u52A0\u72B6\u6001\uFF0C\u53EF\u9009 <code>error</code> \u6216\u8005 <code>warning</code>\u3002</p>"}},{demo:{id:"components-cascader-demo-render-panel"},previewerProps:{debug:!0,title:"_InternalPanelDoNotUseOrYouWillBeFired",filename:"components/cascader/demo/render-panel.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 { Cascader } from 'antd';
|
||
|
|
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalCascader } = Cascader;
|
||
|
|
const options = [
|
||
|
|
{
|
||
|
|
value: 'zhejiang',
|
||
|
|
label: 'Zhejiang',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'hangzhou',
|
||
|
|
label: 'Hangzhou',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'xihu',
|
||
|
|
label: 'West Lake',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'jiangsu',
|
||
|
|
label: 'Jiangsu',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'nanjing',
|
||
|
|
label: 'Nanjing',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'zhonghuamen',
|
||
|
|
label: 'Zhong Hua Men',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const App = () => <InternalCascader options={options} placeholder="Please select" />;
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u8C03\u8BD5\u7528\u7EC4\u4EF6\uFF0C\u8BF7\u52FF\u76F4\u63A5\u4F7F\u7528\u3002</p>"}}]}),(0,n.tZ)("div",{className:"markdown"},(0,n.tZ)("h2",{id:"api"},(0,n.tZ)(l.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#api",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"API"),(0,n.tZ)(o.Z,{lang:"jsx"},e[4].value),(0,n.tZ)(r.Z,{className:"component-api-table"},(0,n.tZ)("thead",null,(0,n.tZ)("tr",null,(0,n.tZ)("th",null,e[5].value),(0,n.tZ)("th",null,e[6].value),(0,n.tZ)("th",null,e[7].value),(0,n.tZ)("th",null,e[8].value),(0,n.tZ)("th",null,e[9].value))),(0,n.tZ)("tbody",null,(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[10].value),(0,n.tZ)("td",null,e[11].value),(0,n.tZ)("td",null,e[12].value),(0,n.tZ)("td",null,e[13].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[14].value),(0,n.tZ)("td",null,e[15].value),(0,n.tZ)("td",null,e[16].value),(0,n.tZ)("td",null,e[17].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[18].value),(0,n.tZ)("td",null,e[19].value),(0,n.tZ)("td",null,e[20].value),(0,n.tZ)("td",null,e[21].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[22].value),(0,n.tZ)("td",null,e[23].value),(0,n.tZ)("td",null,e[24].value),(0,n.tZ)("td",null,e[25].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[26].value),(0,n.tZ)("td",null,e[27].value),(0,n.tZ)("td",null,e[28].value),(0,n.tZ)("td",null,e[29].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[30].value),(0,n.tZ)("td",null,e[31].value),(0,n.tZ)("td",null,e[32].value),(0,n.tZ)("td",null,e[33].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[34].value),(0,n.tZ)("td",null,e[35].value),(0,n.tZ)("td",null,e[36].value),(0,n.tZ)("td",null,e[37].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[38].value),(0,n.tZ)("td",null,e[39].value),(0,n.tZ)("td",null,e[40].value),(0,n.tZ)("td",null,e[41].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[42].value),(0,n.tZ)("td",null,e[43].value),(0,n.tZ)("td",null,e[44].value),(0,n.tZ)("td",null,e[45].value,(0,n.tZ)("code",null,e[46].value),e[47].value),(0,n.tZ)("td",null,(0,n.tZ)("code",null,e[48].value),e[49].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[50].value),(0,n.tZ)("td",null,e[51].value),(0,n.tZ)("td",null,e[52].value),(0,n.tZ)("td",null,e[53].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[54].value),(0,n.tZ)("td",null,e[55].value),(0,n.tZ)("td",null,e[56].value),(0,n.tZ)("td",null,e[57].value),(0,n.tZ)("td",null,e[58].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[59].value),(0,n.tZ)("td",null,e[60].value),(0,n.tZ)("td",null,e[61].value),(0,n.tZ)("td",null,e[62].value),(0,n.tZ)("td",null,e[63].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[64].value),(0,n.tZ)("td",null,e[65].value),(0,n.tZ)("td",null,e[66].value),(0,n.tZ)("td",null,e[67].value),(0,n.tZ)("td",null,e[68].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[69].value),(0,n.tZ)("td",null,e[70].value),(0,n.tZ)("td",null,e[71].value),(0,n.tZ)("td",null,(0,n.tZ)("code",null,e[72].value)),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[73].value),(0,n.tZ)("td",null,e[74].value),(0,n.tZ)("td",null,e[75].value),(0,n.tZ)("td",null,e[76].value,(0,n.tZ)("code",null,e[77].value),e[78].value,(0,n.tZ)("code",null,e[79].value),e[80].value,(0,n.tZ)("code",null,e[81].value),e[82].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[83].value),(0,n.tZ)("td",null,e[84].value,(0,n.tZ)(l.Z,{href:"https://codepen.io/afc163/pen/zEjNOy?editors=0010",sourceType:"a"},e[85].value)),(0,n.tZ)("td",null,e[86].value),(0,n.tZ)("td",null,e[87].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[88].value),(0,n.tZ)("td",null,e[89].value,(0,n.tZ)("code",null,e[90].value),e[91].value),(0,n.tZ)("td",null,e[92].value),(0,n.tZ)("td",null,e[93].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[94].value),(0,n.tZ)("td",null,e[95].value),(0,n.tZ)("td",null,e[96].value,(0,n.tZ)("code",null,e[97].value)),(0,n.tZ)("td",null,e[98].value),(0,n.tZ)("td",null
|