Боковая панель

Пользовательский компонент BootstrapVue <b-sidebar>, также известный как off-canvas или side drawer, представляет собой переключаемое выдвижное поле с фиксированным положением, которое можно использовать для навигации, меню, деталей и т. д. Его можно расположить на любом слева (по умолчанию) или справа от области просмотра с дополнительной поддержкой фона.

Доступно в BootstrapVue с v2.10.0

Обзор

В <b-sidebar> слот по умолчанию с опциональной областью действия можно поместить практически любое содержимое, например текст, кнопки, формы, изображения или вертикальные элементы навигации.

Компонент поддерживает заголовок и встроенную кнопку закрытия, которую вы можете при желании отключить и указать свой собственный заголовок (при необходимости), и его можно легко переключать с помощью нашей директивы v-b-toggle.

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

<template>
  <div>
    <b-button v-b-toggle.sidebar-1>Переключить боковую панель</b-button>
    <b-sidebar id="sidebar-1" title="Sidebar" shadow>
      <div class="px-3 py-2">
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </p>
        <b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
      </div>
    </b-sidebar>
  </div>
</template>

<!-- b-sidebar.vue -->

Если содержимое выше доступной высоты области просмотра, вертикальная прокрутка будет автоматически включена с помощью CSS в теле боковой панели.

Стайлинг

Для управления внешним видом боковой панели предусмотрено несколько свойств.

Тайтл

Боковые панели должны иметь заголовок (особенно из соображений доступности). Легко установите заголовок, который появляется в заголовке, либо с помощью свойства title, либо через слот title. братите внимание, что слот title имеет приоритет над свойством title.

Если установлено свойство no-header, то ни свойство title, ни слот title не действуют.

Если вы не указываете заголовок, используйте свойства aria-label или aria-labelledby, чтобы указать доступный заголовок для боковой панели. Дополнительную информацию смотрите в разделе Специальные возможности ниже.

Размещение

По умолчанию боковая панель будет размещена в левой части окна просмотра. Установите для свойства right значение true, чтобы боковая панель отображалась с правой стороны окна просмотра.

<template>
  <div>
    <b-button v-b-toggle.sidebar-right>Переключить боковую панель</b-button>
    <b-sidebar id="sidebar-right" title="Sidebar" right shadow>
      <div class="px-3 py-2">
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </p>
        <b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
      </div>
    </b-sidebar>
  </div>
</template>

<!-- b-sidebar-right.vue -->

Варианты

Используйте свойства bg-variant и text-variant, чтобы управлять вариантом цвета темы фона и текста соответственно. Кроме того, вы можете применить стили или классы, чтобы задать цвет фона и текста.

<template>
  <div>
    <b-button v-b-toggle.sidebar-variant>Переключить боковую панель</b-button>
    <b-sidebar id="sidebar-variant" title="Sidebar" bg-variant="dark" text-variant="light" shadow>
      <div class="px-3 py-2">
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </p>
        <b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
      </div>
    </b-sidebar>
  </div>
</template>

<!-- b-sidebar-variant.vue -->

Стандартные варианты темы Bootstrap: 'white', 'light', 'dark', 'primary', 'secondary', 'success', 'danger', 'warning' и 'info'.

Вариант фона по умолчанию — 'light', а вариант текста по умолчанию — 'dark'.

Тень

Предпочитаете боковую панель с фоновой тенью? Установите свойство shadow в логическое значение true для средней тени, 'sm' для маленькой тени или 'lg' для большей тени. Установите значение false (по умолчанию) для отсутствия тени.

Границы

По умолчанию <b-sidebar> не имеет границ. Используйте классы вспомогательных бордеров, чтобы добавить границы к <b-sidebar> (через свойство sidebar-class 2.12.0+), или используйте переопределения стилей CSS.

<template>
  <div>
    <b-button v-b-toggle.sidebar-border>Переключить боковую панель</b-button>
    <b-sidebar id="sidebar-border" sidebar-class="border-right border-danger">
      <div class="px-3 py-2">
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </p>
        <b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
      </div>
    </b-sidebar>
  </div>
</template>

<!-- b-sidebar-border.vue -->

Ширина

По умолчанию ширина <b-sidebar> установлена на 320px (100% на экранах 'xs'). Просто укажите значение через свойство width (например, '180px', '20em' и т. д.), чтобы переопределить это значение по умолчанию. Максимальная ширина устанавливается на 100% через CSS.

Отступы

