import { SettingOutlined } from '@ant-design/icons'; import React, { useState } from 'react'; import type { CollapseProps } from 'antd'; import { Collapse, Select } from 'antd'; 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. `; type ExpandIconPosition = 'start' | 'end'; const App: React.FC = () => { const [expandIconPosition, setExpandIconPosition] = useState('start'); const onPositionChange = (newExpandIconPosition: ExpandIconPosition) => { setExpandIconPosition(newExpandIconPosition); }; const onChange = (key: string | string[]) => { console.log(key); }; const genExtra = () => ( { // 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:
{text}
, extra: genExtra(), }, { key: '2', label: 'This is panel header 2', children:
{text}
, extra: genExtra(), }, { key: '3', label: 'This is panel header 3', children:
{text}
, extra: genExtra(), }, ]; return ( <>
Expand Icon Position: ); }; export default App;