Add tabs without content

Add custom content to tab title

Apply custom classes to the generated nav-tabs or pills

Lazy loading tab content

Keyboard navigation

Programmatically activating and deactivating tabs

Preventing a <b-tab> from being activated

Advanced examples

External controls using v-model

Dynamic tabs + tabs-end slot

<b-tabs>

<b-tab>

导入单个组件

导入为Vue.js插件

For navigation based tabs (i.e. tabs that would change the URL), use the <b-nav> component instead.

< b-tabs content-class = "mt-3" > < b-tab title = "First" active > < p > I'm the first tab </ p > </ b-tab > < b-tab title = "Second" > < p > I'm the second tab </ p > </ b-tab > < b-tab title = "Disabled" disabled > < p > I'm a disabled tab! </ p > </ b-tab > </ b-tabs > </ div > 如果动态添加或删除 <b-tab> 组件（即 v-if 或for循环），则应为每个子 <b-tab> 组件提供唯一的键值。 key 属性是特殊的Vue属性，请参阅 https://vuejs.org/v2/api/#key 。

Cards 集成

选项卡支持与引导卡集成。只需将 card 属性添加到 <b-tabs> 并将其放在 <b-card> 组件中。请注意，您应该在 <b-card> 组件上添加 no-body 道具，以便正确装饰卡头并移除由 card-body 引入的额外填充。 此选项卡没有设置 no-body 道具

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure.

< b-tabs card > < b-tab no-body title = "Picture 1" > < b-card-img bottom src = "https://picsum.photos/600/200/?image=21" > </ b-card-img > < b-card-footer > Picture 1 footer </ b-card-footer > </ b-tab > < b-tab no-body title = "Picture 2" > < b-card-img bottom src = "https://picsum.photos/600/200/?image=25" > </ b-card-img > < b-card-footer > Picture 2 footer </ b-card-footer > </ b-tab > < b-tab no-body title = "Picture 3" > < b-card-img bottom src = "https://picsum.photos/600/200/?image=26" > </ b-card-img > < b-card-footer > Picture 3 footer </ b-card-footer > </ b-tab > < b-tab title = "Text" > < b-card-title > This tab does not have the < code > no-body </ code > prop set </ b-card-title > < b-card-text > Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. </ b-card-text > </ b-tab > </ b-tabs > </ b-card > </ div > 当 no-body 不在 <b-tab> 下时， 在 <b-tabs> 上设置 no-body 道具不会有任何影响（因为仅在 card 模式下才设置 card-body 类）。 有关卡组件的详细信息，请参阅 卡文档 。

Pills variant

默认情况下，选项卡使用 tabs 样式。只需将 pills 属性添加到 <b-tabs> 即可获得pills样式变量。 < b-card no-body > < b-tabs pills card > < b-tab title = "Tab 1" active > < b-card-text > Tab contents 1 </ b-card-text > </ b-tab > < b-tab title = "Tab 2" > < b-card-text > Tab contents 2 </ b-card-text > </ b-tab > </ b-tabs > </ b-card > </ div >

填充并对齐

强制 <b-tabs> 控件扩展整个可用宽度。

要使用选项卡控件按比例填充所有可用空间，请设置填充属性。请注意，所有水平空间都已占用，但并非每个控件都具有相同的宽度。

< b-tabs content-class = "mt-3" fill > < b-tab title = "First" active > < p > I'm the first tab </ p > </ b-tab > < b-tab title = "Second" > < p > I'm the second tab </ p > </ b-tab > < b-tab title = "Very, very long title" > < p > I'm the tab with the very, very long title </ p > </ b-tab > < b-tab title = "Disabled" disabled > < p > I'm a disabled tab! </ p > </ b-tab > </ b-tabs > </ div >

Justified

