antd react Tabs组件自定义头部
时间: 2024-09-18 20:03:37 浏览: 12
Ant Design的React Tab组件允许你通过`TabPane`的`tab`属性来自定义每个选项卡的头部。如果你想完全控制头部样式并添加自定义内容,可以创建一个单独的元素,并在`extra`属性中引用它。例如:
```jsx
import { Tab, TabPane } from 'antd';
import React from 'react';
const CustomHeader = ({ activeKey }) => (
<div style={{ background: '#fff', padding: '16px' }}>
这是一个自定义头部,当activeKey匹配时显示。
{/* 可以添加状态管理和交互逻辑 */}
{activeKey === 'your-active-key' && <p>这是只有当前激活的标签才会显示的内容。</p>}
</div>
);
function App() {
return (
<div className="app-container">
<Tab activeKey={['1']} defaultActiveKey={['1']}>
<TabPane tab="Tab 1" key="1" extra={<CustomHeader activeKey={['1']} />} />
<TabPane tab="Tab 2" key="2" extra={<CustomHeader activeKey={['2']} />} />
{/* 更多选项卡... */}
</Tab>
</div>
);
}
export default App;
```
在这个例子中,`CustomHeader`组件接收`activeKey`作为props,可以根据这个值来动态展示内容。你可以根据需要调整样式和内部结构。