Табы

Создайте виджет вкладок с локальным содержимым. Компонент вкладок построен на внутренних элементах навигации и карточках и обеспечивает полное управление навигацией по вкладкам с помощью клавиатуры.

Для вкладок на основе навигации (т. е. вкладок, которые могут изменить URL-адрес) вместо этого используйте компонент <b-nav>.

Простое использование

<div>
  <b-tabs content-class="mt-3">
    <b-tab title="First" active><p>я первая вкладка</p></b-tab>
    <b-tab title="Second"><p>я вторая вкладка</p></b-tab>
    <b-tab title="Disabled" disabled><p>я отключенная вкладка!</p></b-tab>
  </b-tabs>
</div>

<!-- b-tabs.vue -->

Совет: Вы должны предоставить каждому дочернему компоненту <b-tab> уникальное значение key при динамическом добавлении или удалении компонентов <b-tab> (например, v-if или циклы). Атрибут key— это специальный атрибут Vue, смотрите https://vuejs.org/v2/api/#key.

Интеграция карточек

Вкладки поддерживают интеграцию с карточками Bootstrap. Просто добавьте свойство card в <b-tabs> и поместите его внутрь компонента <b-card>. Обратите внимание, что вы должны добавить свойство no-body к компоненту <b-card>, чтобы правильно украсить заголовок карты и удалить лишнее заполнение, введенное card-body.

<div>
  <b-card no-body>
    <b-tabs card>
      <b-tab title="Вкладка 1" active>
        <b-card-text>Содержимое вкладки 1</b-card-text>
      </b-tab>
      <b-tab title="Вкладка 2">
        <b-card-text>Содержимое вкладки 2</b-card-text>
      </b-tab>
    </b-tabs>
  </b-card>
</div>

<!-- b-tabs-card.vue -->

Когда <b-tabs> находится в режиме card, к каждому подкомпоненту <b-tab> автоматически применяется класс card-body (этот класс обеспечивает отступ вокруг содержимого вкладки). Чтобы отключить класс card-body, установите свойство no-body в подкомпоненте <b-tab>.

<div>
  <b-card no-body>
    <b-tabs card>
      <b-tab no-body title="Картинка 1">
        <b-card-img bottom src="https://picsum.photos/600/200/?image=21" alt="Изображение 21"></b-card-img>
        <b-card-footer>Картинка 1 футер</b-card-footer>
      </b-tab>

      <b-tab no-body title="Картинка 2">
        <b-card-img bottom src="https://picsum.photos/600/200/?image=25" alt="Изображение 25"></b-card-img>
        <b-card-footer>Картинка 2 футер</b-card-footer>
      </b-tab>

      <b-tab no-body title="Картинка 3">
        <b-card-img bottom src="https://picsum.photos/600/200/?image=26" alt="Изображение 26"></b-card-img>
        <b-card-footer>Картинка 3 футер</b-card-footer>
      </b-tab>

      <b-tab title="Text">
        <b-card-title>На этой вкладке не установлено свойство <code>no-body</code></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>

<!-- b-tabs-card-no-body.vue -->

Примечание: Установка свойства no-body на <b-tab> не повлияет, если <b-tabs> не находится в режиме card (поскольку класс card-body устанавливается только в режиме card).

Смотрите Документацию по карточкам для получения более подробной информации о компонентах карточки.

Вариант таблеток

Вкладки по умолчанию используют стиль tabs. Просто добавьте свойство pills в <b-tabs> для варианта в стиле таблетки.

<div>
  <b-card no-body>
    <b-tabs pills card>
      <b-tab title="Вкладка 1" active><b-card-text>Содержимое вкладки 1</b-card-text></b-tab>
      <b-tab title="Вкладка 2"><b-card-text>Содержимое вкладки 2</b-card-text></b-tab>
    </b-tabs>
  </b-card>
</div>

<!-- b-tabs-pills.vue -->

Fill и justify

Заставьте ваши элементы управления <b-tabs> увеличить всю доступную ширину.

Fill

Чтобы пропорционально заполнить все доступное пространство элементами управления вкладками, установите свойство fill. Обратите внимание, что все горизонтальное пространство занято, но не все элементы управления имеют одинаковую ширину.