对于等宽控件，请改用 justified 属性。所有水平空间都将被控件占用，但与使用上面的 填充 不同，每个控件的宽度都是相同的。 < b-tabs content-class = "mt-3" justified > < b-tab title = "First" active > < p > I'm the first tab </ p > </ b-tab > < b-tab title = "Second" > < p > I'm the second tab </ p > </ b-tab > < b-tab title = "Very, very long title" > < p > I'm the tab with the very, very long title </ p > </ b-tab > < b-tab title = "Disabled" disabled > < p > I'm a disabled tab! </ p > </ b-tab > </ b-tabs > </ div > 要对齐选项卡控件，请使用 align prop。可用值包括 left 、 center 和 right 。 < b-tabs content-class = "mt-3" align = "center" > < b-tab title = "First" active > < p > I'm the first tab </ p > </ b-tab > < b-tab title = "Second" > < p > I'm the second tab </ p > </ b-tab > < b-tab title = "Disabled" disabled > < p > I'm a disabled tab! </ p > </ b-tab > </ b-tabs > </ div >

选项卡控件的底部位置

通过设置prop末端，将制表符控件可视地移动到 end 。 < b-card no-body > < b-tabs pills card end > < b-tab title = "Tab 1" active > < b-card-text > Tab contents 1 </ b-card-text > </ b-tab > < b-tab title = "Tab 2" > < b-card-text > Tab contents 2 </ b-card-text > </ b-tab > </ b-tabs > </ b-card > </ div >

注意事项：

底部放置视觉效果最好的 pills variant。当使用默认的 tabs 变量时，您可能需要提供自己的自定义样式类，因为Bootstrap v4 CSS假定这些选项卡始终位于tabs内容的顶部。

要使用底部放置的控件提供更好的用户体验，请确保每个选项卡窗格的内容具有相同的高度并完全适合可见视口，否则用户将需要向上滚动以读取选项卡内容的开头。

垂直选项卡

通过将 vertical prop设置为 true ， 将制表符控件放置在左侧。垂直标签可以在启用或不启用 true 模式的情况下工作。 < b-card no-body > < b-tabs pills card vertical > < b-tab title = "Tab 1" active > < b-card-text > Tab contents 1 </ b-card-text > </ b-tab > < b-tab title = "Tab 2" > < b-card-text > Tab contents 2 </ b-card-text > </ b-tab > < b-tab title = "Tab 3" > < b-card-text > Tab contents 3 </ b-card-text > </ b-tab > </ b-tabs > </ b-card > </ div > 通过设置 end prop，将制表符控件可视地移动到右侧： < b-card no-body > < b-tabs pills card vertical end > < b-tab title = "Tab 1" active > < b-card-text > Tab contents 1 </ b-card-text > </ b-tab > < b-tab title = "Tab 2" > < b-card-text > Tab contents 2 </ b-card-text > </ b-tab > < b-tab title = "Tab 3" > < b-card-text > Tab contents 3 </ b-card-text > </ b-tab > </ b-tabs > </ b-card > </ div > 垂直选项卡控件的宽度将展开以适合选项卡标题的宽度。要控制宽度，请通过prop nav-wrapper-class 设置 width utility class 。 可以使用 w-25 （25%宽度）、 w-50 （50%宽度）等值， 也可以使用 col-2 、 col-3 等列类。 < b-card no-body > < b-tabs pills card vertical nav-wrapper-class = "w-50" > < b-tab title = "Tab 1" active > < b-card-text > Tab contents 1 </ b-card-text > </ b-tab > < b-tab title = "Tab 2" > < b-card-text > Tab contents 2 </ b-card-text > </ b-tab > < b-tab title = "Tab 3" > < b-card-text > Tab contents 3 </ b-card-text > </ b-tab > </ b-tabs > </ b-card > </ div > 垂直放置视觉效果最好的 pills variant。当使用默认的 tabs 变量时， 您可能需要提供自己的自定义样式类，因为Bootstrap v4 CSS假定tab控件始终位于tabs内容的顶部。

注意: 如果宽度小于选项卡标题，则可能会出现溢出文本。您可能需要额外的自定义样式。

Active 类

要将类应用于当前活动控件或选项卡，请使用 active-nav-item-class 和 active-tab-class 属性。 < b-tabs active-nav-item-class = "font-weight-bold text-uppercase text-danger" active-tab-class = "font-weight-bold text-success" content-class = "mt-3" < b-tab title = "First" active > < p > I'm the first tab </ p > </ b-tab > < b-tab title = "Second" > < p > I'm the second tab </ p > </ b-tab > < b-tab title = "Disabled" disabled > < p > I'm a disabled tab! </ p > </ b-tab > </ b-tabs > </ div >