Боковая панель по умолчанию не имеет отступов. Вы можете применить служебные классы отступов к компоненту или служебные классы полей/отступов к содержимому боковой панели.

Отключить переход между слайдами

По умолчанию боковая панель будет использовать скользящий переход при отображении и скрытии. Вы можете отключить переход слайдов с помощью свойства no-slide.

Примечание: Определенный BootstrapVue эффект перехода этого компонента зависит от медиа-запроса prefers-reduced-motion. Дополнительную информацию смотрите в разделе с уменьшенным движением в нашей документации по специальным возможностям.

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

Z-индекс

Боковая панель имеет z-index по умолчанию, определенный в SCSS/CSS. В некоторых ситуациях вам может понадобиться использовать другой z-index, чтобы боковая панель отображалась поверх или под другим содержимым. Вы можете сделать это либо с помощью стилей CSS, либо с помощью свойства z-index.

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

Слот default позволяет вам предоставить основной контент для вашей боковой панели. Это опционально. Примеры в следующих разделах демонстрируют использование области слота по умолчанию.

Вы можете применять произвольные классы к разделу body через свойство body-class.

Хедер

По умолчанию <b-sidebar> имеет заголовок с необязательным заголовком и кнопку закрытия. Вы можете указать заголовок через свойство title или через опционально ограниченный слот title.

Если вы хотите предоставить полностью настраиваемый заголовок, вы можете использовать слот header с опциональной областью действия.

Вы можете применить произвольные классы к разделу заголовка с помощью свойства header-class, чтобы переопределить заполнение по умолчанию и т. д.

Скрытие заголовка по умолчанию

Вы можете отключить заголовок по умолчанию (включая кнопку закрытия) с помощью параметра no-header. Обратите внимание, что вам нужно будет указать способ закрытия боковой панели. Слот default имеет область действия, которая включает метод hide(), который можно использовать для закрытия боковой панели.

<template>
  <div>
    <b-button v-b-toggle.sidebar-no-header>Переключить боковую панель</b-button>
    <b-sidebar id="sidebar-no-header" aria-labelledby="sidebar-no-header-title" no-header shadow>
      <template #default="{ hide }">
        <div class="p-3">
          <h4 id="sidebar-no-header-title">Пользовательский хедер боковой панели</h4>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          </p>
          <nav class="mb-3">
            <b-nav vertical>
              <b-nav-item active @click="hide">Активная</b-nav-item>
              <b-nav-item href="#link-1" @click="hide">Ссылка</b-nav-item>
              <b-nav-item href="#link-2" @click="hide">Другая ссылка</b-nav-item>
            </b-nav>
          </nav>
          <b-button variant="primary" block @click="hide">Закрыть сайдбар</b-button>
        </div>
      </template>
    </b-sidebar>
  </div>
</template>

<!-- b-sidebar-no-header.vue -->

Футер

<b-sidebar> предоставляет слот footer (необязательно с ограниченной областью действия), чтобы вы могли предоставить контент, который отображается внизу боковой панели. Слот footer имеет область действия, которая включает метод hide(), который можно использовать для закрытия боковой панели.

<template>
  <div>
    <b-button v-b-toggle.sidebar-footer>Переключить боковую панель</b-button>
    <b-sidebar id="sidebar-footer" aria-label="Sidebar with custom footer" no-header shadow>
      <template #footer="{ hide }">
       <div class="d-flex bg-dark text-light align-items-center px-3 py-2">
        <strong class="mr-auto">Футер</strong>
        <b-button size="sm" @click="hide">Закрыть</b-button>
       </div>
      </template>
      <div class="px-3 py-2">
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </p>
        <b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
      </div>
    </b-sidebar>
  </div>
</template>

<!-- b-sidebar-footer.vue -->

Вы можете применять произвольные классы к разделу нижнего колонтитула с помощью свойства footer-class.

Отложенный рендеринг

В некоторых случаях вы можете не захотеть, чтобы содержимое отображалось, когда боковая панель не видна. Просто установите свойство lazy на <b-sidebar>. Когда lazy равно true, body и необязательный футер не будут отображаться (удалены из DOM) всякий раз, когда боковая панель закрыта.

Подложка

2.12.0+

Добавьте базовый фон, когда боковая панель открыта, с помощью свойства backdrop. Если установлено значение true, боковая панель будет показывать непрозрачный фон. Щелчок по фону закроет боковую панель, если для параметра no-close-on-backdrop не установлено значение true.