<div>
  <b-tabs content-class="mt-3" fill>
    <b-tab title="First" active><p>я первая вкладка</p></b-tab>
    <b-tab title="Second"><p>я вторая вкладка</p></b-tab>
    <b-tab title="Very, very long title"><p>Я вкладка с очень-очень длинным названием</p></b-tab>
    <b-tab title="Disabled" disabled><p>я отключенная вкладка!</p></b-tab>
  </b-tabs>
</div>

<!-- b-tabs-fill.vue -->

Justified

Для элементов управления одинаковой ширины используйте вместо этого свойство justified. Все горизонтальное пространство будет занято элементами управления, но в отличие от использования fill выше, все элементы управления будут иметь одинаковую ширину.

<div>
  <b-tabs content-class="mt-3" justified>
    <b-tab title="First" active><p>я первая вкладка</p></b-tab>
    <b-tab title="Second"><p>я вторая вкладка</p></b-tab>
    <b-tab title="Very, very long title"><p>Я вкладка с очень-очень длинным названием</p></b-tab>
    <b-tab title="Disabled" disabled><p>я отключенная вкладка!</p></b-tab>
  </b-tabs>
</div>

<!-- b-tabs-justified.vue -->

Выравнивание

Чтобы выровнять элементы управления вкладками, используйте свойство align. Доступные значения: left, center и right.

<div>
  <b-tabs content-class="mt-3" align="center">
    <b-tab title="First" active><p>я первая вкладка</p></b-tab>
    <b-tab title="Second"><p>я вторая вкладка</p></b-tab>
    <b-tab title="Disabled" disabled><p>я отключенная вкладка!</p></b-tab>
  </b-tabs>
</div>

<!-- b-tabs-alignment.vue -->

Нижнее размещение элементов управления вкладками

Визуально переместите элементы управления вкладками вниз, установив свойство end.

<div>
  <b-card no-body>
    <b-tabs pills card end>
      <b-tab title="Вкладка 1" active><b-card-text>Содержимое вкладки 1</b-card-text></b-tab>
      <b-tab title="Вкладка 2"><b-card-text>Содержимое вкладки 2</b-card-text></b-tab>
    </b-tabs>
  </b-card>
</div>

<!-- b-tabs-bottom.vue -->

Предостережения:

Нижнее размещение визуально лучше всего работает с вариантом pills. При использовании варианта tabs по умолчанию вы можете захотеть предоставить свои собственные настраиваемые классы стилей, поскольку Bootstrap v4 CSS предполагает, что вкладки всегда будут размещаться в верхней части содержимого вкладок.
Чтобы обеспечить лучший пользовательский интерфейс с расположенными внизу элементами управления, убедитесь, что содержимое каждой панели вкладок имеет одинаковую высоту и полностью помещается в видимом окне просмотра, в противном случае пользователю потребуется прокрутить вверх, чтобы прочитать начало содержимого вкладок.

Вертикальные вкладки

Разместите элементы управления вкладками с левой стороны, установив для свойства vertical значение true. Вертикальные вкладки работают как с включенным режимом card, так и без него.

<div>
  <b-card no-body>
    <b-tabs pills card vertical>
      <b-tab title="Вкладка 1" active><b-card-text>Содержимое вкладки 1</b-card-text></b-tab>
      <b-tab title="Вкладка 2"><b-card-text>Содержимое вкладки 2</b-card-text></b-tab>
      <b-tab title="Вкладка 3"><b-card-text>Содержимое вкладки 3</b-card-text></b-tab>
    </b-tabs>
  </b-card>
</div>

<!-- b-tabs-vertical.vue -->

Визуально переместите элементы управления вкладками вправо, установив свойство end:

<div>
  <b-card no-body>
    <b-tabs pills card vertical end>
      <b-tab title="Вкладка 1" active><b-card-text>Содержимое вкладки 1</b-card-text></b-tab>
      <b-tab title="Вкладка 2"><b-card-text>Содержимое вкладки 2</b-card-text></b-tab>
      <b-tab title="Вкладка 3"><b-card-text>Содержимое вкладки 3</b-card-text></b-tab>
    </b-tabs>
  </b-card>
</div>

<!-- b-tabs-vertical-end.vue -->

Ширина элементов управления вертикальной вкладкой увеличится, чтобы соответствовать ширине заголовка вкладки. Чтобы контролировать ширину, установите класс утилиты ширины через свойство nav-wrapper-class. Вы можете использовать такие значения, как w-25 (25% ширина), w-50 (50% ширина), и т. д., или классы столбцов, такие как col-2, col-3, и т. д.

