Tabs
Display tabs. Since tab content customization varies greatly, only the tab switching functionality is provided here. Content can be implemented as needed.
Basic Usage
Basic and simple tabs.
<template>
<div>
<b-tabs v-model="activeTab" :data="tabs"></b-tabs>
<div style="overflow: hidden; position: relative">
<b-move-transition>
<p v-if="activeTab === 'tab0'">Home</p>
<p v-else-if="activeTab === 'tab1'">User Management</p>
<p v-else-if="activeTab === 'tab2'">Organization Management</p>
<p v-else-if="activeTab === 'tab3'">System Management</p>
</b-move-transition>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const tabs = ref([
{ key: 'tab0', title: 'Home', noClose: true },
{ key: 'tab1', title: 'User Management' },
{ key: 'tab2', title: 'Organization Management' },
{ key: 'tab3', title: 'System Management' }
])
const activeTab = ref('tab2')
</script>cardMode
Can set basic card mode
<template>
<div>
<b-tabs v-model="activeTab" :data="tabs" type="card"></b-tabs>
<div style="overflow: hidden; position: relative">
<b-move-transition>
<p v-if="activeTab === 'tab0'">Home</p>
<p v-else-if="activeTab === 'tab1'">User Management</p>
<p v-else-if="activeTab === 'tab2'">Organization Management</p>
<p v-else-if="activeTab === 'tab3'">System Management</p>
</b-move-transition>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const tabs = ref([
{ key: 'tab0', title: 'Home', noClose: true },
{ key: 'tab1', title: 'User Management' },
{ key: 'tab2', title: 'Organization Management' },
{ key: 'tab3', title: 'System Management' }
])
const activeTab = ref('tab2')
</script>Add and Remove
Tabs can be closed, and new tabs can be added via custom events. The close button is only available in card and tag modes. By default, when the width is exceeded, tabs can scroll.
Set noClose on items in tabs to exclude the close button, primarily for fixed tabs.
<template>
<div>
<div class="mb-15">
<b-button type="primary" plain size="small" @click="handleAdd">add tab</b-button>
</div>
<b-tabs
v-model="activeTab"
:data="tabs"
type="card"
closable
@tab-close="handleTabClose"
></b-tabs>
<div style="overflow: hidden; position: relative">
<b-move-transition>
<p v-if="activeTab === 'tab0'">Home</p>
<p v-else-if="activeTab === 'tab1'">User Management</p>
<p v-else-if="activeTab === 'tab2'">Org Management</p>
<p v-else-if="activeTab === 'tab3'">System Management</p>
<p v-else>{{ activeTab }}</p>
</b-move-transition>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const tabs = ref([
{ key: 'tab0', title: 'Home', noClose: true },
{ key: 'tab1', title: 'User Management' },
{ key: 'tab2', title: 'Org Management' },
{ key: 'tab3', title: 'System Management' }
])
const activeTab = ref('tab2')
const handleAdd = () => {
// Ensure the key is unique here, otherwise the rendering will be affected
const newTab = { key: `tab${+new Date()}`, title: 'New Tab' }
tabs.value.push(newTab)
// After adding, the new tab is usually selected by default; you can also choose not to select it
activeTab.value = newTab.key
}
const handleTabClose = tab => {
tabs.value.splice(
tabs.value.findIndex(t => t.key === tab.key),
1
)
}
</script>context menu
Combined with ContextMenu, tabs can be closed and a context menu can be enabled for more configuration options. To enable the context menu, manually insert the button list with <li> tags and use the tab-select event.
<template>
<div>
<div class="mb-15">
<b-button type="primary" plain size="small" @click="handleAdd">add tab</b-button>
</div>
<b-tabs
ref="tabsRef"
v-model="activeTab"
:data="tabs"
type="card"
closable
context-menu
@tab-close="handleTabClose"
@tab-select="handleSelect"
>
<template #menu>
<li @click="refreshSelected">Refresh</li>
<li @click="closeSelected">Close</li>
<li @click="closeOthers">Close Others</li>
<li @click="closeAll">Close All</li>
</template>
</b-tabs>
<div style="overflow: hidden; position: relative">
<b-move-transition>
<p v-if="activeTab === 'tab0'">Home</p>
<p v-else-if="activeTab === 'tab1'">User Management</p>
<p v-else-if="activeTab === 'tab2'">Org Management</p>
<p v-else-if="activeTab === 'tab3'">System Management</p>
<p v-else>{{ activeTab }}</p>
</b-move-transition>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Message } from 'bin-ui-design'
const tabs = ref([
{ key: 'tab0', title: 'Home', noClose: true },
{ key: 'tab1', title: 'User Management' },
{ key: 'tab2', title: 'Org Management' },
{ key: 'tab3', title: 'System Management' }
])
const activeTab = ref('tab2')
const selectTab = ref(null)
const tabsRef = ref(null)
const handleAdd = () => {
// Ensure the key is unique here, otherwise the rendering will be affected
const newTab = { key: `tab${+new Date()}`, title: 'New Tab' }
tabs.value.push(newTab)
// After adding, the new tab is usually selected by default; you can also choose not to select it
activeTab.value = newTab.key
}
const handleTabClose = tab => {
tabs.value.splice(
tabs.value.findIndex(t => t.key === tab.key),
1
)
}
function handleSelect(tab) {
selectTab.value = { ...tab }
}
function refreshSelected() {
Message('Refresh current view:' + selectTab.value?.title)
}
function closeSelected() {
// Call the component's method to close the selected tab
tabsRef.value && tabsRef.value.closeSelectedTab(selectTab.value)
}
// Close Otherstags
function closeOthers() {
tabs.value = [selectTab.value]
activeTab.value = selectTab.value.key
tabsRef.value && tabsRef.value.moveToCurrentTab()
}
// Close All
function closeAll() {
tabs.value = []
activeTab.value = ''
tabsRef.value && tabsRef.value.moveToCurrentTab()
}
</script>tagMode
Besides card mode, tag mode can also be set. This mode is more independent and resembles tag navigation. Choose based on your needs.
<template>
<div>
<div class="mb-15">
<b-button type="primary" plain size="small" @click="handleAdd">add tab</b-button>
</div>
<b-tabs
ref="tabsRef"
v-model="activeTab"
:data="tabs"
type="tag"
closable
context-menu
@tab-close="handleTabClose"
@tab-select="handleSelect"
>
<template #menu>
<li @click="refreshSelected">Refresh</li>
<li @click="closeSelected">Close</li>
<li @click="closeOthers">Close Others</li>
<li @click="closeAll">Close All</li>
</template>
</b-tabs>
<div style="overflow: hidden; position: relative">
<b-move-transition>
<p v-if="activeTab === 'tab0'">Home</p>
<p v-else-if="activeTab === 'tab1'">User Management</p>
<p v-else-if="activeTab === 'tab2'">Org Management</p>
<p v-else-if="activeTab === 'tab3'">System Management</p>
<p v-else>{{ activeTab }}</p>
</b-move-transition>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Message } from 'bin-ui-design'
const tabs = ref([
{ key: 'tab0', title: 'Home', noClose: true },
{ key: 'tab1', title: 'User Management' },
{ key: 'tab2', title: 'Org Management' },
{ key: 'tab3', title: 'System Management' }
])
const activeTab = ref('tab2')
const selectTab = ref(null)
const tabsRef = ref(null)
const handleAdd = () => {
// Ensure the key is unique here, otherwise the rendering will be affected
const newTab = { key: `tab${+new Date()}`, title: 'New Tab' }
tabs.value.push(newTab)
// After adding, the new tab is usually selected by default; you can also choose not to select it
activeTab.value = newTab.key
}
const handleTabClose = tab => {
tabs.value.splice(
tabs.value.findIndex(t => t.key === tab.key),
1
)
}
function handleSelect(tab) {
selectTab.value = { ...tab }
}
function refreshSelected() {
Message('Refresh current view:' + selectTab.value?.title)
}
function closeSelected() {
// Call the component's method to close the selected tab
tabsRef.value && tabsRef.value.closeSelectedTab(selectTab.value)
}
// Close other tags
function closeOthers() {
tabs.value = [selectTab.value]
activeTab.value = selectTab.value.key
tabsRef.value && tabsRef.value.moveToCurrentTab()
}
// Close all
function closeAll() {
tabs.value = []
activeTab.value = ''
tabsRef.value && tabsRef.value.moveToCurrentTab()
}
</script>Props
| Parameter | Description | Type | Options | Default |
|---|---|---|---|---|
| data | Tabs data array, required. Structure follows {key:'',title:''} where key is the unique identifier and title is the tab name; icon can be set for extension | Array | — | [] |
| closable | Whether tabs can be closed | boolean | — | false |
| type | tabType | string | 'default','card','tag' | default |
Events
| Event Name | Description | Return Value |
|---|---|---|
| change | Tab change event | Currently selected tab |
| tab-close | Tab close event | Currently closed tab |
| tab-select | Right-click select event callback, used with the right-click system cache for clicked tags | Right-click selected tab |