Tabs are used to display multiple sections of content within the same space on a webpage. They allow users to quickly switch between different sections of content without having to navigate away from the current page.
TabsNav
import { TabsNav } from '@lobehub/ui';Default
APIs
| Name | Description | Type | Default |
|---|---|---|---|
| variant | -- | "default"|"compact" | -- |
| rootClassName | -- | string | -- |
| type | -- | "line"|"card"|"editable-card" | -- |
| size | -- | "small"|"middle"|"large" | -- |
| hideAdd | -- | boolean | -- |
| centered | -- | boolean | -- |
| addIcon | -- | ReactNode | -- |
| moreIcon | -- | ReactNode | -- |
| more | -- | {icon?:ReactNode;autoFocus?:boolean;align?:object;visible?:boolean;prefixCls?:string;animation?:string;placement?:"top"|"bottom"|"topLeft"|"topRight"|"bottomLeft"|"bottomRight";arrow?:boolean;overlayClassName?:string;overlayStyle?:object;builtinPlacements?:object;getPopupContainer?:(node:HTMLElement)=>HTMLElement;trigger?:ActionType|Array<ActionType>;transitionName?:string;mouseEnterDelay?:number;mouseLeaveDelay?:number;openClassName?:string;overlay?:()=>{type:any;props:any;key:string|}|ReactElement;onVisibleChange?:(visible:boolean)=>void;onPopupAlign?:(element:HTMLElement,align:import("/node_modules/@rc-component/trigger/lib/interface").AlignType)=>void;showAction?:ActionType[];autoDestroy?:boolean;minOverlayWidthMatchTrigger?:boolean;onOverlayClick?:(e:Event)=>void;placements?:object;alignPoint?:boolean;hideAction?:ActionType[]} | -- |
| removeIcon | -- | ReactNode | -- |
| onEdit | -- | (e:string | React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>,action:"add" | "remove")=>void | -- |
| children | -- | ReactNode | -- |
| indicatorSize | -- | number|(origin:number)=>number | -- |
| style | -- | {} | -- |
| className | -- | string | -- |
| dangerouslySetInnerHTML | -- | {__html:string|TrustedHTML} | -- |
| onCopy | -- | (event:E)=>void | -- |
| onCopyCapture | -- | (event:E)=>void | -- |
| onCut | -- | (event:E)=>void | -- |
| onCutCapture | -- | (event:E)=>void | -- |
| onPaste | -- | (event:E)=>void | -- |
| onPasteCapture | -- | (event:E)=>void | -- |
| onCompositionEnd | -- | (event:E)=>void | -- |
| onCompositionEndCapture | -- | (event:E)=>void | -- |
| onCompositionStart | -- | (event:E)=>void | -- |
| onCompositionStartCapture | -- | (event:E)=>void | -- |
| onCompositionUpdate | -- | (event:E)=>void | -- |
| onCompositionUpdateCapture | -- | (event:E)=>void | -- |
| onFocus | -- | (event:E)=>void | -- |
| onFocusCapture | -- | (event:E)=>void | -- |
| onBlur | -- | (event:E)=>void | -- |
| onBlurCapture | -- | (event:E)=>void | -- |
| onChange | -- | (activeKey:string)=>void | -- |
| onChangeCapture | -- | (event:E)=>void | -- |
| onBeforeInput | -- | (event:E)=>void | -- |
| onBeforeInputCapture | -- | (event:E)=>void | -- |
| onInput | -- | (event:E)=>void | -- |
| onInputCapture | -- | (event:E)=>void | -- |
| onReset | -- | (event:E)=>void | -- |
| onResetCapture | -- | (event:E)=>void | -- |
| onSubmit | -- | (event:E)=>void | -- |
| onSubmitCapture | -- | (event:E)=>void | -- |
| onInvalid | -- | (event:E)=>void | -- |
| onInvalidCapture | -- | (event:E)=>void | -- |
| onLoad | -- | (event:E)=>void | -- |
| onLoadCapture | -- | (event:E)=>void | -- |
| onError | -- | (event:E)=>void | -- |
| onErrorCapture | -- | (event:E)=>void | -- |
| onKeyDown | -- | (event:E)=>void | -- |
| onKeyDownCapture | -- | (event:E)=>void | -- |
| onKeyPress | -- | (event:E)=>void | -- |
| onKeyPressCapture | -- | (event:E)=>void | -- |
| onKeyUp | -- | (event:E)=>void | -- |
| onKeyUpCapture | -- | (event:E)=>void | -- |
| onAbort | -- | (event:E)=>void | -- |
| onAbortCapture | -- | (event:E)=>void | -- |
| onCanPlay | -- | (event:E)=>void | -- |
| onCanPlayCapture | -- | (event:E)=>void | -- |
| onCanPlayThrough | -- | (event:E)=>void | -- |
| onCanPlayThroughCapture | -- | (event:E)=>void | -- |
| onDurationChange | -- | (event:E)=>void | -- |
| onDurationChangeCapture | -- | (event:E)=>void | -- |
| onEmptied | -- | (event:E)=>void | -- |
| onEmptiedCapture | -- | (event:E)=>void | -- |
| onEncrypted | -- | (event:E)=>void | -- |
| onEncryptedCapture | -- | (event:E)=>void | -- |
| onEnded | -- | (event:E)=>void | -- |
| onEndedCapture | -- | (event:E)=>void | -- |
| onLoadedData | -- | (event:E)=>void | -- |
| onLoadedDataCapture | -- | (event:E)=>void | -- |
| onLoadedMetadata | -- | (event:E)=>void | -- |
| onLoadedMetadataCapture | -- | (event:E)=>void | -- |
| onLoadStart | -- | (event:E)=>void | -- |
| onLoadStartCapture | -- | (event:E)=>void | -- |
| onPause | -- | (event:E)=>void | -- |
| onPauseCapture | -- | (event:E)=>void | -- |
| onPlay | -- | (event:E)=>void | -- |
| onPlayCapture | -- | (event:E)=>void | -- |
| onPlaying | -- | (event:E)=>void | -- |
| onPlayingCapture | -- | (event:E)=>void | -- |
| onProgress | -- | (event:E)=>void | -- |
| onProgressCapture | -- | (event:E)=>void | -- |
| onRateChange | -- | (event:E)=>void | -- |
| onRateChangeCapture | -- | (event:E)=>void | -- |
| onResize | -- | (event:E)=>void | -- |
| onResizeCapture | -- | (event:E)=>void | -- |
| onSeeked | -- | (event:E)=>void | -- |
| onSeekedCapture | -- | (event:E)=>void | -- |
| onSeeking | -- | (event:E)=>void | -- |
| onSeekingCapture | -- | (event:E)=>void | -- |
| onStalled | -- | (event:E)=>void | -- |
| onStalledCapture | -- | (event:E)=>void | -- |
| onSuspend | -- | (event:E)=>void | -- |
| onSuspendCapture | -- | (event:E)=>void | -- |
| onTimeUpdate | -- | (event:E)=>void | -- |
| onTimeUpdateCapture | -- | (event:E)=>void | -- |
| onVolumeChange | -- | (event:E)=>void | -- |
| onVolumeChangeCapture | -- | (event:E)=>void | -- |
| onWaiting | -- | (event:E)=>void | -- |
| onWaitingCapture | -- | (event:E)=>void | -- |
| onAuxClick | -- | (event:E)=>void | -- |
| onAuxClickCapture | -- | (event:E)=>void | -- |
| onClick | -- | (event:E)=>void | -- |
| onClickCapture | -- | (event:E)=>void | -- |
| onContextMenu | -- | (event:E)=>void | -- |
| onContextMenuCapture | -- | (event:E)=>void | -- |
| onDoubleClick | -- | (event:E)=>void | -- |
| onDoubleClickCapture | -- | (event:E)=>void | -- |
| onDrag | -- | (event:E)=>void | -- |
| onDragCapture | -- | (event:E)=>void | -- |
| onDragEnd | -- | (event:E)=>void | -- |
| onDragEndCapture | -- | (event:E)=>void | -- |
| onDragEnter | -- | (event:E)=>void | -- |
| onDragEnterCapture | -- | (event:E)=>void | -- |
| onDragExit | -- | (event:E)=>void | -- |
| onDragExitCapture | -- | (event:E)=>void | -- |
| onDragLeave | -- | (event:E)=>void | -- |
| onDragLeaveCapture | -- | (event:E)=>void | -- |
| onDragOver | -- | (event:E)=>void | -- |
| onDragOverCapture | -- | (event:E)=>void | -- |
| onDragStart | -- | (event:E)=>void | -- |
| onDragStartCapture | -- | (event:E)=>void | -- |
| onDrop | -- | (event:E)=>void | -- |
| onDropCapture | -- | (event:E)=>void | -- |
| onMouseDown | -- | (event:E)=>void | -- |
| onMouseDownCapture | -- | (event:E)=>void | -- |
| onMouseEnter | -- | (event:E)=>void | -- |
| onMouseLeave | -- | (event:E)=>void | -- |
| onMouseMove | -- | (event:E)=>void | -- |
| onMouseMoveCapture | -- | (event:E)=>void | -- |
| onMouseOut | -- | (event:E)=>void | -- |
| onMouseOutCapture | -- | (event:E)=>void | -- |
| onMouseOver | -- | (event:E)=>void | -- |
| onMouseOverCapture | -- | (event:E)=>void | -- |
| onMouseUp | -- | (event:E)=>void | -- |
| onMouseUpCapture | -- | (event:E)=>void | -- |
| onSelect | -- | (event:E)=>void | -- |
| onSelectCapture | -- | (event:E)=>void | -- |
| onTouchCancel | -- | (event:E)=>void | -- |
| onTouchCancelCapture | -- | (event:E)=>void | -- |
| onTouchEnd | -- | (event:E)=>void | -- |
| onTouchEndCapture | -- | (event:E)=>void | -- |
| onTouchMove | -- | (event:E)=>void | -- |
| onTouchMoveCapture | -- | (event:E)=>void | -- |
| onTouchStart | -- | (event:E)=>void | -- |
| onTouchStartCapture | -- | (event:E)=>void | -- |
| onPointerDown | -- | (event:E)=>void | -- |
| onPointerDownCapture | -- | (event:E)=>void | -- |
| onPointerMove | -- | (event:E)=>void | -- |
| onPointerMoveCapture | -- | (event:E)=>void | -- |
| onPointerUp | -- | (event:E)=>void | -- |
| onPointerUpCapture | -- | (event:E)=>void | -- |
| onPointerCancel | -- | (event:E)=>void | -- |
| onPointerCancelCapture | -- | (event:E)=>void | -- |
| onPointerEnter | -- | (event:E)=>void | -- |
| onPointerLeave | -- | (event:E)=>void | -- |
| onPointerOver | -- | (event:E)=>void | -- |
| onPointerOverCapture | -- | (event:E)=>void | -- |
| onPointerOut | -- | (event:E)=>void | -- |
| onPointerOutCapture | -- | (event:E)=>void | -- |
| onGotPointerCapture | -- | (event:E)=>void | -- |
| onGotPointerCaptureCapture | -- | (event:E)=>void | -- |
| onLostPointerCapture | -- | (event:E)=>void | -- |
| onLostPointerCaptureCapture | -- | (event:E)=>void | -- |
| onScroll | -- | (event:E)=>void | -- |
| onScrollCapture | -- | (event:E)=>void | -- |
| onWheel | -- | (event:E)=>void | -- |
| onWheelCapture | -- | (event:E)=>void | -- |
| onAnimationStart | -- | (event:E)=>void | -- |
| onAnimationStartCapture | -- | (event:E)=>void | -- |
| onAnimationEnd | -- | (event:E)=>void | -- |
| onAnimationEndCapture | -- | (event:E)=>void | -- |
| onAnimationIteration | -- | (event:E)=>void | -- |
| onAnimationIterationCapture | -- | (event:E)=>void | -- |
| onToggle | -- | (event:E)=>void | -- |
| onBeforeToggle | -- | (event:E)=>void | -- |
| onTransitionCancel | -- | (event:E)=>void | -- |
| onTransitionCancelCapture | -- | (event:E)=>void | -- |
| onTransitionEnd | -- | (event:E)=>void | -- |
| onTransitionEndCapture | -- | (event:E)=>void | -- |
| onTransitionRun | -- | (event:E)=>void | -- |
| onTransitionRunCapture | -- | (event:E)=>void | -- |
| onTransitionStart | -- | (event:E)=>void | -- |
| onTransitionStartCapture | -- | (event:E)=>void | -- |
| defaultChecked | -- | boolean | -- |
| defaultValue | -- | string|number|ReadonlyArray | -- |
| suppressContentEditableWarning | -- | boolean | -- |
| suppressHydrationWarning | -- | boolean | -- |
| accessKey | -- | string | -- |
| autoCapitalize | -- | off|none|on|sentences|words|characters|string | -- |
| autoFocus | -- | boolean | -- |
| contentEditable | -- | Booleanish|inherit|plaintext-only | -- |
| contextMenu | -- | string | -- |
| dir | -- | string | -- |
| draggable | -- | true|false|boolean | -- |
| enterKeyHint | -- | "enter"|"done"|"go"|"next"|"previous"|"search"|"send" | -- |
| hidden | -- | boolean | -- |
| id | -- | string | -- |
| lang | -- | string | -- |
| nonce | -- | string | -- |
| slot | -- | string | -- |
| spellCheck | -- | true|false|boolean | -- |
| tabIndex | -- | number | -- |
| title | -- | string | -- |
| translate | -- | "yes"|"no" | -- |
| radioGroup | -- | string | -- |
| role | -- | term|none|string|search|alert|alertdialog|application|article|banner|button|cell|checkbox|columnheader|combobox|complementary|contentinfo|definition|dialog|directory|document|feed|figure|form|grid|gridcell|group|heading|img|link|list|listbox|listitem|log|main|marquee|math|menu|menubar|menuitem|menuitemcheckbox|menuitemradio|navigation|note|option|presentation|progressbar|radio|radiogroup|region|row|rowgroup|rowheader|scrollbar|searchbox|separator|slider|spinbutton|status|switch|tab|table|tablist|tabpanel|textbox|timer|toolbar|tooltip|tree|treegrid|treeitem | -- |
| about | -- | string | -- |
| content | -- | string | -- |
| datatype | -- | string | -- |
| inlist | -- | any | -- |
| prefix | -- | string | -- |
| property | -- | string | -- |
| rel | -- | string | -- |
| resource | -- | string | -- |
| rev | -- | string | -- |
| typeof | -- | string | -- |
| vocab | -- | string | -- |
| autoCorrect | -- | string | -- |
| autoSave | -- | string | -- |
| color | -- | string | -- |
| itemProp | -- | string | -- |
| itemScope | -- | boolean | -- |
| itemType | -- | string | -- |
| itemID | -- | string | -- |
| itemRef | -- | string | -- |
| results | -- | number | -- |
| security | -- | string | -- |
| unselectable | -- | "off"|"on" | -- |
| popover | -- | ""|"auto"|"manual" | -- |
| popoverTargetAction | -- | "toggle"|"show"|"hide" | -- |
| popoverTarget | -- | string | -- |
| inert | -- | boolean | -- |
| inputMode | Hints at the type of data that might be entered by the user while editing the element or its contents | "text"|"url"|"none"|"search"|"tel"|"email"|"numeric"|"decimal" | -- |
| is | Specify that a standard HTML element should behave like a defined custom built-in element | string | -- |
| direction | -- | "ltr"|"rtl" | -- |
| prefixCls | -- | string | -- |
| items | -- | Tab[] | -- |
| activeKey | -- | string | -- |
| getPopupContainer | -- | (node:HTMLElement)=>HTMLElement | -- |
| popupClassName | -- | string | -- |
| defaultActiveKey | -- | string | -- |
| locale | -- | {dropdownAriaLabel?:string;removeAriaLabel?:string;addAriaLabel?:string} | -- |
| animated | -- | boolean|AnimatedConfig | -- |
| renderTabBar | -- | (props:RenderTabBarProps,DefaultTabBar:React.ComponentType<import("/node_modules/rc-tabs/lib/TabNavList/index").TabNavListProps>)=>{type:any;props:any;key:string|} | -- |
| tabBarExtraContent | -- | |string|number|unknown|ReactElement|Iterable<ReactNode>|ReactPortal|Promise<AwaitedReactNode>|Partial___type|boolean | -- |
| tabBarGutter | -- | number | -- |
| tabBarStyle | -- | {} | -- |
| tabPosition | -- | "top"|"bottom"|"left"|"right" | -- |
| destroyInactiveTabPane | -- | boolean | -- |
| onTabClick | -- | (activeKey:string,e:React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>)=>void | -- |
| onTabScroll | -- | (info:{ direction: "top" | "bottom" | "left" | "right"; })=>void | -- |
| indicator | -- | {size?:number|(origin:number)=>number;align?:"start"|"end"|"center"} | -- |