TabView-Demo

---

Data

---

1. items

items = [
    {
        key: 'explorer',
        name: 'Explorer',
        title: 'Explorer',
        show: true,
        disabled: false,
        draggable: true,
        closable: true,
        modified: false,
        icon: 'FolderHorizontal',
        img: ''
    }
]

modified also supports a function and is resolved with valueTrigger, so you can compute the unsaved state dynamically per tab item.

Properties

---

Property	Type	Required	Default	Description
modelValue	object	No	null	Currently selected tab item.
items	array	No	[{ name: 'Tab' }]	Tab item list. Each item usually uses key, name or title, plus optional icon, img, image, or src.
itemWidth	number / string	No	180	Unified width for every tab.
itemHeight	number / string	No	38	Tab height.
padding	string	No	''	Outer padding of the component.
borderRadius	number / string	No	8	Outer border radius.
foreground	string	No	''	Text and icon color of normal tabs.
choosenForeground	string	No	''	Text and icon color of the selected tab.
chooseBackground	string	No	''	Background of the selected tab.
background	string	No	''	Background of the whole TabView.
normalBackground	string	No	''	Background of a tab in its normal state.
hoverBackground	string	No	''	Background of a tab while hovering.
activeBackground	string	No	''	Background of a tab while active.
fontSize	number / string	No	13	Font size of the tab title.
imgBorderRadius	number / string	No	4	Border radius for tab images.
draggable	boolean	No	true	Whether tabs can be reordered by drag and drop.
closable	boolean	No	true	Whether tabs show a close button by default. Items can set closable: false to opt out.
listPadding	string	No	''	Padding applied to the internal tab list container.
itemBorderRadius	number / string	No	8	Border radius of each tab item.
showAddButton	boolean	No	false	Whether to show the add button on the right side.
addButtonIcon	string	No	'Add'	Fluent icon name used by the add button.
addButtonBackground	string	No	''	Background of the add button.
addButtonForeground	string	No	''	Foreground color of the add button.
closeButtonIcon	string	No	'ChromeClose'	Fluent icon name used by the close button.
closeIconSize	number / string	No	10	Icon size of the close button.
modifiedButtonIcon	string	No	'CircleFill'	Fluent icon name shown for modified tabs before hover.
modifiedIconSize	number / string	No	8	Icon size of the modified indicator.
beforeClose	function	No	() => true	Interceptor called before a tab is closed. Receives { event, item, items, index }. Closing continues only when it returns true.
closeButtonForeground	string	No	''	Foreground color of the close button.
styleMode	string	No	'borderless'	Visual style of the tabs. Currently supports borderless and rounded.
overflowMode	string	No	'scroll'	Overflow behavior for many tabs. Use scroll to keep tab width and enable horizontal scrolling, or shrink to compress tabs into one row.
theme	string	No	'global'	Theme style. Supports global, light, dark, system, and custom.
disabled	boolean	No	false	Disable the whole component.
lang	string	No	'global'	Language option inherited from common props.

Slots

---

1. item

Customizes the entire tab item content. When this slot is used, the default icon + title layout is replaced.

• item: current tab item
• index: current tab index
• eqal: returns whether the tab is selected
• valueTrigger: resolves direct values or getter functions on the item

<template v-slot:item="{ item, index, eqal, valueTrigger }">
    <div
        style="display: flex; align-items: center; gap: 8px;"
    >
        <i
            class="ms-Icon"
            :class="`ms-Icon--${valueTrigger(item.icon)}`"
        ></i>
        <b>{{ valueTrigger(item.name) }}</b>
        <span v-if="eqal(item)">Current</span>
    </div>
</template>

2. icon

Customizes only the icon area inside the default tab item layout. If item is already used, this slot will not take effect.

• item: current tab item
• index: current tab index
• eqal: returns whether the tab is selected
• valueTrigger: resolves direct values or getter functions on the item

<template v-slot:icon="{ item, valueTrigger }">
    <i
        class="ms-Icon"
        :class="`ms-Icon--${valueTrigger(item.icon)}`"
        style="font-size: 18px;"
    ></i>
</template>

3. close-button

Customizes the close button content for closable tabs.

• item: current tab item
• index: current tab index
• modified: whether the current tab item is in modified state

<template v-slot:close-button="{ item, modified }">
    <i
        class="ms-Icon"
        :class="modified ? 'ms-Icon--CircleFill' : 'ms-Icon--Cancel'"
        :title="item.name"
    ></i>
</template>

4. add-button

Customizes the add button content shown on the right side when showAddButton is true.

<template v-slot:add-button>
    <i class="ms-Icon ms-Icon--Add"></i>
</template>

Emits

---

Event	Arguments	Description
update:modelValue	object	Triggered when the selected tab changes.
update:items	array	Triggered after close or drag reordering updates the tab list.
change	object	Triggered when the selected tab changes.
click	object	Triggered when a tab is clicked. Returns the clicked tab item.
add	event	Triggered when the add button is clicked.
close	object	Triggered when a tab is closed. Returns event, item, items, and index.
reorder	object	Triggered after drag reordering. Returns item, items, from, and to.