淡入淡出动画

更改选项卡时默认启用淡入淡出。它可以在 no-fade 属性的情况下禁用。

添加不带内容的选项卡

如果要添加没有任何内容的额外选项卡，可以将它们放在 tabs-start 或 tabs-end 槽中： <!-- Add your b-tab components here --> < template v-slot:tabs-end > < b-nav-item href = "#" @ click = "() => {}" > Another tab </ b-nav-item > < li class = "nav-item align-self-center" > Plain text </ li > </ template > </ b-tabs > </ div > 使用 tabs-start 槽在“内容”选项卡按钮之前放置额外的选项卡按钮，并使用 tabs-end 槽在“内容”选项卡按钮之后放置额外的选项卡按钮。 额外（无内容）选项卡按钮应该是 <b-nav-item> 或 根元素 <li> 和类 nav-item ，以便正确呈现和语义标记。

将自定义内容添加到选项卡标题

如果要将自定义内容添加到选项卡标题，如HTML代码、图标或其他非交互式Vue组件，可以使用 <b-tab> 的 title 槽。 < b-tab active > < template v-slot:title > < b-spinner type = "grow" small > </ b-spinner > I'm < i > custom </ i > < strong > title </ strong > </ template > < p class = "p-3" > Tab contents 1 </ p > </ b-tab > < b-tab > < template v-slot:title > < b-spinner type = "border" small > </ b-spinner > Tab 2 </ template > < p class = "p-3" > Tab contents 2 </ p > </ b-tab > </ b-tabs > </ div >

不要 将交互元素/组件放置在标题栏中。tab按钮是一个链接，它不支持HTML5规范中的子交互元素。

将自定义类应用于生成的导航选项卡或pills

