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

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

<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 -->

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

`<b-list-group>`

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

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

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

Свойства

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

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

Слоты

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

`<b-list-group-item>`

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

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

<b-list-group-item> Свойства
<b-list-group-item> Слоты

Свойства

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

Свойство (Click to sort ascending)	Тип (Click to sort ascending)	По умолчанию	Описание
`action`	`Boolean`	`false`	Когда установлено, придайте элементу видимость наличия действия. Не требуется, когда используются свойства 'to', 'href' или 'button'
`active`	`Boolean`	`false`	При значении `true` переводит компонент в активное состояние с активным стилем.
`active-class`	`String`		<router-link> свойство: Настройка активного класса CSS, применяемого, когда ссылка активна. Обычно Вам нужно установить это имя класса 'active'
`append`	`Boolean`	`false`	<router-link> свойство: Настройка добавления свойства всегда добавляет относительный путь к текущему пути
`button`	`Boolean`	`false`	При значении true элемент списка-группы отображается как элемент кнопки
`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()` внутренне, поэтому значение может быть либо строкой, либо объектом дескриптора местоположения
`variant`	`String`		Применяет к компоненту один из цветовых вариантов темы Bootstrap

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

Слоты

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

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

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

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

Пример:

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

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

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

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

Пример:

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