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.
390 lines
30 KiB
390 lines
30 KiB
1 year ago
|
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[4781],{229052:function(_,r,t){t.r(r);var h=t(502143),g=t(968521),v=t(720719),b=t(28840),a=t(759907),o=t(828089),Z=t(825673),i=t(902068),f=t(574399),x=t(863942),y=t(316073),k=t(24628),E=t(719260),w=t(956140),s=t(127179),d=t(905388),P=t(40428),C=t(606965),D=t(268696),A=t(587302),l=t(424128),T=t(249706),O=t(795127),M=t(116846),I=t(212039),K=t(73024),L=t(553913),c=t(606641),u=t(667294),e=t(370917);function p(){var m=(0,c.eL)(),n=m.texts;return(0,e.tZ)(c.dY,null,(0,e.tZ)(u.Fragment,null,(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("p",null,n[0].value),(0,e.tZ)("h2",{id:"\u4F55\u65F6\u4F7F\u7528"},(0,e.tZ)(l.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u4F55\u65F6\u4F7F\u7528",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"\u4F55\u65F6\u4F7F\u7528"),(0,e.tZ)("ul",null,(0,e.tZ)("li",null,n[1].value),(0,e.tZ)("li",null,(0,e.tZ)("code",null,n[2].value),n[3].value)),(0,e.tZ)(a.Z,{lang:"tsx"},n[4].value),(0,e.tZ)("h2",{id:"\u4EE3\u7801\u6F14\u793A"},(0,e.tZ)(l.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u4EE3\u7801\u6F14\u793A",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"\u4EE3\u7801\u6F14\u793A")),(0,e.tZ)(d.Z,{items:[{demo:{id:"components-collapse-demo-basic"},previewerProps:{title:"\u6298\u53E0\u9762\u677F",filename:"components/collapse/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 { Collapse } from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
const text = \`
|
||
|
|
A dog is a type of domesticated animal.
|
||
|
|
Known for its loyalty and faithfulness,
|
||
|
|
it can be found as a welcome guest in many households across the world.
|
||
|
|
\`;
|
||
|
|
const items = [
|
||
|
|
{
|
||
|
|
key: '1',
|
||
|
|
label: 'This is panel header 1',
|
||
|
|
children: <p>{text}</p>,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '2',
|
||
|
|
label: 'This is panel header 2',
|
||
|
|
children: <p>{text}</p>,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '3',
|
||
|
|
label: 'This is panel header 3',
|
||
|
|
children: <p>{text}</p>,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const App = () => {
|
||
|
|
const onChange = (key) => {
|
||
|
|
console.log(key);
|
||
|
|
};
|
||
|
|
return <Collapse items={items} defaultActiveKey={['1']} onChange={onChange} />;
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u53EF\u4EE5\u540C\u65F6\u5C55\u5F00\u591A\u4E2A\u9762\u677F\uFF0C\u8FD9\u4E2A\u4F8B\u5B50\u9ED8\u8BA4\u5C55\u5F00\u4E86\u7B2C\u4E00\u4E2A\u3002</p>"}},{demo:{id:"components-collapse-demo-size"},previewerProps:{title:"\u9762\u677F\u5C3A\u5BF8",filename:"components/collapse/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 { Collapse, Divider } from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
const text = \`
|
||
|
|
A dog is a type of domesticated animal.
|
||
|
|
Known for its loyalty and faithfulness,
|
||
|
|
it can be found as a welcome guest in many households across the world.
|
||
|
|
\`;
|
||
|
|
const App = () => (
|
||
|
|
<>
|
||
|
|
<Divider orientation="left">Default Size</Divider>
|
||
|
|
<Collapse
|
||
|
|
items={[
|
||
|
|
{
|
||
|
|
key: '1',
|
||
|
|
label: 'This is default size panel header',
|
||
|
|
children: <p>{text}</p>,
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
<Divider orientation="left">Small Size</Divider>
|
||
|
|
<Collapse
|
||
|
|
size="small"
|
||
|
|
items={[
|
||
|
|
{
|
||
|
|
key: '1',
|
||
|
|
label: 'This is small size panel header',
|
||
|
|
children: <p>{text}</p>,
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
<Divider orientation="left">Large Size</Divider>
|
||
|
|
<Collapse
|
||
|
|
size="large"
|
||
|
|
items={[
|
||
|
|
{
|
||
|
|
key: '1',
|
||
|
|
label: 'This is large size panel header',
|
||
|
|
children: <p>{text}</p>,
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:`<p>\u6298\u53E0\u9762\u677F\u6709\u5927\u3001\u4E2D\u3001\u5C0F\u4E09\u79CD\u5C3A\u5BF8\u3002</p>
|
||
|
|
<p>\u901A\u8FC7\u8BBE\u7F6E <code>size</code> \u4E3A <code>large</code> <code>small</code> \u5206\u522B\u628A\u6298\u53E0\u9762\u677F\u8BBE\u4E3A\u5927\u3001\u5C0F\u5C3A\u5BF8\u3002\u82E5\u4E0D\u8BBE\u7F6E <code>size</code>\uFF0C\u5219\u5C3A\u5BF8\u4E3A\u4E2D\u3002</p>`}},{demo:{id:"components-collapse-demo-accordion"},previewerProps:{title:"\u624B\u98CE\u7434",filename:"components/collapse/demo/accordion.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 { Collapse } from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
const text = \`
|
||
|
|
A dog is a type of domesticated animal.
|
||
|
|
Known for its loyalty and faithfulness,
|
||
|
|
it can be found as a welcome guest in many households across the world.
|
||
|
|
\`;
|
||
|
|
const items = [
|
||
|
|
{
|
||
|
|
key: '1',
|
||
|
|
label: 'This is panel header 1',
|
||
|
|
children: <p>{text}</p>,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '2',
|
||
|
|
label: 'This is panel header 2',
|
||
|
|
children: <p>{text}</p>,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '3',
|
||
|
|
label: 'This is panel header 3',
|
||
|
|
children: <p>{text}</p>,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const App = () => <Collapse accordion items={items} />;
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u624B\u98CE\u7434\uFF0C\u6BCF\u6B21\u53EA\u6253\u5F00\u4E00\u4E2A tab\u3002</p>"}},{demo:{id:"components-collapse-demo-mix"},previewerProps:{title:"\u9762\u677F\u5D4C\u5957",filename:"components/collapse/demo/mix.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 { Collapse } from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
const text = \`
|
||
|
|
A dog is a type of domesticated animal.
|
||
|
|
Known for its loyalty and faithfulness,
|
||
|
|
it can be found as a welcome guest in many households across the world.
|
||
|
|
\`;
|
||
|
|
const itemsNest = [
|
||
|
|
{
|
||
|
|
key: '1',
|
||
|
|
label: 'This is panel nest panel',
|
||
|
|
children: <p>{text}</p>,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const items = [
|
||
|
|
{
|
||
|
|
key: '1',
|
||
|
|
label: 'This is panel header 1',
|
||
|
|
children: <Collapse defaultActiveKey="1" items={itemsNest} />,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '2',
|
||
|
|
label: 'This is panel header 2',
|
||
|
|
children: <p>{text}</p>,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '3',
|
||
|
|
label: 'This is panel header 3',
|
||
|
|
children: <p>{text}</p>,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const App = () => {
|
||
|
|
const onChange = (key) => {
|
||
|
|
console.log(key);
|
||
|
|
};
|
||
|
|
return <Collapse onChange={onChange} items={items} />;
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u5D4C\u5957\u6298\u53E0\u9762\u677F\u3002</p>"}},{demo:{id:"components-collapse-demo-borderless"},previewerProps:{title:"\u7B80\u6D01\u98CE\u683C",filename:"components/collapse/demo/borderless.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 { Collapse } from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
const text = (
|
||
|
|
<p
|
||
|
|
style={{
|
||
|
|
paddingLeft: 24,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found
|
||
|
|
as a welcome guest in many households across the world.
|
||
|
|
</p>
|
||
|
|
);
|
||
|
|
const items = [
|
||
|
|
{
|
||
|
|
key: '1',
|
||
|
|
label: 'This is panel header 1',
|
||
|
|
children: text,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '2',
|
||
|
|
label: 'This is panel header 2',
|
||
|
|
children: text,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '3',
|
||
|
|
label: 'This is panel header 3',
|
||
|
|
children: text,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const App = () => <Collapse items={items} bordered={false} defaultActiveKey={['1']} />;
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u4E00\u5957\u6CA1\u6709\u8FB9\u6846\u7684\u7B80\u6D01\u6837\u5F0F\u3002</p>"}},{demo:{id:"components-collapse-demo-custom"},previewerProps:{title:"\u81EA\u5B9A\u4E49\u9762\u677F",filename:"components/collapse/demo/custom.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 { CaretRightOutlined } from '@ant-design/icons';
|
||
|
|
import { Collapse, theme } from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
const text = \`
|
||
|
|
A dog is a type of domesticated animal.
|
||
|
|
Known for its loyalty and faithfulness,
|
||
|
|
it can be found as a welcome guest in many households across the world.
|
||
|
|
\`;
|
||
|
|
const getItems = (panelStyle) => [
|
||
|
|
{
|
||
|
|
key: '1',
|
||
|
|
label: 'This is panel header 1',
|
||
|
|
children: <p>{text}</p>,
|
||
|
|
style: panelStyle,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '2',
|
||
|
|
label: 'This is panel header 2',
|
||
|
|
children: <p>{text}</p>,
|
||
|
|
style: panelStyle,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '3',
|
||
|
|
label: 'This is panel header 3',
|
||
|
|
children: <p>{text}</p>,
|
||
|
|
style: panelStyle,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const App = () => {
|
||
|
|
const { token } = theme.useToken();
|
||
|
|
const panelStyle = {
|
||
|
|
marginBottom: 24,
|
||
|
|
background: token.colorFillAlter,
|
||
|
|
borderRadius: token.borderRadiusLG,
|
||
|
|
border: 'none',
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<Collapse
|
||
|
|
bordered={false}
|
||
|
|
defaultActiveKey={['1']}
|
||
|
|
expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
|
||
|
|
style={{
|
||
|
|
background: token.colorBgContainer,
|
||
|
|
}}
|
||
|
|
items={getItems(panelStyle)}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u81EA\u5B9A\u4E49\u5404\u4E2A\u9762\u677F\u7684\u80CC\u666F\u8272\u3001\u5706\u89D2\u3001\u8FB9\u8DDD\u548C\u56FE\u6807\u3002</p>"}},{demo:{id:"components-collapse-demo-noarrow"},previewerProps:{title:"\u9690\u85CF\u7BAD\u5934",filename:"components/collapse/demo/noarrow.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 { Collapse } from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
const text = \`
|
||
|
|
A dog is a type of domesticated animal.
|
||
|
|
Known for its loyalty and faithfulness,
|
||
|
|
it can be found as a welcome guest in many households across the world.
|
||
|
|
\`;
|
||
|
|
const items = [
|
||
|
|
{
|
||
|
|
key: '1',
|
||
|
|
label: 'This is panel header with arrow icon',
|
||
|
|
children: <p>{text}</p>,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '2',
|
||
|
|
label: 'This is panel header with no arrow icon',
|
||
|
|
children: <p>{text}</p>,
|
||
|
|
showArrow: false,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const App = () => {
|
||
|
|
const onChange = (key) => {
|
||
|
|
console.log(key);
|
||
|
|
};
|
||
|
|
return <Collapse defaultActiveKey={['1']} onChange={onChange} items={items} />;
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u4F60\u53EF\u4EE5\u901A\u8FC7 <code>showArrow={false}</code> \u9690\u85CF <code>CollapsePanel</code> \u7EC4\u4EF6\u7684\u7BAD\u5934\u56FE\u6807\u3002</p>"}},{demo:{id:"components-collapse-demo-extra"},previewerProps:{title:"\u989D\u5916\u8282\u70B9",filename:"components/collapse/demo/extra.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 { SettingOutlined } from '@ant-design/icons';
|
||
|
|
import { Collapse, Select } from 'antd';
|
||
|
|
import React, { useState } from 'react';
|
||
|
|
const { Option } = Select;
|
||
|
|
const text = \`
|
||
|
|
A dog is a type of domesticated animal.
|
||
|
|
Known for its loyalty and faithfulness,
|
||
|
|
it can be found as a welcome guest in many households across the world.
|
||
|
|
\`;
|
||
|
|
const App = () => {
|
||
|
|
const [expandIconPosition, setExpandIconPosition] = useState('start');
|
||
|
|
const onPositionChange = (newExpandIconPosition) => {
|
||
|
|
setExpandIconPosition(newExpandIconPosition);
|
||
|
|
};
|
||
|
|
const onChange = (key) => {
|
||
|
|
console.log(key);
|
||
|
|
};
|
||
|
|
const genExtra = () => (
|
||
|
|
<SettingOutlined
|
||
|
|
onClick={(event) => {
|
||
|
|
// If you don't want click extra trigger collapse, you can prevent this:
|
||
|
|
event.stopPropagation();
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
const items = [
|
||
|
|
{
|
||
|
|
key: '1',
|
||
|
|
label: 'This is panel header 1',
|
||
|
|
children: <div>{text}</div>,
|
||
|
|
extra: genExtra(),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '2',
|
||
|
|
label: 'This is panel header 2',
|
||
|
|
children: <div>{text}</div>,
|
||
|
|
extra: genExtra(),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '3',
|
||
|
|
label: 'This is panel header 3',
|
||
|
|
children: <div>{text}</div>,
|
||
|
|
extra: genExtra(),
|
||
|
|
},
|
||
|
|
];
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Collapse
|
||
|
|
defaultActiveKey={['1']}
|
||
|
|
onChange={onChange}
|
||
|
|
expandIconPosition={expandIconPosition}
|
||
|
|
items={items}
|
||
|
|
/>
|
||
|
|
<br />
|
||
|
|
<span>Expand Icon Position: </span>
|
||
|
|
<Select
|
||
|
|
value={expandIconPosition}
|
||
|
|
style={{
|
||
|
|
margin: '0 8px',
|
||
|
|
}}
|
||
|
|
onChange={onPositionChange}
|
||
|
|
>
|
||
|
|
<Option value="start">start</Option>
|
||
|
|
<Option value="end">end</Option>
|
||
|
|
</Select>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u81EA\u5B9A\u4E49\u6E32\u67D3\u6BCF\u4E2A\u9762\u677F\u53F3\u4E0A\u89D2\u7684\u5185\u5BB9\u3002</p>"}},{demo:{id:"components-collapse-demo-ghost"},previewerProps:{title:"\u5E7D\u7075\u6298\u53E0\u9762\u677F",filename:"components/collapse/demo/ghost.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 { Collapse } from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
const text = \`
|
||
|
|
A dog is a type of domesticated animal.
|
||
|
|
Known for its loyalty and faithfulness,
|
||
|
|
it can be found as a welcome guest in many households across the world.
|
||
|
|
\`;
|
||
|
|
const items = [
|
||
|
|
{
|
||
|
|
key: '1',
|
||
|
|
label: 'This is panel header 1',
|
||
|
|
children: <p>{text}</p>,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '2',
|
||
|
|
label: 'This is panel header 2',
|
||
|
|
children: <p>{text}</p>,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '3',
|
||
|
|
label: 'This is panel header 3',
|
||
|
|
children: <p>{text}</p>,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const App = () => <Collapse defaultActiveKey={['1']} ghost items={items} />;
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u5C06\u6298\u53E0\u9762\u677F\u7684\u80CC\u666F\u53D8\u6210\u900F\u660E\u3002</p>"}},{demo:{id:"components-collapse-demo-collapsible"},previewerProps:{title:"\u53EF\u6298\u53E0\u89E6\u53D1\u533A\u57DF",filename:"components/collapse/demo/collapsible.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 { Collapse, Space } from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
const text = \`
|
||
|
|
A dog is a type of domesticated animal.
|
||
|
|
Known for its loyalty and faithfulness,
|
||
|
|
it can be found as a welcome guest in many households across the world.
|
||
|
|
\`;
|
||
|
|
const App = () => (
|
||
|
|
<Space direction="vertical">
|
||
|
|
<Collapse
|
||
|
|
collapsible="header"
|
||
|
|
defaultActiveKey={['1']}
|
||
|
|
items={[
|
||
|
|
{
|
||
|
|
key: '1',
|
||
|
|
label: 'This panel can only be collapsed by clicking text',
|
||
|
|
children: <p>{text}</p>,
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
<Collapse
|
||
|
|
collapsible="icon"
|
||
|
|
defaultActiveKey={['1']}
|
||
|
|
items={[
|
||
|
|
{
|
||
|
|
key: '1',
|
||
|
|
label: 'This panel can only be collapsed by clicking icon',
|
||
|
|
children: <p>{text}</p>,
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
<Collapse
|
||
|
|
collapsible="disabled"
|
||
|
|
items={[
|
||
|
|
{
|
||
|
|
key: '1',
|
||
|
|
label: "This panel can't be collapsed",
|
||
|
|
children: <p>{text}</p>,
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
</Space>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u901A\u8FC7 <code>collapsible</code> \u5C5E\u6027\uFF0C\u53EF\u4EE5\u8BBE\u7F6E\u9762\u677F\u7684\u53EF\u6298\u53E0\u89E6\u53D1\u533A\u57DF\u3002</p>",style:`#components-collapse-demo-collapsible .ant-space {
|
||
|
|
width: 100%;
|
||
|
|
}`}}]}),(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("h2",{id:"api"},(0,e.tZ)(l.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#api",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"API"),(0,e.tZ)("h3",{id:"collapse"},(0,e.tZ)(l.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#collapse",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Collapse"),(0,e.tZ)(o.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(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)("th",null,n[8].value),(0,e.tZ)("th",null,n[9].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[10].value),(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)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[14].value),(0,e.tZ)("td",null,n[15].value),(0,e.tZ)("td",null,n[16].value,(0,e.tZ)("br",null),n[17].value),(0,e.tZ)("td",null,n[18].value),(0,e.tZ)("td",null)),(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)("td",null)),(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,(0,e.tZ)("code",null,n[25].value),n[26].value,(0,e.tZ)("code",null,n[27].value),n[28].value,(0,e.tZ)("code",null,n[29].value)),(0,e.tZ)("td",null,n[30].value),(0,e.tZ)("td",null,n[31].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[32].value),(0,e.tZ)("td",null,n[33].value),(0,e.tZ)("td",null,n[34].value,(0,e.tZ)("br",null),n[35].value),(0,e.tZ)("td",null,n[36].value),(0,e.tZ)("td",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)("td",null,(0,e.tZ)("code",null,n[47].value),n[48].value,(0,e.tZ)("code",null,n[49].value)),(0,e.tZ)("td",null,n[50].value),(0,e.tZ)("td",null,n[51].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[52].value),(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)("tr",null,(0,e.tZ)("td",null,n[57].value),(0,e.tZ)("td",null,n[58].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[59].value),n[60].value,(0,e.tZ)("code",null,n[61].value),n[62].value,(0,e.tZ)("code",null,n[63].value)),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[64].value)),(0,e.tZ)("td",null,n[65].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[66].value),(0,e.tZ)("td",null,n[67].value),(0,e.tZ)("td",null,n[68].value),(0,e.tZ)("td",null,n[69].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[70].value),(0,e.tZ)("td",null,n[71].value),(0,e.tZ)("td",null,(0,e.tZ)(l.Z,{href:"https://github.com/react-component/collapse/blob/27250ca5415faab16db412b9bff2c131bb4f32fc/src/interface.ts#L6",sourceType:"a"},n[72].value)),(0,e.tZ)("td",null,n[73].value),(0,e.tZ)("td",null,n[74].value)))),(0,e.tZ)("h3",{id:"collapsepanel"},(0,e.tZ)(l.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#collapsepanel",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Collapse.Panel")),(0,e.tZ)(i.Z,{message:">= 5.6.0 \u8BF7\u4F7F\u7528 items \u65B9\u5F0F\u914D\u7F6E\u9762\u677F."}),(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)(o.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,n[75].value),(0,e.tZ)("th",null,n[76].value),(0,e.tZ)("th",null,n[77].value),(0,e.tZ)("th",null,n[78].value),(0,e.tZ)("th",null,n[79].value))),(0,e.tZ)("tbody",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,(0,e.tZ)("code",null,n[82].value),n[83].value,(0,e.tZ)("code",null,n[84].value),n[85].value,(0,e.tZ)("code",null,n[86].value)),(0,e.tZ)("td",null,n[8
|