ant-design/components/collapse/demo/collapsible.tsx
kiner-tang(文辉) 94732dfb01
feat(Collapse): Collapse support configure panel content by items (#42545)
* docs: update the document about Collapse

* docs: update the document about Collapse

* feat: optimize code

* Update components/collapse/index.zh-CN.md

Co-authored-by: MadCcc <1075746765@qq.com>

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* docs: update the document about Collapse

---------

Co-authored-by: MadCcc <1075746765@qq.com>
2023-05-25 10:19:56 +08:00

48 lines
1.0 KiB
TypeScript

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: React.FC = () => (
<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;