<div>
  <b-card no-body>
    <b-tabs pills card vertical nav-wrapper-class="w-50">
      <b-tab title="Вкладка 1" active><b-card-text>Содержимое вкладки 1</b-card-text></b-tab>
      <b-tab title="Вкладка 2"><b-card-text>Содержимое вкладки 2</b-card-text></b-tab>
      <b-tab title="Вкладка 3"><b-card-text>Содержимое вкладки 3</b-card-text></b-tab>
    </b-tabs>
  </b-card>
</div>

<!-- b-tabs-vertical-width.vue -->

Вертикальное размещение визуально лучше всего работает с вариантом pills. При использовании варианта tabs по умолчанию вы можете захотеть предоставить свои собственные классы стилей, поскольку Bootstrap v4 CSS предполагает, что элементы управления вкладками всегда будут размещаться в верхней части содержимого вкладок.

Примечание: переполнение текста может произойти, если ваша ширина меньше, чем заголовок вкладки. Вам может понадобиться дополнительный индивидуальный стиль.

Активные классы

Чтобы применить классы к текущему активному элементу управления или вкладке, используйте свойства active-nav-item-class и active-tab-class.

<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>я первая вкладка</p></b-tab>
    <b-tab title="Second"><p>я вторая вкладка</p></b-tab>
    <b-tab title="Disabled" disabled><p>я отключенная вкладка!</p></b-tab>
  </b-tabs>
</div>

<!-- b-tabs-classes.vue -->

Анимация затухания

Затухание включено по умолчанию при смене вкладок. Его можно отключить с помощью свойства no-fade.

Добавить вкладки без содержимого

Если вы хотите добавить дополнительные вкладки, у которых нет содержимого, вы можете поместить их в слоты tabs-start или tabs-end:

<div>
  <b-tabs>
    <!-- Add your b-tab components here -->
    <template #tabs-end>
      <b-nav-item href="#" role="presentation" @click="() => {}">Другая вкладка</b-nav-item>
      <li role="presentation" class="nav-item align-self-center">Простой текст</li>
    </template>
  </b-tabs>
</div>

<!-- b-tabs-item-slot.vue -->

Используйте слот tabs-start, чтобы разместить дополнительные кнопки вкладок перед кнопками вкладок содержимого, и используйте слот tabs-end, чтобы разместить дополнительные кнопки вкладок после кнопок вкладок содержимого.

Примечание: дополнительные (бессодержательные) кнопки вкладок должны быть <b-nav-item> или иметь корневой элемент <li> и класс nav-item для правильного рендеринга и семантической разметки.

Добавить пользовательский контент в заголовок вкладки

Если вы хотите добавить пользовательский контент в заголовок вкладки, например HTML-код, иконки или другой неинтерактивный компонент Vue, это возможно с помощью слота title в <b-tab>.

<div>
  <b-tabs>
    <b-tab active>
      <template #title>
        <b-spinner type="grow" small></b-spinner> Я <i>кастомный</i> <strong>тайтл</strong>
      </template>
      <p class="p-3">Содержимое вкладки 1</p>
    </b-tab>

    <b-tab>
      <template #title>
        <b-spinner type="border" small></b-spinner> Вкладка 2
      </template>
      <p class="p-3">Содержимое вкладки 2</p>
    </b-tab>
  </b-tabs>
</div>

<!-- b-tabs-title-slot.vue -->

Не размещайте интерактивные элементы/компоненты внутри слота заголовка. Кнопка вкладки — это ссылка, которая не поддерживает дочерние интерактивные элементы в соответствии со спецификацией HTML5.

Применение пользовательских классов к сгенерированным навигационным вкладкам или таблеткам

Селекторы вкладок основаны на разметке nav Bootstrap v4 (например, ul.nav > li.nav-item > a.nav-link). В некоторых ситуациях вам может понадобиться добавить классы в <li> (элемент навигации) и/или <a> (ссылка навигации) для каждой вкладки отдельно. Для этого просто укажите имя класса в свойстве title-item-class (для элемента <li>) или в свойстве title-link-class (для элемента <a>). Значение может быть передано в виде строки или массива строк.

Примечание: Класс active автоматически применяется к элементу активных вкладок <a>. Для этого вам может потребоваться приспособить свои пользовательские классы.

