mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
502dac12aa
* docs: fix code * feat: lint * feat: prettier * feat: test * feat: review * feat: format html * feat: format html
76 lines
1.8 KiB
TypeScript
76 lines
1.8 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { SettingOutlined } from '@ant-design/icons';
|
|
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<ExpandIconPosition>('start');
|
|
|
|
const onPositionChange = (newExpandIconPosition: ExpandIconPosition) => {
|
|
setExpandIconPosition(newExpandIconPosition);
|
|
};
|
|
|
|
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}
|
|
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;
|