antd Tabs组件自定义头部

Ant Design (antd) 的 Tabs 组件是一个用于切换内容区域的常见工具，它允许你在多个选项卡之间切换显示的内容。如果你想自定义头部，也就是标签页的部分，你可以通过以下步骤操作：

1. 使用 `tabs` 属性创建 `Tabs` 组件，并提供 `tabBar` 子元素来配置标签样式和功能。

import { Tabs, Tab } from 'antd';

const { TabPane } = Tabs;

const customTabBar = (
  <div className="custom-tab-bar">
    {/* 这里可以添加自定义的标题、图标或者其他HTML结构 */}
    <Tab tab="Option 1" key="1"><Icon type="setting" /> Option 1</Tab>
    <Tab tab="Option 2" key="2"><Icon type="desktop" /> Option 2</Tab>
    {/* 添加更多的 Tab 元素 */}
  </div>
);

function App() {
  return (
    <Tabs defaultActiveKey="1" tabBar={customTabBar}>
      <TabPane tab="Option 1" key="1">这是第一个选项卡的内容</TabPane>
      <TabPane tab="Option 2" key="2">这是第二个选项卡的内容</TabPane>
      {/* 根据需要添加更多 TabPane 元素 */}
    </Tabs>
  );
}

export default App;

在这个例子中，`.custom-tab-bar` 类名可以根据需要设置样式，`<Tab>` 元素代表每个标签，`key` 属性用于唯一标识每个标签。