При желании (начиная с BootstrapVue v2.15.0+) вы можете использовать свойство backdrop-variant для управления вариантом цвета темы фона. Вариант фона по умолчанию — dark.

<template>
  <div>
    <b-button v-b-toggle.sidebar-backdrop>Переключить боковую панель</b-button>

    <b-sidebar
      id="sidebar-backdrop"
      title="Боковая панель с фоном"
      :backdrop-variant="variant"
      backdrop
      shadow
    >
      <div class="px-3 py-2">
        <b-form-group label="Backdrop variant" label-for="backdrop-variant">
          <b-form-select id="backdrop-variant" v-model="variant" :options="variants"></b-form-select>
        </b-form-group>
      </div>
    </b-sidebar>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        variant: 'dark',
        variants: [
          'transparent',
          'white',
          'light',
          'dark',
          'primary',
          'secondary',
          'success',
          'danger',
          'warning',
          'info',
        ]
      }
    }
  }
</script>

<!-- b-sidebar-backdrop.vue -->

Обратите внимание, что когда боковая панель открыта, все еще можно прокручивать тело (в отличие от поведения модальных окон). Когда фон включен, ограничение фокуса будет пытаться удерживать фокус в пределах боковой панели. Обратите внимание, что в редких случаях пользователи могут переместить фокус на элементы за пределами боковой панели.

Управление видимостью

Директива v-b-toggle

Использование директивы v-b-toggle является предпочтительным методом для открытия боковой панели, так как он автоматически обрабатывает применение атрибутов доступности aria-controls и aria-expanded для триггерного элемента. .

В большинстве примеров на этой странице используется директива v-b-toggle.

v-model

v-model отражает текущее состояние видимости боковой панели. Хотя его можно использовать для управления состоянием видимости боковой панели, рекомендуется использовать директиву v-b-toggle, чтобы показать боковую панель по соображениям доступности. Если вы используете v-model для отображения боковой панели, вы должны поместить атрибут aria-controls="id" (где id – это идентификатор боковой панели) в элементе триггера, а также установить aria-expanded (также в элементе триггера) в строку 'true' (если боковая панель открыта) или 'false' (если боковая панель закрыта).

v-model внутренне связана со свойством visible, а событие change обновляет v-model.

Закрытие при изменении $route

По умолчанию <b-sidebar> закрывается при изменении $route полный путь, включая запрос и хэш). Это может быть особенно удобно, если боковая панель находится за пределами вашего <router-view> и используется для навигации.

Вы можете отключить это поведение, установив для свойства no-close-on-route-change значение true.

События

Боковая панель будет генерировать событие shown, когда боковая панель откроется, и событие hidden, когда боковая панель будет закрыта.

Событие change используется для обновления v-model и генерируется всякий раз, когда изменяется состояние видимости боковой панели.

Доступность

<b-sidebar> предоставляет несколько специальных возможностей.

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

В некоторых случаях может потребоваться полностью отключить функцию принудительного фокуса. Вы можете сделать это, установив свойство no-enforce-focus, хотя обычно это не рекомендуется из соображений доступности.

Когда боковая панель открыта, пользователи могут нажать Esc, чтобы закрыть боковую панель. Чтобы отключить эту функцию, установите свойство no-close-on-esc в значение true. С включенным фоном вы можете использовать свойство no-close-on-backdrop, чтобы отключить функцию закрытия при щелчке фона.

Когда свойство backdrop имеет значение true, боковая панель будет пытаться ограничить фокус внутри боковой панели, а для боковой панели будет установлен атрибут aria-modal="true".

Если вы скрыли заголовок или не имеете заголовка для боковой панели, задайте либо строку aria-label, описывающую боковую панель, либо задайте aria-labelledby идентификатор элемента, содержащего заголовок. При использовании lazy свойства и у вас нет заголовка, используйте свойство aria-label, чтобы предоставить соответствующую строку для маркировки боковой панели.

Замечания по реализации

Пользовательский SCSS/CSS BootstrapVue требуется для правильного стиля и позиционирования боковой панели.

Вспомогательные классы Bootstrap v4 фона ('bg-*') и текста ('text-*') используются для управления цветом фона и шрифта соответственно.

Некоторые стили по умолчанию для <b-sidebar> можно настроить с помощью переменных SASS. Дополнительные сведения смотрите в документации по темам.

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

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

<b-sidebar>

v2.10.0+

Свойства

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