<template>
  <div>
    <b-card no-body>
      <b-tabs v-model="tabIndex" card>
        <b-tab title="Вкладка 1" :title-link-class="linkClass(0)">Содержимое вкладки 1</b-tab>
        <b-tab title="Вкладка 2" :title-link-class="linkClass(1)">Содержимое вкладки 2</b-tab>
        <b-tab title="Вкладка 3" :title-link-class="linkClass(2)">Содержимое вкладки 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-with-classes.vue -->

Отложенная загрузка содержимого вкладки

Иногда предпочтительнее загружать компоненты и данные только при активации вкладки, а не загружать все вкладки (и связанные с ними данные) при рендеринге набора <b-tabs>.

Отдельные компоненты <b-tab> могут быть лениво загружены через свойство lazy, которое, если установлено, не монтирует содержимое <b-tab> пока оно не будет активировано (показано), и будет удалено. размонтируется, когда вкладка деактивирована (скрыта):

<b-tabs content-class="mt-3">
  <!-- This tabs content will always be mounted -->
  <b-tab title="Regular tab"><b-alert show>Я всегда смонтирован</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>Я смонтирован отложено!</b-alert></b-tab>
</b-tabs>

<!-- b-tabs-lazy-tab.vue -->

Также можно сделать все вкладки ленивыми, установив свойство lazy для родительского компонента <b-tabs>:

<b-tabs content-class="mt-3" lazy>
  <b-tab title="Вкладка 1"><b-alert show>Я смонтирован отложено!</b-alert></b-tab>
  <b-tab title="Вкладка 2"><b-alert show>Я смонтирован отложено тоже!</b-alert></b-tab>
</b-tabs>

<!-- b-tabs-lazy.vue -->

Клавиатурная навигация

Навигация с помощью клавиатуры включена по умолчанию для соответствия ARIA спискам таблиц, когда кнопка вкладки находится в фокусе.

Нажатие клавиши	Действие
`Left` или `Up`	Активировать предыдущую неотключенную вкладку
`Right` или `Down`	Активировать следующую неотключенную вкладку
`Shift`+`Left` или `Shift`+`Up`	Активировать первую неотключенную вкладку
`Home`	Активировать первую неотключенную вкладку
`Shift`+`Right` или `Shift`+`Down`	Активировать последнюю неотключенную вкладку
`End`	Активировать последнюю неотключенную вкладку
`Tab`	Переместить фокус на содержимое активной вкладки
`Shift`+`Tab`	Переместить фокус на предыдущий элемент управления на странице

Отключите навигацию с помощью клавиатуры, установив параметр no-key-nav. Поведение теперь по умолчанию будет обычной навигацией в браузере с помощью клавиши TAB.

Нажатие клавиши	Действие
`Tab`	Кнопка перехода к следующей вкладке или элемент управления на странице
`Shift`+`Tab`	Кнопка перехода на предыдущую вкладку или элемент управления на странице
`Enter` или `Space`	Активировать вкладку текущей сфокусированной кнопки

Программная активация и деактивация вкладок

Используйте <b-tabs> v-model, чтобы контролировать, какая вкладка активна, установив v-model на индекс (отсчитываемый от нуля) отображаемой вкладки (см. пример ниже).

В качестве альтернативы, вы можете использовать свойство active для каждой <b-tab> с модификатором .sync, чтобы активировать вкладку или определить, активна ли конкретная вкладка.

Каждый экземпляр <b-tab> также предоставляет два общедоступных метода для активации или деактивации вкладки. Это методы .activate() и .deactivate() соответственно. Если активация или деактивация не удалась (т. е. вкладка отключена или нет доступной вкладки для перемещения активации), то текущая активная вкладка останется активной, и метод вернет false. Вам понадобится ссылка на <b-tab>, чтобы использовать эти методы.

Предотвращение активации `<b-tab>`

Чтобы предотвратить активацию вкладки, просто установите свойство disabled в компоненте <b-tab>.

В качестве альтернативы вы можете прослушивать событие activate-tab, которое предоставляет возможность предотвратить активацию вкладки. Событие activate-tab генерируется с тремя аргументами:

newTabIndex: Индекс вкладки, которая будет активирована
prevTabIndex: Индекс текущей активной вкладки
bvEvent: Объект BvEvent. Вызов bvEvent.preventDefault(), чтобы предотвратить активацию newTabIndex

