diff --git a/examples/overflow.tsx b/examples/overflow.tsx index 815a9ad7..6b3e8ac5 100644 --- a/examples/overflow.tsx +++ b/examples/overflow.tsx @@ -13,6 +13,13 @@ for (let i = 0; i < 50; i += 1) { ); } +// add a tab to demo the menuTab feature +tabs.push( + Fancy Tab )}> + Show different tab in the dropdown menu with the menuTab property. + , +); + export default () => { const [gutter, setGutter] = React.useState(true); const [destroy, setDestroy] = React.useState(false); diff --git a/src/TabNavList/OperationNode.tsx b/src/TabNavList/OperationNode.tsx index 857ad944..533a5602 100644 --- a/src/TabNavList/OperationNode.tsx +++ b/src/TabNavList/OperationNode.tsx @@ -73,7 +73,7 @@ function OperationNode( aria-controls={id && `${id}-panel-${tab.key}`} disabled={tab.disabled} > - {tab.tab} + {tab.menuTab || tab.tab} ))} diff --git a/src/TabPanelList/TabPane.tsx b/src/TabPanelList/TabPane.tsx index c21996ab..6f927147 100644 --- a/src/TabPanelList/TabPane.tsx +++ b/src/TabPanelList/TabPane.tsx @@ -3,6 +3,7 @@ import classNames from 'classnames'; export interface TabPaneProps { tab?: React.ReactNode; + menuTab?: React.ReactNode; className?: string; style?: React.CSSProperties; disabled?: boolean;