选项卡选择器基于Bootstrap v4的导航标记（即 ul.nav > li.nav-item > a.nav-link ）。 在某些情况下，您可能希望按每个选项卡向 <li> （导航项）和/ 或 <a> （导航链接）添加类。为此， 只需将类名提供给 title-item-class prop（对于 <li> 元素） 或 title-link-class （对于 <a> 元素）。值可以作为字符串或字符串数组传递。 active 类将自动应用于活动tabs <a> 元素。您可能需要为此提供自定义类。 < b-card no-body > < b-tabs v-model = "tabIndex" card > < b-tab title = "Tab 1" :title-link-class = "linkClass(0)" > Tab contents 1 </ b-tab > < b-tab title = "Tab 2" :title-link-class = "linkClass(1)" > Tab contents 2 </ b-tab > < b-tab title = "Tab 3" :title-link-class = "linkClass(2)" > Tab contents 3 </ b-tab > </ b-tabs > </ b-card > </ div > </ template > < script > export default { data() { return { tabIndex : 0 methods : { linkClass(idx) { if ( this .tabIndex === idx) { return [ 'bg-primary' , 'text-light' ] } else { return [ 'bg-light' , 'text-info' ] </ script >

延迟加载选项卡内容

有时，最好只在激活选项卡时加载组件和数据，而不是在呈现 <b-tabs> 集时加载所有选项卡（和相关数据）。 单个 <b-tab> 组件可以通过 lazy prop延迟加载， 当设置时，它在激活（如图所示）之前不会装载 <b-tab> 的内容，并且在禁用（隐藏）选项卡时将卸载：

<b-tabs content-class="mt-3">
  <!-- This tabs content will always be mounted -->
  <b-tab title="Regular tab"><b-alert show>I'm always mounted</b-alert></b-tab>
  <!-- This tabs content will not be mounted until the tab is shown -->
  <!-- and will be un-mounted when hidden -->
  <b-tab title="Lazy tab" lazy><b-alert show>I'm lazy mounted!</b-alert></b-tab>
</b-tabs>

通过在父 <b-tabs> 组件上设置 lazy prop，还可以使所有tab变延迟：

<b-tabs content-class="mt-3" lazy>
  <b-tab title="Tab 1"><b-alert show>I'm lazy mounted!</b-alert></b-tab>
  <b-tab title="Tab 2"><b-alert show>I'm lazy mounted too!</b-alert></b-tab>
</b-tabs>

默认情况下，如果选项卡按钮具有焦点，则会启用键盘导航，以使ARIA符合tablists。

每个 <b-tab> 实例还提供两个激活或停用选项卡的公共方法。 方法分别是 .activate() 和 .deactivate() 。 如果激活或停用失败（即某个选项卡被禁用或没有可将激活移动到的选项卡），则当前活动的选项卡将保持活动状态，该方法将返回 false 。 您需要引用 <b-tab> 才能使用这些方法。 防止 <b-tab> 被激活 要防止选项卡激活，只需在 <b-tab> 组件上设置 disabled 的属性。 或者，您可以侦听 activate-tab 事件，该事件提供了一个选项来阻止选项卡激活。 activate-tab 事件由三个参数发出：

newTabIndex : 将要激活的选项卡的索引

prevTabIndex : 当前活动选项卡的索引

bvEvent : BvEvent 对象。调用 bvEvt.preventDefault() 以防止激活 newTabIndex 出于辅助功能的原因，当使用 activate-tab 事件阻止选项卡激活时，应向用户提供一些通知方法， 说明无法激活选项卡的原因。建议使用 <b-tab> >组件上的 disabled 属性， 而不是使用 activate-tab 事件（因为 disabled 对于屏幕阅读器用户更直观）。

外部控件使用 v-model

<!-- Tabs with card integration --> < b-card no-body > < b-tabs v-model = "tabIndex" small card > < b-tab title = "General" > I'm the first fading tab </ b-tab > < b-tab title = "Edit profile" > I'm the second tab < b-card > I'm the card in tab </ b-card > </ b-tab > < b-tab title = "Premium Plan" disabled > Sibzamini! </ b-tab > < b-tab title = "Info" > I'm the last tab </ b-tab > </ b-tabs > </ b-card > <!-- Control buttons--> < div class = "text-center" > < b-button-group class = "mt-2" > < b-button @ click = "tabIndex--" > Previous </ b-button > < b-button @ click = "tabIndex++" > Next </ b-button > </ b-button-group > < div class = "text-muted" > Current Tab: {{ tabIndex }} </ div > </ div > </ div > </ template > < script > export default { data() { return { tabIndex : 1 </ script >

动态标签 + tabs-end slot

< b-tabs card > <!-- Render Tabs, supply a unique `key` to each tab --> < b-tab v-for = "i in tabs" :key = "'dyn-tab-' + i" :title = "'Tab ' + i" > Tab contents {{ i }} < b-button size = "sm" variant = "danger" class = "float-right" @ click = "closeTab(i)" > Close tab </ b-button > </ b-tab > <!-- New Tab Button (Using tabs-end slot) --> < template v-slot:tabs-end > < b-nav-item @ click.prevent = "newTab" href = "#" > < b > + </ b > </ b-nav-item > </ template > <!-- Render this if no tabs --> < template v-slot:empty > < div class = "text-center text-muted" > There are no open tabs < br > Open a new tab using the < b > + </ b > button above. </ div > </ template > </ b-tabs > </ b-card > </ div > </ template > < script > export default { data() { return { tabs : [], tabCounter : 0 methods : { closeTab(x) { for ( let i = 0 ; i < this .tabs.length; i++) { if ( this .tabs[i] === x) { this .tabs.splice(i, 1 ) newTab() { this .tabs.push( this .tabCounter++) </ script >

<b-tabs>

查看源代码

<b-tabs> 属性

<b-tabs> v-model

<b-tabs> 插槽

<b-tabs> 事件

newTabIndex - 正在激活的选项卡（基于0的索引）

prevTabIndex - 当前处于活动状态的选项卡（基于0的索引）。如果当前没有活动选项卡，则为-1

bvEvt - BvEvent对象。调用bvEvt.preventDefault（）取消

在显示/激活选项卡之前发出。可取消 changed

currentTabs - 当前b-tab实例的数组，按文档顺序排列。

previousTabs - 以前的b-tab实例的数组，按文档顺序排列。

添加、删除或重新排序选项卡时发出