--- order: 4 title: zh-CN: 附加内容 en-US: Extra content --- ## zh-CN 可以在页签两边添加附加操作。 ## en-US You can add extra actions to the right or left or even both side of Tabs. ```tsx import React, { useMemo, useState } from 'react'; import { Tabs, Button, Divider, Checkbox } from 'antd'; const { TabPane } = Tabs; const CheckboxGroup = Checkbox.Group; const operations = ; const OperationsSlot: Record = { left: , right: , }; const options = ['left', 'right']; type PositionType = 'left' | 'right'; const App: React.FC = () => { const [position, setPosition] = useState(['left', 'right']); const slot = useMemo(() => { if (position.length === 0) return null; return position.reduce( (acc, direction) => ({ ...acc, [direction]: OperationsSlot[direction] }), {}, ); }, [position]); return ( <> Content of tab 1 Content of tab 2 Content of tab 3


You can also specify its direction or both side
{ setPosition(value as PositionType[]); }} />

Content of tab 1 Content of tab 2 Content of tab 3 ); }; export default App; ``` ```css .tabs-extra-demo-button { margin-right: 16px; } .ant-row-rtl .tabs-extra-demo-button { margin-right: 0; margin-left: 16px; } ```