Кнопка

Используйте специальный компонент Bootstrap b-button для действий в формах, диалоговых окнах и т. д. Включает поддержку нескольких контекстных вариаций, размеров, состояний и т. д.

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

`<b-button>`

Функциональный компонент

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

<b-button> Псевдонимы компонентов
<b-button> Свойства
<b-button> Слоты
<b-button> События

Псевдонимы компонентов

<b-button> также может использоваться через следующие псевдонимы:

<b-btn>

Примечание: Псевдонимы компонентов доступны только при импорте всего BootstrapVue или при использовании подключаемого модуля группы компонентов.

Свойства

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

Свойство (Click to sort ascending)	Тип (Click to sort ascending)	По умолчанию	Описание
`active`	`Boolean`	`false`	При значении `true` переводит компонент в активное состояние с активным стилем.
`active-class`	`String`		<router-link> свойство: Настройка активного класса CSS, применяемого, когда ссылка активна. Обычно Вам нужно установить это имя класса 'active'
`append`	`Boolean`	`false`	<router-link> свойство: Настройка добавления свойства всегда добавляет относительный путь к текущему пути
`block`	`Boolean`	`false`	Отображает кнопку шириной 100% (расширяется до ширины родительского контейнера)
`disabled`	`Boolean`	`false`	Если установлено значение `true`, отключает функциональность компонента и переводит его в отключенное состояние.
`exact`	`Boolean`	`false`	<router-link> свойство: Поведение сопоставления активного класса по умолчанию включает сопоставление. Установка этого свойства заставляет режим точно соответствовать маршруту
`exact-active-class`	`String`		<router-link> свойство: Настройка активного класса CSS, применяемого, когда ссылка активна с точным соответствием. Обычно Вам нужно установить это имя класса 'active'
`exact-path`	`Boolean`	`false`	<router-link> prop: Allows matching only using the path section of the url, effectively ignoring the query and the hash sections
`exact-path-active-class`	`String`		<router-link> prop: Configure the active CSS class applied when the link is active with exact path match. Typically you will want to set this to class name 'active'
`href`	`String`		<b-link> свойство: Обозначает целевой URL-адрес ссылки для стандартных ссылок
`no-prefetch`	`Boolean`	`false`	<nuxt-link> свойство: Чтобы улучшить отзывчивость Ваших приложений Nuxt.js, когда ссылка будет отображаться в области просмотра, Nuxt.js автоматически выполнит предварительную загрузку страницы с разделением кода. Установка `no-prefetch` отключит эту функцию для конкретной ссылки
`pill`	`Boolean`	`false`	Отображает кнопку в стиле таблетки, если задано значение 'true'
`prefetch` v2.15.0+	`Boolean`	`null`	<nuxt-link> свойство: Чтобы улучшить отзывчивость Ваших приложений Nuxt.js, когда ссылка будет отображаться в области просмотра, Nuxt.js автоматически выполнит предварительную загрузку страницы с разделением кода. Установка для `prefetch` значения `true` или `false` перезапишет значение по умолчанию `router.prefetchLinks`
`pressed`	`Boolean`	`null`	Если установлено значение 'true', придает кнопке вид нажатой и добавляет атрибут 'aria-pressed="true"'. Если установлено значение `false`, добавляет атрибут 'aria-pressed="false"'. Свойство трех состояний. Синхронизируется с модификатором .sync
`rel`	`String`	`null`	<b-link> свойство: Устанавливает атрибут `rel` для отображаемой ссылки
`replace`	`Boolean`	`false`	<router-link> свойство: Установка свойства `replace` будет вызывать `router.replace()` вместо `router.push()` при нажатии, поэтому навигация не будет оставлять запись в истории
`router-component-name` v2.15.0+	`String`		<b-link> свойство: BootstrapVue автоматически определяет между `<router-link>` и `<nuxt-link>`. В случаях, когда Вы хотите использовать сторонний компонент ссылки на основе `<router-link>`, установите это свойство на имя компонента, например установите для него значение 'g-link', если Вы используете Gridsome (обратите внимание, что компоненту передаются только определенные свойства `<router-link>`)
`size`	`String`		Установите размер внешнего вида компонента. 'sm', 'md' (по умолчанию) или 'lg'
`squared`	`Boolean`	`false`	Отображает кнопку с нескругленными углами, если установлено значение 'true'
`tag`	`String`	`'button'`	Указывает тег HTML для отображения вместо тега по умолчанию
`target`	`String`	`'_self'`	<b-link> свойство: Устанавливает атрибут `target` для отображаемой ссылки
`to`	`Object` или `String`		<router-link> свойство: Обозначает целевой маршрут ссылки. При нажатии значение свойства будет передано в `router.push()` внутренне, поэтому значение может быть либо строкой, либо объектом дескриптора местоположения
`type`	`String`	`'button'`	Значение, которое нужно установить для атрибута кнопки 'type'. Может быть одним из 'button', 'submit' или 'reset'
`variant`	`String`	`'secondary'`	Применяет к компоненту один из вариантов цвета темы Bootstrap

<b-button> поддерживает генерацию <router-link> или <nuxt-link> компонент (при использовании Nuxt.js). Дополнительные сведения о свойствах, связанных с ссылками на маршрутизаторы (или Nuxt Link), смотрите в разделе справки по поддержке роутов.

Слоты

Наименование	Описание
`default`	Контент для размещения на кнопке

События

Событие	Аргументы	Описание
`click`	Нативный объект события клика	Генерируется при нажатии неотключенной кнопки

`<b-button-close>`

Функциональный компонент

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

<b-button-close> Псевдонимы компонентов
<b-button-close> Свойства
<b-button-close> Слоты
<b-button-close> События

Псевдонимы компонентов

<b-button-close> также может использоваться через следующие псевдонимы:

<b-btn-close>

Свойства

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

Свойство	Тип	По умолчанию	Описание
`aria-label`	`String`	`'Close'`	Устанавливает значение атрибута 'aria-label' для визуализированного элемента
`content` v2.3.0+	`String`	`'×'`	Содержание кнопки закрытия
`disabled`	`Boolean`	`false`	Если установлено значение `true`, отключает функциональность компонента и переводит его в отключенное состояние.
`text-variant`	`String`		Применяет к тексту один из вариантов цвета темы Bootstrap

Слоты

Наименование	Описание
`default`	Контент для размещения на кнопке. Переопределяет свойство `content`

События

Событие	Аргументы	Описание
`click`	Нативный объект события клика	Генерируется при нажатии неотключенной кнопки

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

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

Компонент	Именованный экспорт	Путь импорта
`<b-button>`	`BButton`	`bootstrap-vue`
`<b-button-close>`	`BButtonClose`	`bootstrap-vue`

Пример:

import { BButton } from 'bootstrap-vue'
Vue.component('b-button', BButton)

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

Этот плагин включает в себя все перечисленные выше отдельные компоненты. Плагины также включают псевдонимы любых компонентов.

Именованный экспорт	Путь импорта
`ButtonPlugin`	`bootstrap-vue`

Пример:

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