KTabs

Separate collections of data that are related but belong to different categories.

Install

pnpm

pnpm add @ikun-ui/tabs

yarn

yarn add @ikun-ui/tabs

npm

npm install @ikun-ui/tabs

Basic usage

Simple style tab page.

You can specify the currently selected tab through the value property.

TIP

The value property, navOptions property and the uid property of KTabsPane are required. The value property and the uid property of KTabsPane should correspond to the uid field of navOptions.

Card style tabs

You can set up labels with a card style.

Card-style tabs with borders

You can also set the tab to be a card with a border

Dynamically add or remove tabs

Add button custom icon

Disabled Tab

You can disable specific tabs through navOptions

Closeable Tab

You can enable a certain Tab to be deleted through navOptions

TIP

Its priority closeable property is higher

Switching control

The beforeLeave hook can limit tab switching

Add manully

You can manually change the navOptions to add tabs, but you need to call addTab to ensure correct updates

Tabs Props

Name	Type	Default	Description
value	string | number	0	The binding value of Tab, which should be the uid of a navOptions.
navOptions	KTabsNavItem[]	[]	tabItem options.
type	'card' | 'border'	''	tab style.
editable	boolean	false	Whether tabs can be added dynamically.
closeable	boolean	false	Whether the tab can be closed.
beforeLeave	(oldActiveTabValue, activeTabValue) => Promise<boolean>	-	Hook when switching tabs. If false is returned, switching will not occur.
cls	string	''	Additional class for component
attrs	any	{}	Additional attributes

export interface KTabsNavItem {
	// Whether tab is disabled
	disabled?: boolean;
	label: string;
	uid: string | number;
	// Whether tab is closeable
	closeable?: boolean;
}

Tabs Events

Name	Description	Type
click	trigger when alert is clicked.	(tab: KTabsNavItem)=> void
remove	trigger when alert is closed.	(data: { tab: KTabsNavItem, index: number })=> void
add	Triggered when the add button is clicked.	(event: PointerEvent)=> void
edit	Triggered when the new button is clicked or when the tab is closed.	(data: { tab: KTabsNavItem, action: 'remove' | 'add' })=> void
change	Triggered when the closed tab is the currently activated tab. You need to manually update the value to ensure correct rendering.	(tab: KTabsNavItem)=> void

Tabs Slots

Name	Description
default	content of the tab. Please use KTabsPane component
addIcon	add icon of the tab.

TabsPane Props

Name	Type	Default	Description
uid	string | number	-	The value should match the uid field of navOptions

TabsPane Slots

Name	Description
default	content of the tab.