Панель навигации

Компонент <b-navbar> представляет собой оболочку, которая размещает брендинг, навигацию и другие элементы в сжатом заголовке. Его легко расширять, а благодаря компоненту <b-collapse> он может легко интегрировать адаптивное поведение.

Пример:

<div>
  <b-navbar toggleable="lg" type="dark" variant="info">
    <b-navbar-brand href="#">Панель навигации</b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item href="#">Ссылка</b-nav-item>
        <b-nav-item href="#" disabled>Отключено</b-nav-item>
      </b-navbar-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-form>
          <b-form-input size="sm" class="mr-sm-2" placeholder="Поиск"></b-form-input>
          <b-button size="sm" class="my-2 my-sm-0" type="submit">Поиск</b-button>
        </b-nav-form>

        <b-nav-item-dropdown text="Язык" right>
          <b-dropdown-item href="#">EN</b-dropdown-item>
          <b-dropdown-item href="#">ES</b-dropdown-item>
          <b-dropdown-item href="#">RU</b-dropdown-item>
          <b-dropdown-item href="#">FA</b-dropdown-item>
        </b-nav-item-dropdown>

        <b-nav-item-dropdown right>
          <!-- Using 'button-content' slot -->
          <template #button-content>
            <em>Пользователь</em>
          </template>
          <b-dropdown-item href="#">Профиль</b-dropdown-item>
          <b-dropdown-item href="#">Выйти</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>

<!-- b-navbar.vue -->

Цветовые схемы

<b-navbar> поддерживает стандартные доступные варианты цвета фона Bootstrap v4. Установите свойство variant на одно из следующих значений, чтобы изменить цвет фона: primary, success, info, warning, danger, dark или light.

Управляйте цветом текста, установив свойство type в значение light для использования со светлыми вариантами цвета фона или dark для вариантов цвета темного фона.

Размещение

Управляйте размещением панели навигации, установив один из двух свойств:

свойство	тип	по умолчанию	описание
`fixed`	String	`null`	Установите `top` для закрепления в верхней части области просмотра или `bottom`, для фиксации в нижней части области просмотра.
`sticky`	Boolean	`false`	Установите значение `true`, чтобы при прокрутке панель навигации оставалась в верхней части области просмотра (или родительского контейнера, для которого установлено `position: relative`).

Примечания:

Фиксированное позиционирование использует CSS position: fixed. Возможно, вам потребуется настроить верхний/нижний отступ или поля документа.
CSS position: sticky (используется для sticky) не полностью поддерживается в каждом браузере. Для браузеров, которые не поддерживают position: sticky, будет изначально использоваться position: relative.

Поддерживаемый контент

Панели навигации поставляются со встроенной поддержкой нескольких подкомпонентов. При необходимости выберите из следующего:

<b-navbar-brand> для названия вашей компании, продукта или проекта.
<b-navbar-toggle> для использования с компонентом <b-collapse is-nav>.
<b-collapse is-nav> для группировки и скрытия содержимого панели навигации родительской контрольной точкой.
<b-navbar-nav> для полноразмерной и облегченной навигации (включая поддержку раскрывающихся списков). Поддерживаются следующие подкомпоненты внутри <b-navbar-nav>:
- <b-nav-item> для действий по ссылке (и ссылке-роутера)
- <b-nav-item-dropdown> для выпадающих меню навигации
- <b-nav-text> для добавления вертикально центрированных строк текста.
- <b-nav-form> для любых элементов управления и действий формы.

<b-navbar-brand> создает ссылку, если указано href, или <router-link>, если указано to. Если ни один из них не указан, он отображается как тег <div>. Вы можете переопределить тип тега, установив свойство tag для элемента, который вы хотите отобразить:

<div>
  <!-- As a link -->
  <b-navbar variant="faded" type="light">
    <b-navbar-brand href="#">BootstrapVue</b-navbar-brand>
  </b-navbar>
</div>

<!-- b-navbar-brand-link.vue -->

<div>
  <!-- As a heading -->
  <b-navbar variant="faded" type="light">
    <b-navbar-brand tag="h1" class="mb-0">BootstrapVue</b-navbar-brand>
  </b-navbar>
</div>

<!-- b-navbar-brand-heading.vue -->

Добавление изображений в <b-navbar-brand>, скорее всего, всегда потребует пользовательских стилей или утилит для правильного размера. Вот несколько примеров для демонстрации:

<div>
  <!-- Just an image -->
  <b-navbar variant="faded" type="light">
    <b-navbar-brand href="#">
      <img src="https://placekitten.com/g/30/30" alt="Kitten">
    </b-navbar-brand>
  </b-navbar>
