选项卡(Tabs)

Create a widget of tabbable panes of local content. The tabs component is built upon navs and cards internally, and provides full keyboard navigation control of the tabs.

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

基本用法

I'm the first tab

<div>
  <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引入的额外填充。

Tab 1
Tab 2

Tab contents 1

<div>
  <b-card no-body>
    <b-tabs 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>处于 card 模式时，每个<b-tab> 子组件将自动应用card-body类（该类在选项卡内容周围提供填充）。要禁用card-body类，请在<b-tab>子组件上设置no-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.

<div>
  <b-card no-body>
    <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样式变量。

Tab 1
Tab 2

Tab contents 1

<div>
  <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>控件扩展整个可用宽度。

填充

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

I'm the first tab

<div>
  <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属性。所有水平空间都将被控件占用，但与使用上面的填充不同，每个控件的宽度都是相同的。

I'm the first tab

<div>
  <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。

I'm the first tab

<div>
  <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。

Tab contents 1

Tab 1
Tab 2

<div>
  <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模式的情况下工作。

Tab contents 1

<div>
  <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，将制表符控件可视地移动到右侧：

Tab contents 1

<div>
  <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等列类。

Tab contents 1

<div>
  <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属性。

I'm the first tab

<div>
  <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槽中：

Another tab
Plain text

<div>
  <b-tabs>
    <!-- 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槽。

Tab contents 1

<div>
  <b-tabs>
    <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>元素。您可能需要为此提供自定义类。

Tab contents 1

<template>
  <div>
    <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> 的内容，并且在禁用（隐藏）选项卡时将卸载：

I'm always mounted

<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变延迟：

Tab 1
Tab 2

I'm lazy mounted!

<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。

按键	行为
`LEFT` or `UP`	激活上一个非禁用选项卡
`RIGHT` or `DOWN`	激活下一个非禁用选项卡
`SHIFT`+`LEFT` or `SHIFT`+`UP`	激活第一个非禁用选项卡
`HOME`	激活第一个非禁用选项卡
`SHIFT`+`RIGHT` or `SHIFT`+`DOWN`	激活最后一个非禁用选项卡
`END`	激活最后一个非禁用选项卡
`TAB`	将焦点移到活动选项卡内容
`SHIFT`+`TAB`	将焦点移到页面上的上一个控件

通过设置prop no-key-nav禁用键盘导航。行为现在默认为使用TAB键进行常规浏览器导航。

按键	行为
`TAB`	移到页面上的下一个选项卡按钮或控件
`SHIFT`+`TAB`	移到页面上的上一个选项卡按钮或控件
`ENTER` or `SPACE`	激活当前聚焦按钮的选项卡

以编程方式激活和停用选项卡

通过将v-model设置为要显示的<b-tabs> 的索引（从零开始），使用v-model控制哪个选项卡处于活动状态（参见下面的示例）。

或者，可以使用每个<b-tab>上的active prop和 .sync修饰符来激活选项卡，或者检测特定选项卡是否处于活动状态。

