diff --git a/src/components/SubTabContainer/index.tsx b/src/components/SubTabContainer/index.tsx index 76a38d60..d21b49ad 100644 --- a/src/components/SubTabContainer/index.tsx +++ b/src/components/SubTabContainer/index.tsx @@ -28,6 +28,7 @@ import { Icon, HStack, Text, + Spacer, } from '@chakra-ui/react'; import type { ComponentType } from 'react'; import type { IconType } from 'react-icons'; @@ -95,6 +96,8 @@ export interface SubTabContainerProps { contentPadding?: number; /** 是否懒加载 */ isLazy?: boolean; + /** TabList 右侧自定义内容 */ + rightElement?: React.ReactNode; } const SubTabContainer: React.FC = memo(({ @@ -107,6 +110,7 @@ const SubTabContainer: React.FC = memo(({ theme: customTheme, contentPadding = 4, isLazy = true, + rightElement, }) => { // 内部状态(非受控模式) const [internalIndex, setInternalIndex] = useState(defaultIndex); @@ -148,19 +152,27 @@ const SubTabContainer: React.FC = memo(({ borderBottom="1px solid" borderColor={theme.borderColor} pl={0} - pr={4} - py={2} - flexWrap="wrap" - gap={2} + pr={2} + py={1.5} + flexWrap="nowrap" + gap={1} + alignItems="center" + overflowX="auto" + css={{ + '&::-webkit-scrollbar': { display: 'none' }, + scrollbarWidth: 'none', + }} > {tabs.map((tab) => ( = memo(({ bg: theme.tabHoverBg, }} > - - {tab.icon && } + + {tab.icon && } {tab.name} ))} + {rightElement && ( + <> + + {rightElement} + + )}