</div>

<!-- b-navbar-brand-image.vue -->

<div>
  <!-- Image and text -->
  <b-navbar variant="faded" type="light">
    <b-navbar-brand href="#">
      <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten">
      BootstrapVue
    </b-navbar-brand>
  </b-navbar>
</div>

<!-- b-navbar-brand-image-and-text.vue -->

Навигационные ссылки на панели навигации основаны на родительском компоненте <b-navbar-nav> и требуют использования переключателя <b-collapse is-nav> и <b-nav-toggle> для правильного адаптивного стиля. Навигация в навигационных панелях также будет увеличиваться, чтобы занимать как можно больше горизонтального пространства, чтобы содержимое вашей навигационной панели было надежно выровнено.

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

<b-nav-item> для действий по ссылке (и router-link).
<b-nav-text> для добавления вертикально центрированных строк текста.
<b-nav-item-dropdown> для выпадающих меню панели навигации.
<b-nav-form> для добавления простых форм на панель навигации.

`<b-nav-item>`

<b-nav-item> — это компонент основной ссылки (и <router-link>). Предоставление значения свойства to будет генерировать <router-link>, а предоставление значения свойства href будет генерировать стандартную ссылку.

Установите свойство active для <b-nav-item>, чтобы выделить элемент как активную страницу. Отключите элемент <b-nav-item>, установив для свойства disabled значение true.

Обрабатывайте события кликов, указав обработчик для события @click на <b-nav-item>.

`<b-nav-text>`

Панели навигации могут содержать фрагменты текста с помощью <b-nav-text>. Этот компонент регулирует вертикальное выравнивание и горизонтальный интервал для строк текста.

<div>
  <b-navbar toggleable="sm" type="light" variant="light">
    <b-navbar-toggle target="nav-text-collapse"></b-navbar-toggle>

    <b-navbar-brand>BootstrapVue</b-navbar-brand>

    <b-collapse id="nav-text-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-text>Navbar text</b-nav-text>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>

<!-- b-navbar-text.vue -->

Информацию об использовании <b-nav-item-dropdown> смотрите в документации <b-dropdown>. Обратите внимание, что раздельные раскрывающиеся списки не поддерживаются в <b-navbar> и <b-navbar-nav>.

<div>
  <b-navbar type="dark" variant="dark">
    <b-navbar-nav>
      <b-nav-item href="#">Главная</b-nav-item>

      <!-- Navbar dropdowns -->
      <b-nav-item-dropdown text="Язык" right>
        <b-dropdown-item href="#">EN</b-dropdown-item>
        <b-dropdown-item href="#">ES</b-dropdown-item>
        <b-dropdown-item href="#">RU</b-dropdown-item>
        <b-dropdown-item href="#">FA</b-dropdown-item>
      </b-nav-item-dropdown>

      <b-nav-item-dropdown text="Пользователь" right>
        <b-dropdown-item href="#">Аккаунт</b-dropdown-item>
        <b-dropdown-item href="#">Настройки</b-dropdown-item>
      </b-nav-item-dropdown>
    </b-navbar-nav>
  </b-navbar>
</div>

<!-- b-navbar-dropdown.vue -->

`<b-nav-form>`

Используйте <b-nav-form>, чтобы разместить встроенные элементы управления формой на панели навигации.

<div>
  <b-navbar type="light" variant="light">
    <b-nav-form>
      <b-form-input class="mr-sm-2" placeholder="Поиск"></b-form-input>
      <b-button variant="outline-success" class="my-2 my-sm-0" type="submit">Поиск</b-button>
    </b-nav-form>
  </b-navbar>
</div>

<!-- b-navbar-form.vue -->

Группы ввода также работают:

<div>
  <b-navbar type="light" variant="light">
    <b-nav-form>
      <b-input-group prepend="@">
        <b-form-input placeholder="Username"></b-form-input>
      </b-input-group>
    </b-nav-form>
  </b-navbar>
</div>

<!-- b-navbar-form-inputs.vue -->

Панели навигации по умолчанию не реагируют, но вы можете легко изменить их, чтобы изменить это. Отзывчивое поведение зависит от нашего компонента <b-collapse>.

Оберните компоненты <b-navbar-nav> в <b-collapse is-nav> (не забудьте установить свойство is-nav!), чтобы указать содержимое, которое будет сворачиваться на основе определенной контрольной точки. Присвойте документу уникальное значение id в <b-collapse>.

Используйте компонент <b-navbar-toggle>, чтобы управлять компонентом сворачивания, и установите свойство target в <b-navbar-toggle> на id в <b-collapse>.

