ant-design/components/tabs/demo/custom-tab-bar.tsx

29 lines
828 B
TypeScript

import React from 'react';
import type { TabsProps } from 'antd';
import { Tabs, theme } from 'antd';
import StickyBox from 'react-sticky-box';
const items = new Array(3).fill(null).map((_, i) => {
const id = String(i + 1);
return {
label: `Tab ${id}`,
key: id,
children: `Content of Tab Pane ${id}`,
style: i === 0 ? { height: 200 } : undefined,
};
});
const App: React.FC = () => {
const {
token: { colorBgContainer },
} = theme.useToken();
const renderTabBar: TabsProps['renderTabBar'] = (props, DefaultTabBar) => (
<StickyBox offsetTop={64} offsetBottom={20} style={{ zIndex: 1 }}>
<DefaultTabBar {...props} style={{ background: colorBgContainer }} />
</StickyBox>
);
return <Tabs defaultActiveKey="1" renderTabBar={renderTabBar} items={items} />;
};
export default App;