Группа списка

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

<b-list-group>
  <b-list-group-item>Cras justo odio</b-list-group-item>
  <b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
  <b-list-group-item>Morbi leo risus</b-list-group-item>
  <b-list-group-item>Porta ac consectetur ac</b-list-group-item>
  <b-list-group-item>Vestibulum at eros</b-list-group-item>
</b-list-group>

<!-- b-list-group.vue -->

Активные элементы

Установите свойство active в <b-list-group-item>, чтобы указать текущий активный выбор.

<b-list-group>
  <b-list-group-item>Cras justo odio</b-list-group-item>
  <b-list-group-item active>Dapibus ac facilisis in</b-list-group-item>
  <b-list-group-item>Morbi leo risus</b-list-group-item>
  <b-list-group-item>Porta ac consectetur ac</b-list-group-item>
  <b-list-group-item>Vestibulum at eros</b-list-group-item>
</b-list-group>

<!-- b-list-group-active.vue -->

Disabled items

Установите свойство disabled в <b-list-group-item>, чтобы оно отображалось отключенным (также работает с активными элементами, смотрите ниже).

<b-list-group>
  <b-list-group-item disabled>Cras justo odio</b-list-group-item>
  <b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
  <b-list-group-item>Morbi leo risus</b-list-group-item>
  <b-list-group-item disabled>Porta ac consectetur ac</b-list-group-item>
  <b-list-group-item>Vestibulum at eros</b-list-group-item>
</b-list-group>

<!-- b-list-group-disabled.vue -->

Элементы группы списка действий

Превратите <b-list-group-item> в действенную ссылку (<a href="...">), указав либо свойство href, либо свойство router-link to.

<b-list-group>
  <b-list-group-item href="#some-link">Отличная ссылка</b-list-group-item>
  <b-list-group-item href="#" active>Ссылка с активным состоянием</b-list-group-item>
  <b-list-group-item href="#">Ссылки на действия легко</b-list-group-item>
  <b-list-group-item href="#foobar" disabled>Отключенная ссылка</b-list-group-item>
</b-list-group>

<!-- b-list-group-link.vue -->

Или, если вы предпочитаете элементы <button> ссылкам, установите свойство button в значение true.

<b-list-group>
  <b-list-group-item button>Элемент кнопки</b-list-group-item>
  <b-list-group-item button>Я кнопка</b-list-group-item>
  <b-list-group-item button disabled>Отключенная кнопка</b-list-group-item>
  <b-list-group-item button>Это тоже кнопка</b-list-group-item>
</b-list-group>

<!-- b-list-group-button.vue -->

Примечания:

  • Когда свойство button имеет значение true, все свойства, связанные со ссылкой (кроме active) и свойство tag не будут иметь никакого эффекта.
  • Когда установлены href или to, свойство tag не действует.

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

Контекстные варианты

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

<b-list-group>
  <b-list-group-item>Элемент группы списка по умолчанию</b-list-group-item>
  <b-list-group-item variant="primary">Элемент группы основного списка</b-list-group-item>
  <b-list-group-item variant="secondary">Элемент группы вторичного списка</b-list-group-item>
  <b-list-group-item variant="success">Элемент группы списка успехов</b-list-group-item>
  <b-list-group-item variant="danger">Элемент группы списка опасностей</b-list-group-item>
  <b-list-group-item variant="warning">Элемент группы списка предупреждений</b-list-group-item>
  <b-list-group-item variant="info">Элемент группы информационного списка</b-list-group-item>
  <b-list-group-item variant="light">Элемент группы светлого списка</b-list-group-item>
  <b-list-group-item variant="dark">Элемент группы темного списка</b-list-group-item>
</b-list-group>

<!-- b-list-group-variant.vue -->

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