Установите свойство toggleable на <b-navbar> на желаемую контрольную точку, в которой вы хотите, чтобы контент автоматически расширялся. Возможные значения toggleable: sm, md, lg и xl. Установка toggleable в true (или пустая строка) приведет к тому, что панель навигации всегда будет свернута, а установка ее в false (по умолчанию) отключит свертывание (всегда раскрывается).

Компоненты <b-navbar-toggle> по умолчанию выравниваются по левому краю, но если они следуют за родственным элементом, например <b-navbar-brand>, они автоматически выравниваются по правому краю. Изменение разметки на противоположное приведет к обратному размещению переключателя.

Смотрите первый пример на этой странице для справки, а также смотрите <b-collapse> для получения подробной информации о компоненте сворачивания.

Помимо управления сворачиванием, <b-navbar-toggle> можно также использовать для переключения видимости компонента <b-sidebar>. Просто укажите идентификатор <b-sidebar> через свойство target.

Внутри <b-navbar-toggle> используется директива v-b-toggle.

Пользовательский переключатель панели навигации

<b-navbar-toggle> отображает по умолчанию Bootstrap v4 гамбургер (который является фоновым изображением SVG). Вы можете предоставить свой собственный контент (например, значок) через слот default с необязательной областью действия. Область слота по умолчанию содержит свойство expanded, которое будет true, когда свертывание расширяется, или false, когда сворачивание свертывается.

Обратите внимание, что свойство expanded область видимости работает только при предоставлении свойства target в виде string, а не array.

<template>
  <b-navbar toggleable type="dark" variant="dark">
    <b-navbar-brand href="#">Панель навигации</b-navbar-brand>

    <b-navbar-toggle target="navbar-toggle-collapse">
      <template #default="{ expanded }">
        <b-icon v-if="expanded" icon="chevron-bar-up"></b-icon>
        <b-icon v-else icon="chevron-bar-down"></b-icon>
      </template>
    </b-navbar-toggle>

    <b-collapse id="navbar-toggle-collapse" is-nav>
      <b-navbar-nav class="ml-auto">
        <b-nav-item href="#">Ссылка 1</b-nav-item>
        <b-nav-item href="#">Ссылка 2</b-nav-item>
        <b-nav-item href="#" disabled>Отключено</b-nav-item>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</template>
<!-- b-navbar-toggle-slot.vue -->

Печать

Панели навигации по умолчанию скрыты при печати. Заставьте их распечатать, установив свойство print.

Смотрите также

Компонент <b-collapse>
Компонент <b-sidebar>
Директива v-b-toggle
Документация <b-nav> для дополнительных компонентов и псевдонимов подкомпонентов

Обратитесь к справочной странице Поддержка маршрутизатора для конкретных свойств маршрутизатора.

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

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

<b-navbar> Свойства
<b-navbar> Слоты

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

Свойство	Тип	По умолчанию	Описание
`fixed`	`String`		Установите значение 'top', чтобы зафиксировать в верхней части окна просмотра, или 'bottom', чтобы зафиксировать в нижней части окна просмотра
`print`	`Boolean`	`false`	Панели навигации по умолчанию скрыты при печати. Когда это свойство установлено, она будет напечатана
`sticky`	`Boolean`	`false`	Установите значение true, чтобы при прокрутке панель навигации оставалась в верхней части области просмотра (или родительского контейнера с установленным положением: относительное)
`tag`	`String`	`'nav'`	Указывает тег HTML для отображения вместо тега по умолчанию
`toggleable`	`Boolean` или `String`	`false`	Установите значение 'true' для всегда свернутой панели навигации или для определенной контрольной точки, в которой панель навигации будет развернута: 'sm', 'md', 'lg' или 'xl'
`type`	`String`	`'light'`	Управляйте цветом текста, установив значение 'light' для использования со светлыми вариантами цвета фона или 'dark' для вариантов темного цвета фона
`variant`	`String`		Применяет к компоненту один из цветовых вариантов темы Bootstrap

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

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

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

<b-navbar-nav> Свойства
<b-navbar-nav> Слоты

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

Свойство	Тип	По умолчанию	Описание
`align`	`String`		Выровняйте элементы навигации в навигации: 'start' (или 'left'), 'center', 'end' (или 'right')
`fill`	`Boolean`	`false`	Пропорционально заполняет все горизонтальное пространство элементами навигации. Все горизонтальное пространство занято, но не каждый элемент навигации имеет одинаковую ширину
`justified`	`Boolean`	`false`	Заполняет все горизонтальное пространство элементами навигации, но, в отличие от 'fill', все элементы навигации имеют одинаковую ширину
`small`	`Boolean`	`false`	Делает навигацию меньше
`tag`	`String`	`'ul'`	Указывает тег HTML для отображения вместо тега по умолчанию

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

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

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

