antd-components-mcp

## Collapse 组件示例 ### 折叠面板 可以同时展开多个面板，这个例子默认展开了第一个。 ```tsx import React from 'react'; import type { CollapseProps } from 'antd'; import { Collapse } from 'antd'; 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: CollapseProps['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: React.FC = () => { const onChange = (key: string | string[]) => { console.log(key); }; return <Collapse items={items} defaultActiveKey={['1']} onChange={onChange} />; }; export default App; ``` ### 面板尺寸 折叠面板有大、中、小三种尺寸。 通过设置 `size` 为 `large` `small` 分别把折叠面板设为大、小尺寸。若不设置 `size`，则尺寸默认为中。 ```tsx import React from 'react'; import { Collapse, Divider } from 'antd'; 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 = () => ( <> <Divider titlePlacement="start">Default Size</Divider> <Collapse items={[{ key: '1', label: 'This is default size panel header', children: <p>{text}</p> }]} /> <Divider titlePlacement="start">Small Size</Divider> <Collapse size="small" items={[{ key: '1', label: 'This is small size panel header', children: <p>{text}</p> }]} /> <Divider titlePlacement="start">Large Size</Divider> <Collapse size="large" items={[{ key: '1', label: 'This is large size panel header', children: <p>{text}</p> }]} /> </> ); export default App; ``` ### 手风琴 手风琴模式，始终只有一个面板处在激活状态。 ```tsx import React from 'react'; import type { CollapseProps } from 'antd'; import { Collapse } from 'antd'; 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: CollapseProps['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: React.FC = () => <Collapse accordion items={items} />; export default App; ``` ### 面板嵌套 嵌套折叠面板。 ```tsx import React from 'react'; import type { CollapseProps } from 'antd'; import { Collapse } from 'antd'; 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: CollapseProps['items'] = [ { key: '1', label: 'This is panel nest panel', children: <p>{text}</p>, }, ]; const items: CollapseProps['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: React.FC = () => { const onChange = (key: string | string[]) => { console.log(key); }; return <Collapse onChange={onChange} items={items} />; }; export default App; ``` ### 简洁风格 一套没有边框的简洁样式。 ```tsx import React from 'react'; import type { CollapseProps } from 'antd'; import { Collapse } from 'antd'; const text = ( <p style={{ paddingInlineStart: 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: CollapseProps['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: React.FC = () => <Collapse items={items} bordered={false} defaultActiveKey={['1']} />; export default App; ``` ### 自定义面板 自定义各个面板的背景色、圆角、边距和图标。 ```tsx import type { CSSProperties } from 'react'; import React from 'react'; import { CaretRightOutlined } from '@ant-design/icons'; import type { CollapseProps } from 'antd'; import { Collapse, theme } from 'antd'; 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: CSSProperties) => CollapseProps['items'] = (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: React.FC = () => { const { token } = theme.useToken(); const panelStyle: React.CSSProperties = { 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; ``` ### 隐藏箭头 你可以通过 `showArrow={false}` 隐藏 `CollapsePanel` 组件的箭头图标。 ```tsx import React from 'react'; import type { CollapseProps } from 'antd'; import { Collapse } from 'antd'; 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: CollapseProps['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: React.FC = () => { const onChange = (key: string | string[]) => { console.log(key); }; return <Collapse defaultActiveKey={['1']} onChange={onChange} items={items} />; }; export default App; ``` ### 额外节点 自定义渲染每个面板右上角的内容。 ```tsx import React, { useState } from 'react'; import { SettingOutlined } from '@ant-design/icons'; import type { CollapseProps } from 'antd'; import { Collapse, Select } from 'antd'; 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 = () => { const [expandIconPlacement, setExpandIconPlacement] = useState<CollapseProps['expandIconPlacement']>('start'); const onPlacementChange = (newExpandIconPlacement: CollapseProps['expandIconPlacement']) => { setExpandIconPlacement(newExpandIconPlacement); }; const onChange = (key: string | string[]) => { 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: CollapseProps['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} expandIconPlacement={expandIconPlacement} items={items} /> <br /> <span>Expand Icon Placement: </span> <Select value={expandIconPlacement} style={{ margin: '0 8px' }} onChange={onPlacementChange} options={[ { label: 'start', value: 'start' }, { label: 'end', value: 'end' }, ]} /> </> ); }; export default App; ``` ### 幽灵折叠面板 将折叠面板的背景变成透明。 ```tsx import React from 'react'; import type { CollapseProps } from 'antd'; import { Collapse } from 'antd'; 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: CollapseProps['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: React.FC = () => <Collapse defaultActiveKey={['1']} ghost items={items} />; export default App; ``` ### 可折叠触发区域 通过 `collapsible` 属性，可以设置面板的可折叠触发区域。 ```tsx import React from 'react'; import { Collapse, Space } from 'antd'; 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 vertical> <Collapse collapsible="header" defaultActiveKey={['1']} items={[ { key: '1', label: 'This panel can be collapsed by clicking text or icon', 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; ``` ### 自定义语义结构的样式和类 通过 `classNames` 和 `styles` 传入对象/函数可以自定义 Collapse 的[语义化结构](#semantic-dom)样式。 ```tsx import React from 'react'; import { Collapse, Flex } from 'antd'; import { createStyles } from 'antd-style'; import type { CollapseProps } from '..'; const useStyles = createStyles(() => ({ root: { backgroundColor: '#fafafa', border: '1px solid #e0e0e0', borderRadius: 8, }, })); const element = ( <p> 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: CollapseProps['items'] = [ { key: '1', label: 'This is panel header 1', children: element, }, { key: '2', label: 'This is panel header 2', children: element, }, { key: '3', label: 'This is panel header 3', children: element, }, ]; const styles: CollapseProps['styles'] = { root: { backgroundColor: '#fafafa', border: '1px solid #e0e0e0', borderRadius: 8, }, header: { backgroundColor: '#f0f0f0', padding: '12px 16px', color: '#141414', }, }; const stylesFn: CollapseProps['styles'] = ({ props }) => { if (props.size === 'large') { return { root: { backgroundColor: '#fff', border: '1px solid #696FC7', borderRadius: 8, }, header: { backgroundColor: '#F5EFFF', padding: '12px 16px', color: '#141414', }, } satisfies CollapseProps['styles']; } }; const App: React.FC = () => { const { styles: classNames } = useStyles(); const sharedProps: CollapseProps = { classNames, items }; return ( <Flex vertical gap="middle"> <Collapse {...sharedProps} defaultActiveKey={['1']} styles={styles} /> <Collapse {...sharedProps} defaultActiveKey={['2']} styles={stylesFn} size="large" /> </Flex> ); }; export default App; ``` ### 组件 Token Component Token Debug. ```tsx import React from 'react'; import { Collapse, ConfigProvider } from 'antd'; /** Test usage. Do not use in your production. */ import type { CollapseProps } from 'antd'; const text = `Ant Design! `.repeat(26); const items: CollapseProps['items'] = [ { key: '1', label: `This is panel header 1, (${text})`, children: text }, { key: '2', label: `This is panel header 2, (${text})`, children: text }, { key: '3', label: `This is panel header 3, (${text})`, children: text }, ]; export default () => ( <ConfigProvider theme={{ components: { Collapse: { headerPadding: '0px 10px 20px 30px', headerBg: '#eaeeff', contentPadding: '0px 10px 20px 30px', contentBg: '#e6f7ff', }, }, }} > <Collapse items={items} /> </ConfigProvider> ); ```