<b-list-group>
  <b-list-group-item href="#">Элемент группы списка по умолчанию</b-list-group-item>
  <b-list-group-item href="#" variant="primary">Элемент группы основного списка</b-list-group-item>
  <b-list-group-item href="#" variant="secondary">Элемент группы вторичного списка</b-list-group-item>
  <b-list-group-item href="#" variant="success">Элемент группы списка успехов</b-list-group-item>
  <b-list-group-item href="#" variant="danger">Элемент группы списка опасностей</b-list-group-item>
  <b-list-group-item href="#" variant="warning">Элемент группы списка предупреждений</b-list-group-item>
  <b-list-group-item href="#" variant="info">Элемент группы информационного списка</b-list-group-item>
  <b-list-group-item href="#" variant="light">Элемент группы светлого списка</b-list-group-item>
  <b-list-group-item href="#" variant="dark">Элемент группы темного списка</b-list-group-item>
</b-list-group>

<!-- b-list-group-variant-action.vue -->

Передача смысла вспомогательным технологиям

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

Со значками

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

<b-list-group>
  <b-list-group-item class="d-flex justify-content-between align-items-center">
    Cras justo odio
    <b-badge variant="primary" pill>14</b-badge>
  </b-list-group-item>

  <b-list-group-item class="d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <b-badge variant="primary" pill>2</b-badge>
  </b-list-group-item>

  <b-list-group-item class="d-flex justify-content-between align-items-center">
    Morbi leo risus
    <b-badge variant="primary" pill>1</b-badge>
  </b-list-group-item>
</b-list-group>

<!-- b-list-group-badges.vue -->

Список групп внутри карточек

Включите группы списков в карточки. Используйте свойство flush элемента <b-list-group> при использовании карточек с no-body, чтобы стороны группы списка были на одном уровне с карточкой.

<b-card-group deck>
  <b-card header="Карточка с группой списка">
    <b-list-group>
      <b-list-group-item href="#">Cras justo odio</b-list-group-item>
      <b-list-group-item href="#">Dapibus ac facilisis in</b-list-group-item>
      <b-list-group-item href="#">Vestibulum at eros</b-list-group-item>
    </b-list-group>

    <p class="card-text mt-2">
      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.
    </p>
  </b-card>

  <b-card no-body header="Карта с группой флеш-списков">
    <b-list-group flush>
      <b-list-group-item href="#">Cras justo odio</b-list-group-item>
      <b-list-group-item href="#">Dapibus ac facilisis in</b-list-group-item>
      <b-list-group-item href="#">Vestibulum at eros</b-list-group-item>
    </b-list-group>

    <b-card-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.
    </b-card-body>
  </b-card>
</b-card-group>

<!-- b-list-group-card.vue -->

Горизонтальные группы списка

Установите для параметра horizontal значение true, чтобы изменить расположение элементов группы списка с вертикального на горизонтальное во всех контрольных точках. В качестве альтернативы, установите horizontal на отзывчивую контрольную точку (sm, md, lg или xl), чтобы сделать группу списка горизонтальной, начиная с минимальной ширины этой контрольной точки. В настоящее время группы горизонтальных списков нельзя комбинировать с группами списков flush.

Совет: Хотите, чтобы элементы списка были одинаковой ширины в горизонтальном положении? Добавьте класс flex-fill к каждому элементу группы списка.

Всегда горизонтально:

<div>
  <b-list-group horizontal>
    <b-list-group-item>Cras justo odio</b-list-group-item>
    <b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
    <b-list-group-item>Morbi leo risus</b-list-group-item>
  </b-list-group>
</div>

<!-- b-list-group-horizontal.vue -->

Горизонтально в контрольной точке md и выше:

<div>
  <b-list-group horizontal="md">
    <b-list-group-item>Cras justo odio</b-list-group-item>
    <b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
    <b-list-group-item>Morbi leo risus</b-list-group-item>
  </b-list-group>
</div>

<!-- b-list-group-horizontal-md.vue -->

Пользовательский контент

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