<b-navbar-brand> Свойства
<b-navbar-brand> Слоты

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

Свойство (Click to sort ascending)	Тип (Click to sort ascending)	По умолчанию	Описание
`active`	`Boolean`	`false`	При значении `true` переводит компонент в активное состояние с активным стилем.
`active-class`	`String`		<router-link> свойство: Настройка активного класса CSS, применяемого, когда ссылка активна. Обычно Вам нужно установить это имя класса 'active'
`append`	`Boolean`	`false`	<router-link> свойство: Настройка добавления свойства всегда добавляет относительный путь к текущему пути
`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` отключит эту функцию для конкретной ссылки
`prefetch` v2.15.0+	`Boolean`	`null`	<nuxt-link> свойство: Чтобы улучшить отзывчивость Ваших приложений Nuxt.js, когда ссылка будет отображаться в области просмотра, Nuxt.js автоматически выполнит предварительную загрузку страницы с разделением кода. Установка для `prefetch` значения `true` или `false` перезапишет значение по умолчанию `router.prefetchLinks`
`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>`)
`tag`	`String`	`'div'`	Указывает тег HTML для отображения вместо тега по умолчанию
`target`	`String`	`'_self'`	<b-link> свойство: Устанавливает атрибут `target` для отображаемой ссылки
`to`	`Object` или `String`		<router-link> свойство: Обозначает целевой маршрут ссылки. При нажатии значение свойства будет передано в `router.push()` внутренне, поэтому значение может быть либо строкой, либо объектом дескриптора местоположения

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

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

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

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

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

<b-nav-toggle>

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

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

Свойство	Тип	По умолчанию	Описание
`disabled` v2.15.0+	`Boolean`	`false`	Когда `true`, отключает кнопку переключения панели навигации и добавляет к кнопке класс `disabled`
`label`	`String`	`'Toggle navigation'`	Строка для размещения в атрибуте переключателя 'aria-label'
`target` Обязательный	`Array` или `String`		ID (или массив ID) компонентов сворачивания/боковой панели, которые следует переключать

Наименование	Область	Описание
`default`		Альтернативный контент для замены гамбургера Bootstrap по умолчанию

Событие	Аргументы	Описание
`click`	Native click event object	Генерируется при нажатии на переключатель

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

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

Компонент	Именованный экспорт	Путь импорта
`<b-navbar>`	`BNavbar`	`bootstrap-vue`
`<b-navbar-nav>`	`BNavbarNav`	`bootstrap-vue`
`<b-navbar-brand>`	`BNavbarBrand`	`bootstrap-vue`
`<b-navbar-toggle>`	`BNavbarToggle`	`bootstrap-vue`

Пример:

import { BNavbar } from 'bootstrap-vue'
Vue.component('b-navbar', BNavbar)

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

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

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

Этот плагин также автоматически включает следующие плагины:

NavPlugin
DropdownPlugin
CollapsePlugin

Пример:

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

Панель навигации

Цветовые схемы

Размещение

Поддерживаемый контент

`<b-navbar-brand>`

`<b-navbar-nav>`

`<b-nav-item>`

`<b-nav-text>`

`<b-nav-form>`

`<b-navbar-toggle>` и `<b-collapse is-nav>`

Пользовательский переключатель панели навигации

Печать

Смотрите также

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

`<b-navbar>`

Свойства

Слоты

`<b-navbar-nav>`

Свойства

Слоты

`<b-navbar-brand>`

Свойства

Слоты

`<b-navbar-toggle>`

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

Свойства

Слоты

События

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

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

Цветовые схемы

Размещение

Поддерживаемый контент

<b-navbar-brand>

<b-navbar-nav>

<b-nav-item>

<b-nav-text>

<b-nav-item-dropdown>

<b-nav-form>

<b-navbar-toggle> и <b-collapse is-nav>

Пользовательский переключатель панели навигации

Печать

Смотрите также

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

Свойства

Слоты

Свойства

Слоты

Свойства

Слоты

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

Свойства

Слоты

События

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

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

`<b-navbar-brand>`

`<b-navbar-nav>`

`<b-nav-item>`

`<b-nav-text>`

`<b-nav-item-dropdown>`

`<b-nav-form>`

`<b-navbar-toggle>` и `<b-collapse is-nav>`