ant-design/components/collapse/demo/extra.tsx
叶枫 502dac12aa
docs: format code (#48309)
* docs: fix code

* feat: lint

* feat: prettier

* feat: test

* feat: review

* feat: format html

* feat: format html
2024-04-08 14:04:08 +08:00

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;