Tabs

Code

Install

Import

The axes

• type takes antd's line (the default), card and editable-card, plus the kit's floating, padded and docked. Each addition is a line bar with a hover highlight: floating highlights the label, padded the padded tab, and docked the whole tab down to the rail.
• color takes default and primary. default paints the indicator and the selected, hovered and pressed labels in the text color instead of the primary color. primary keeps antd's own look, and on the kit's three types it tints the hover highlight. Under either value a resting label uses the secondary text color, so the selected label reads as a step up. A disabled label keeps antd's own color.
• size takes small, medium and large and applies to the bar, not the panel. middle is v5's spelling of medium and still typechecks. The kit also sets small labels in the small font size.
• tabPlacement takes top, end, bottom and start, which follow the reading direction, so a bar mirrors under rtl on its own. It replaces tabPosition, whose values are top, right, bottom and left, so change the values when you migrate.

Flags

• centered centers the tab list inside the bar.
• hideAdd removes the built-in plus button. It only matters under editable-card: other types have no plus button to hide.
• destroyOnHidden unmounts an inactive panel instead of hiding it. It works on the Tabs and on an individual item, and the value on the Tabs wins where both are set. An item's forceRender is the opposite lever: it mounts a panel before its tab is ever activated.
• animated is a boolean or { inkBar, tabPane } and defaults to { inkBar: true, tabPane: false }: the indicator slides, panels do not cross-fade. animated={true} turns the panel motion on, animated={false} turns both off.

Slots

• addIcon and removeIcon come from AntuikitProvider, and your prop wins over them.
• A ConfigProvider tabs.moreIcon wins over the moreIcon prop. antd reads the provider first for that one icon, so set it in one place. The kit's default is on the prop, so either one replaces it.
• tabBarExtraContent takes a single node, which lands at the end, or an object with left and right, which swap sides in right-to-left layouts, so treat them as start and end.
• renderTabBar hands you the bar's props and the default DefaultTabBar, so you can wrap the real bar rather than rebuild it. That is how a sticky tab bar is built, and rebuilding instead costs you the roving tabindex and the arrow-key handling.
• An item's icon and label both take nodes. Keep a glyph in icon: the gap between icon and label only applies to the icon slot.

Events

• onChange(activeKey) fires only when the active tab actually changes. Pair it with activeKey for the controlled form; defaultActiveKey is the uncontrolled one, and with neither the first item wins.
• onTabClick(key, event) fires on every activation, including a click on the tab that is already active. That is the hook for “scroll the panel back to the top”, not onChange.
• onEdit(target, action): target is the tab key for remove and the click event for add. It does not change the selection, so removing the active tab in a controlled bar means setting a new activeKey yourself.
• onTabScroll({ direction }) fires when the overflowing list scrolls. It replaces onPrevClick and onNextClick, which warn.

Styling