По соображениям доступности при использовании события activate-tab для предотвращения активации вкладки вы должны предоставить пользователю некоторые средства уведомления о том, почему вкладка не может быть активирована. Рекомендуется использовать атрибут disabled компонента <b-tab> вместо использования события activate-tab (поскольку disabled более интуитивно понятен для пользователей программ чтения с экрана).

Расширенные примеры

Внешние элементы управления с использованием `v-model`

<template>
  <div>
    <!-- Tabs with card integration -->
    <b-card no-body>
      <b-tabs v-model="tabIndex" small card>
        <b-tab title="General">Я первая исчезающая вкладка</b-tab>
        <b-tab title="Edit profile">
          я вторая вкладка
          <b-card>Я карточка во вкладке</b-card>
        </b-tab>
        <b-tab title="Premium Plan" disabled>Сибзамини!</b-tab>
        <b-tab title="Info">Я последняя вкладка</b-tab>
      </b-tabs>
    </b-card>

    <!-- Control buttons-->
    <div class="text-center">
      <b-button-group class="mt-2">
        <b-button @click="tabIndex--">Предыдущая</b-button>
        <b-button @click="tabIndex++">Следующая</b-button>
      </b-button-group>

      <div class="text-muted">Текущая вкладка: </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tabIndex: 1
      }
    }
  }
</script>

<!-- b-tabs-controls.vue -->

Динамические вкладки + вкладки в конце слота

<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">
          Содержимое вкладки 
          <b-button size="sm" variant="danger" class="float-right" @click="closeTab(i)">
            Закрыть вкладку
          </b-button>
        </b-tab>

        <!-- New Tab Button (Using tabs-end slot) -->
        <template #tabs-end>
          <b-nav-item role="presentation" @click.prevent="newTab" href="#"><b>+</b></b-nav-item>
        </template>

        <!-- Render this if no tabs -->
        <template #empty>
          <div class="text-center text-muted">
            Нет открытых вкладок<br>
            Откройте новую вкладку с помощью <b>+</b> кнопки выше.
          </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-dynamic.vue -->

Справочник по компонентам

`<b-tabs>`

Смотреть источник

<b-tabs> Свойства
<b-tabs> v-model
<b-tabs> Слоты
<b-tabs> События

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство (Click to sort ascending)	Тип (Click to sort ascending)	По умолчанию	Описание
`active-nav-item-class`	`Array` или `Object` или `String`		Класс (или классы) CSS для применения к активному элементу управления вкладкой элемента навигации
`active-tab-class`	`Array` или `Object` или `String`		Класс (или классы) CSS для применения к текущей активной вкладке
`align`	`String`		Выровняйте элементы навигации в навигации: 'start' (или 'left'), 'center', 'end' (или 'right')
`card`	`Boolean`	`false`	Если установлено значение true, вкладки отображают соответствующие стили, которые будут помещены в 'b-card'
`content-class`	`Array` или `Object` или `String`		Класс (или классы) CSS для применения к оболочке содержимого вкладки
`end`	`Boolean`	`false`	Поместите элементы управления вкладками внизу (горизонтальные вкладки) или справа (вертикальные вкладки)
`fill`	`Boolean`	`false`	Пропорционально заполняет все горизонтальное пространство элементами навигации. Все горизонтальное пространство занято, но не каждый элемент навигации имеет одинаковую ширину
`id`	`String`		Используется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
`justified`	`Boolean`	`false`	Заполняет все горизонтальное пространство элементами навигации, но, в отличие от 'fill', все элементы навигации имеют одинаковую ширину
`lazy`	`Boolean`	`false`	Лениво визуализировать содержимое b-tab при отображении
`nav-class`	`Array` или `Object` или `String`		CSS-класс (или классы) для применения к оболочке списка вкладок (nav)
`nav-wrapper-class`	`Array` или `Object` или `String`		CSS-класс (или классы) для применения к элементу-оболочке элементов управления вкладками
`no-fade`	`Boolean`	`false`	Если установлено значение `true`, отключает анимацию затухания/переход на компоненте
`no-key-nav`	`Boolean`	`false`	Отключить навигацию с помощью клавиатуры для элементов управления вкладками
`no-nav-style`	`Boolean`	`false`	Не отображать элементы управления вкладками со стилем вкладок
`pills`	`Boolean`	`false`	Отображает элементы навигации в виде кнопок-таблеток
`small`	`Boolean`	`false`	Делает навигацию меньше
`tag`	`String`	`'div'`	Указывает тег HTML для отображения вместо тега по умолчанию
`value` v-model	`Number`		В настоящее время видимый индекс вкладки (отсчитывается от нуля)
`vertical`	`Boolean`	`false`	Отображает элементы управления вкладками вертикально