<b-list-group>
  <b-list-group-item href="#" active class="flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Заголовок элемента группы списка</h5>
      <small>3 дня назад</small>
    </div>

    <p class="mb-1">
      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
    </p>

    <small>Donec id elit non mi porta.</small>
  </b-list-group-item>

  <b-list-group-item href="#" class="flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Заголовок элемента группы списка</h5>
      <small class="text-muted">3 дня назад</small>
    </div>

    <p class="mb-1">
      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
    </p>

    <small class="text-muted">Donec id elit non mi porta.</small>
  </b-list-group-item>

  <b-list-group-item href="#" disabled class="flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Отключенный элемент группы списка</h5>
      <small class="text-muted">3 дня назад</small>
    </div>

    <p class="mb-1">
      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
    </p>

    <small class="text-muted">Donec id elit non mi porta.</small>
  </b-list-group-item>
</b-list-group>

<!-- b-list-group-content.vue -->

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

Свойства

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

Свойство
Тип
По умолчанию
Описание
flush
BooleanfalseЕсли установлено, отображает группу списка в виде сплошного списка без левой и правой границ
horizontal
Boolean или StringfalseЕсли установлено, группа списка отображается горизонтально, а не вертикально по умолчанию
tag
String'div'Указывает тег HTML для отображения вместо тега по умолчанию

Слоты

Наименование
Описание
default Содержимое (элементы) для размещения в группе списка

Свойства

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

Свойство
(Click to sort ascending)
Тип
(Click to sort ascending)
По умолчанию
Описание
action
BooleanfalseКогда установлено, придайте элементу видимость наличия действия. Не требуется, когда используются свойства 'to', 'href' или 'button'
active
BooleanfalseПри значении `true` переводит компонент в активное состояние с активным стилем.
active-class
String<router-link> свойство: Настройка активного класса CSS, применяемого, когда ссылка активна. Обычно Вам нужно установить это имя класса 'active'
append
Booleanfalse<router-link> свойство: Настройка добавления свойства всегда добавляет относительный путь к текущему пути
button
BooleanfalseПри значении true элемент списка-группы отображается как элемент кнопки
disabled
BooleanfalseЕсли установлено значение `true`, отключает функциональность компонента и переводит его в отключенное состояние.
exact
Booleanfalse<router-link> свойство: Поведение сопоставления активного класса по умолчанию включает сопоставление. Установка этого свойства заставляет режим точно соответствовать маршруту
exact-active-class
String<router-link> свойство: Настройка активного класса CSS, применяемого, когда ссылка активна с точным соответствием. Обычно Вам нужно установить это имя класса 'active'
exact-path
Booleanfalse<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
Booleanfalse<nuxt-link> свойство: Чтобы улучшить отзывчивость Ваших приложений Nuxt.js, когда ссылка будет отображаться в области просмотра, Nuxt.js автоматически выполнит предварительную загрузку страницы с разделением кода. Установка `no-prefetch` отключит эту функцию для конкретной ссылки
prefetch
v2.15.0+
Booleannull<nuxt-link> свойство: Чтобы улучшить отзывчивость Ваших приложений Nuxt.js, когда ссылка будет отображаться в области просмотра, Nuxt.js автоматически выполнит предварительную загрузку страницы с разделением кода. Установка для `prefetch` значения `true` или `false` перезапишет значение по умолчанию `router.prefetchLinks`
rel
Stringnull<b-link> свойство: Устанавливает атрибут `rel` для отображаемой ссылки
replace
Booleanfalse<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()` внутренне, поэтому значение может быть либо строкой, либо объектом дескриптора местоположения
variant
StringПрименяет к компоненту один из цветовых вариантов темы Bootstrap

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

Слоты

Наименование
Описание
default Содержимое для размещения в элементе группы списка

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

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

Компонент
Именованный экспорт
Путь импорта
<b-list-group>BListGroupbootstrap-vue
<b-list-group-item>BListGroupItembootstrap-vue

Пример:

import { BListGroup } from 'bootstrap-vue'
Vue.component('b-list-group', BListGroup)

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

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

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

Пример:

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