Свойство
(Click to sort ascending)
Тип
(Click to sort ascending)
По умолчанию
Описание
aria-label
StringУстанавливает значение атрибута `aria-label` для отображаемого элемента
aria-labelledby
StringИдентификатор элемента, который предоставляет метку для этого компонента. Используется как значение атрибута `aria-labelledby`
backdrop
v2.12.0+
BooleanfalseКогда `true`, показывает фон, когда боковая панель открыта
backdrop-variant
v2.15.0+
String'dark'Цвет варианта темы для фона боковой панели. По умолчанию 'dark'
bg-variant
String'light'Цвет варианта темы для фона боковой панели
body-class
Array или Object или StringКласс или классы, применяемые к основной части (ячейка по умолчанию) боковой панели
close-label
String`aria-label` для применения к встроенной кнопке закрытия. По умолчанию 'Close'
footer-class
Array или Object или StringКласс или классы, применяемые к необязательному слоту `footer`
footer-tag
v2.22.0+
String'footer'Укажите тег HTML для отображения вместо тега по умолчанию для футера
header-class
Array или Object или StringКласс или классы для применения к встроенному хедеру. Не действует, если установлен параметр `no-header`
header-tag
v2.22.0+
String'header'Укажите тег HTML для отображения вместо тега по умолчанию для заголовка
id
StringИспользуется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
lazy
BooleanfalseЕсли установлено значение `true`, содержимое боковой панели будет отображаться только тогда, когда боковая панель открыта
no-close-on-backdrop
v2.12.0+
BooleanfalseЕсли установлено значение `true`, отключает закрытие боковой панели, когда пользователь кликает фон. Требуется, чтобы свойство `backdrop` было установлено
no-close-on-esc
BooleanfalseЕсли установлено значение `true`, отключает закрытие боковой панели, когда пользователь нажимает ESC.
no-close-on-route-change
BooleanfalseЕсли установлено значение `true`, отключает закрытие боковой панели при изменении маршрута
no-enforce-focus
v2.17.0+
BooleanfalseОтключает процедуру принудительного фокуса, которая поддерживает фокус внутри боковой панели
no-header
BooleanfalseЕсли установлено значение `true` отключает отображение заголовка по умолчанию (включая кнопку закрытия)
no-header-close
BooleanfalseЕсли установлено значение `true` отключает отображение кнопки закрытия заголовка
no-slide
BooleanfalseЕсли установлено, отключает скользящую анимацию по умолчанию
right
BooleanfalseКогда `true`, боковая панель размещается справа от области просмотра
shadow
Boolean или StringfalseУстановите логическое значение `true` для средней тени, 'sm' для маленькой тени, 'lg' для большой тени или логическое значение `false` для отсутствия тени. По умолчанию нет тени
sidebar-class
v2.12.0+
Array или Object или StringКласс или классы, применяемые к оболочке содержимого боковой панели
tag
String'div'Указывает тег HTML для отображения вместо тега по умолчанию
text-variant
String'dark'Цвет варианта темы для текста боковой панели
title
StringТекстовое содержимое для размещения в заголовке по умолчанию. Слот title имеет приоритет
visible
v-model
BooleanfalseКогда `true`, открывается боковая панель. Это `v-model`
width
StringШирина CSS для боковой панели. По умолчанию '320px', как определено SCSS/CSS
z-index
Number или StringУкажите произвольное значение z-индекса, чтобы переопределить значение, определенное SCSS/CSS

v-model

Свойство
Событие
visiblechange

Слоты

Наименование
Область
Описание
default Контент для размещения в теле боковой панели
footer Содержимое для размещения в дополнительном футере
header v2.21.0+Контент для размещения в хедере
header-close НетСодержимое кнопки закрытия заголовка. По умолчанию `<b-icon-x>`
title Контент разместить в заголовке встроенной шапки. Имеет приоритет над свойством `title` prop

События

Событие
Аргументы
Описание
change
  1. visible - `true`, если боковая панель открыта, `false`, если она закрыта (или в процессе закрытия)
Генерируется всякий раз, когда изменяется видимость боковой панели. Используется для обновления `v-model`
hidden Выдается, когда боковая панель скрыта
shown Выдается при открытии боковой панели

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

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

Компонент
Именованный экспорт
Путь импорта
<b-sidebar>BSidebarbootstrap-vue

Пример:

import { BSidebar } from 'bootstrap-vue'
Vue.component('b-sidebar', BSidebar)

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

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

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

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

  • VBTogglePlugin

Пример:

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