`v-model`

Свойство	Событие
`value`	`input`

Слоты

Наименование	Описание
`default`	Содержимое (вкладки) для размещения в элементе вкладок
`empty`	Отображает этот слот, если нет вкладок
`tabs-end`	Дополнительные кнопки вкладок без содержимого вкладок, размещенные после кнопок вкладок содержимого
`tabs-start`	Дополнительные кнопки вкладок без содержимого вкладок, размещенные перед кнопками вкладок содержимого

События

Событие	Аргументы	Описание
`activate-tab` v2.1.0+	`newTabIndex` - Вкладка активируется (индекс на основе 0) `prevTabIndex` - Активная в данный момент вкладка (индекс отсчитывается от 0). Будет -1, если нет текущей активной вкладки `bvEvent` - Объект BvEvent. Вызов bvEvent.preventDefault() для отмены	Генерируется непосредственно перед отображением/активацией вкладки. Отменяемый
`changed`	`currentTabs` - Массив текущих экземпляров b-tab в порядке документа `previousTabs` - Массив предыдущих экземпляров b-tab в порядке документа	Генерируется при добавлении, удалении вкладки или изменении порядка вкладок
`input`	`tabIndex` - Индекс текущей выбранной вкладки (индекс на основе 0)	Генерируется при отображении вкладки. Используется для обновления v-model

`<b-tab>`

Смотреть источник

<b-tab> Свойства
<b-tab> Слоты
<b-tab> События

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство (Click to sort ascending)	Тип (Click to sort ascending)	По умолчанию	Описание
`active`	`Boolean`	`false`	При значении `true` переводит компонент в активное состояние с активным стилем.
`button-id`	`String`		Используйте определенный идентификатор для кнопки управления вкладками этой вкладки. Если он не указан, он будет сгенерирован автоматически
`disabled`	`Boolean`	`false`	Если установлено значение `true`, отключает функциональность компонента и переводит его в отключенное состояние.
`id`	`String`		Используется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
`lazy`	`Boolean`	`false`	Лениво визуализировать содержимое этой вкладки при отображении
`no-body`	`Boolean`	`false`	Когда для родительских b-tabs установлено свойство 'card', не отображает оболочку тела карточки
`tag`	`String`	`'div'`	Указывает тег HTML для отображения вместо тега по умолчанию
`title`	`String`		Текстовый контент для размещения в заголовке
`title-item-class`	`Array` или `Object` или `String`		CSS-класс (или классы) для применения к элементу 'li' кнопки управления вкладки
`title-link-attributes` v2.6.0+	`Object`		Атрибуты для применения к элементу внутренней ссылки кнопки управления вкладки
`title-link-class`	`Array` или `Object` или `String`		CSS-класс (или классы) для применения к элементу внутренней ссылки кнопки управления вкладки

Слоты

Наименование	Описание
`title`	Слот для пользовательского заголовка вкладки

События

Событие	Аргументы	Описание
`click`	`event` - Исходный объект события	Испускается при нажатии на вкладку или активируется навигацией с помощью клавиатуры

Импорт отдельных компонентов

Вы можете импортировать отдельные компоненты в свой проект с помощью следующих именованных экспортов:

Компонент	Именованный экспорт	Путь импорта
`<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)

Простое использование

Интеграция карточек

Вариант таблеток

Fill и justify

Fill

Justified

Выравнивание

Нижнее размещение элементов управления вкладками

Вертикальные вкладки

Активные классы

Анимация затухания

Добавить вкладки без содержимого

Добавить пользовательский контент в заголовок вкладки

Применение пользовательских классов к сгенерированным навигационным вкладкам или таблеткам

Отложенная загрузка содержимого вкладки

Клавиатурная навигация

Программная активация и деактивация вкладок

Предотвращение активации <b-tab>

Расширенные примеры

Внешние элементы управления с использованием v-model

Динамические вкладки + вкладки в конце слота

Справочник по компонентам

Свойства

v-model

Слоты

События

Свойства

Слоты

События

Импорт отдельных компонентов

Импортировать как плагин Vue.js

Предотвращение активации `<b-tab>`

Внешние элементы управления с использованием `v-model`

`v-model`