mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 15:19:58 +08:00
61 lines
1.4 KiB
TypeScript
61 lines
1.4 KiB
TypeScript
|
import React, { useMemo, useState } from 'react';
|
||
|
import { Button, Checkbox, Divider, Tabs } from 'antd';
|
||
|
|
||
|
const CheckboxGroup = Checkbox.Group;
|
||
|
|
||
|
const operations = <Button>Extra Action</Button>;
|
||
|
|
||
|
const OperationsSlot: Record<PositionType, React.ReactNode> = {
|
||
|
left: <Button className="tabs-extra-demo-button">Left Extra Action</Button>,
|
||
|
right: <Button>Right Extra Action</Button>,
|
||
|
};
|
||
|
|
||
|
const options = ['left', 'right'];
|
||
|
|
||
|
type PositionType = 'left' | 'right';
|
||
|
|
||
|
const items = new Array(3).fill(null).map((_, i) => {
|
||
|
const id = String(i + 1);
|
||
|
return {
|
||
|
label: `Tab ${id}`,
|
||
|
key: id,
|
||
|
children: `Content of tab ${id}`,
|
||
|
};
|
||
|
});
|
||
|
|
||
|
const App: React.FC = () => {
|
||
|
const [position, setPosition] = useState<PositionType[]>(['left', 'right']);
|
||
|
|
||
|
const slot = useMemo(() => {
|
||
|
if (position.length === 0) return null;
|
||
|
|
||
|
return position.reduce(
|
||
|
(acc, direction) => ({ ...acc, [direction]: OperationsSlot[direction] }),
|
||
|
{},
|
||
|
);
|
||
|
}, [position]);
|
||
|
|
||
|
return (
|
||
|
<>
|
||
|
<Tabs tabBarExtraContent={operations} items={items} />
|
||
|
<br />
|
||
|
<br />
|
||
|
<br />
|
||
|
<div>You can also specify its direction or both side</div>
|
||
|
<Divider />
|
||
|
<CheckboxGroup
|
||
|
options={options}
|
||
|
value={position}
|
||
|
onChange={value => {
|
||
|
setPosition(value as PositionType[]);
|
||
|
}}
|
||
|
/>
|
||
|
<br />
|
||
|
<br />
|
||
|
<Tabs tabBarExtraContent={slot} items={items} />
|
||
|
</>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default App;
|