每个<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`

I'm the second tab

I'm the card in tab

Current Tab: 1

<template>
  <div>
    <!-- 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

There are no open tabs
Open a new tab using the + button above.

<template>
  <div>
    <b-card no-body>
      <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> 事件

属性

属性 (Click to sort Ascending)	类型	默认值	描述
`id`	String		用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础
`tag`	String	`'div'`	指定要呈现的HTML标记，而不是默认标记
`fill`	Boolean	`false`	按比例用导航项填充所有水平空间。所有水平空间都被占用，但不是每个导航项都有相同的宽度
`justified`	Boolean	`false`	用导航项填充所有水平空间，但与“填充”不同，每个导航项的宽度都相同
`align`	String		对齐导航中的导航项：“开始”（或“左”）、“中心”、“结束”（或“右”）
`pills`	Boolean	`false`	以pill按钮的外观呈现导航项
`vertical`	Boolean	`false`	垂直呈现选项卡控件
`small`	Boolean	`false`	使导航更小
`card`	Boolean	`false`	当设置为true时，将选项卡呈现为要放置到“b-card”中的适当样式
`end`	Boolean	`false`	将制表符控件放在底部（水平制表符）或右侧（垂直制表符）
`no-fade`	Boolean	`false`	当设置为“true”时，禁用组件上的淡入动画/过渡
`no-nav-style`	Boolean	`false`	不使用选项卡样式呈现选项卡控件
`no-key-nav`	Boolean	`false`	禁用选项卡控件的键盘导航
`lazy`	Boolean	`false`	在显示b-tab内容时延迟呈现
`content-class`	String or Array or Object		应用于选项卡内容包装的CSS类
`nav-class`	String or Array or Object		应用于tablist（nav）包装的CSS类
`nav-wrapper-class`	String or Array or Object		应用于tab控件包装元素的CSS类
`active-nav-item-class`	String or Array or Object		应用于活动导航项选项卡控件的CSS类
`active-tab-class`	String or Array or Object		应用于当前活动选项卡的CSS类
`value` v-model	Number		当前可见的选项卡索引（基于零）

v-model

属性	事件
`value`	`input`

插槽

插槽名称	描述
`tabs-start`	在“内容”选项卡按钮之前没有放置选项卡内容的其他选项卡按钮
`tabs-end`	在“内容”选项卡按钮之后放置没有选项卡内容的其他选项卡按钮
`empty`	如果没有选项卡，则呈现此插槽

事件

事件	参数	描述
`input`	`tabIndex` - 当前选定的选项卡索引（基于0的索引）	显示选项卡时发出。用于更新v-model
`activate-tab` v2.1.0+	`newTabIndex` - 正在激活的选项卡（基于0的索引） `prevTabIndex` - 当前处于活动状态的选项卡（基于0的索引）。如果当前没有活动选项卡，则为-1 `bvEvt` - BvEvent对象。调用bvEvt.preventDefault（）取消	在显示/激活选项卡之前发出。可取消
`changed`	`currentTabs` - 当前b-tab实例的数组，按文档顺序排列。 `previousTabs` - 以前的b-tab实例的数组，按文档顺序排列。	添加、删除或重新排序选项卡时发出

`<b-tab>`

查看源代码

<b-tab> 属性
<b-tab> 插槽
<b-tab> 事件

属性

属性 (Click to sort Ascending)	类型	默认值	描述
`id`	String		用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础
`active`	Boolean	`false`	当设置为“true”时，使用活动样式将组件置于活动状态
`tag`	String	`'div'`	指定要呈现的HTML标记，而不是默认标记
`button-id`	String		使用此选项卡的选项卡控件按钮的特定ID。如果没有提供，将自动生成一个
`title`	String		要放置在标题中的文本内容
`title-item-class`	String or Array or Object		应用于选项卡的控制按钮“li”元素的CSS类
`title-link-class`	String or Array or Object		应用于选项卡的控件按钮内部链接元素的CSS类
`disabled`	Boolean	`false`	当设置为“true”时，将禁用组件的功能并将其置于禁用状态
`no-body`	Boolean	`false`	当父b-tabs设置了“card”属性时，不要呈现卡体包装
`lazy`	Boolean	`false`	在显示此选项卡时延迟呈现其内容

插槽

插槽名称	描述
`title`	自定义选项卡标题槽

事件

事件	参数	描述
`click`	`evt` - Original event object	单击选项卡或通过键盘导航激活时发出

导入单个组件

您可以通过以下命名的导出将单个组件导入到项目中：

组件	命名输出	导入路径
`<b-tabs>`	`BTabs`	`bootstrap-vue`
`<b-tab>`	`BTab`	`bootstrap-vue`

示例：

import { BTabs } from 'bootstrap-vue'
Vue.component('b-tabs', BTabs)

导入为Vue.js插件

该插件包括上面列出的所有单个组件。插件还包括任何组件别名。

命名输出	导入路径
`TabsPlugin`	`bootstrap-vue`

示例：

import { TabsPlugin } from 'bootstrap-vue'
Vue.use(TabsPlugin)

选项卡(Tabs)

基本用法

Cards 集成

此选项卡没有设置no-body道具

Pills variant

填充并对齐

填充

Justified

对齐

选项卡控件的底部位置

垂直选项卡

Active 类

淡入淡出动画

添加不带内容的选项卡

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

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

延迟加载选项卡内容

键盘导航

以编程方式激活和停用选项卡

防止<b-tab>被激活

高级示例

外部控件使用 v-model

动态标签 + tabs-end slot

组件引用

属性

v-model

插槽

事件

属性

插槽

事件

导入单个组件

导入为Vue.js插件

此选项卡没有设置`no-body`道具

防止`<b-tab>`被激活

外部控件使用 `v-model`