Медиа

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

<div>
  <b-card>
    <b-media>
      <template #aside>
        <b-img blank blank-color="#ccc" width="64" alt="placeholder"></b-img>
      </template>

      <h5 class="mt-0">Заголовок медиа</h5>
      <p>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
        Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
        ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </p>
      <p>
        Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
        penatibus et magnis dis parturient montes, nascetur ridiculus mus.
      </p>

      <b-media>
        <template #aside>
          <b-img blank blank-color="#ccc" width="64" alt="placeholder"></b-img>
        </template>

        <h5 class="mt-0">Вложенное медиа</h5>
        <p class="mb-0">
          Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in
          faucibus.
        </p>
      </b-media>
    </b-media>
  </b-card>
</div>

<!-- b-media.vue -->

Использование

<div>
  <b-media>
    <template #aside>
      <img src="..." alt="Media Aside">
    </template>

    <h2>Тело медиа</h2>
    <p>Какой-то текст</p>

    <!-- b-[Optional: add media children here for nesting] -->
  </b-media>
</div>

Без тела (с подкомпонентами)

<div>
  <b-card>
    <b-media no-body>
      <b-media-aside vertical-align="center">
        <b-img blank blank-color="#ccc" width="64" height="128" alt="placeholder"></b-img>
      </b-media-aside>

      <b-media-body>
        <h5 class="mt-0">Заголовок медиа</h5>
        <p>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
          sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
          condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        </p>
        <p class="mb-0">
          Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
          natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        </p>

        <b-media>
          <template #aside>
            <b-img blank blank-color="#ccc" width="64" alt="placeholder"></b-img>
          </template>
          <h5 class="mt-0">Вложенное медиа</h5>
          Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in
          faucibus.
        </b-media>
      </b-media-body>
    </b-media>
  </b-card>
</div>

<!-- b-media-no-body.vue -->

Порядок

Измените порядок содержимого в медиа-объектах, добавив свойство right-align.

<div>
  <b-media right-align vertical-align="center">
    <template #aside>
      <b-img blank blank-color="#ccc" width="80" alt="placeholder"></b-img>
    </template>
    <h5 class="mt-0 mb-1">Медиа-объект</h5>
    <p class="mb-0">
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
      Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
      nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </p>
  </b-media>
</div>

<!-- b-media-order.vue -->

Вложенность

Вы можете легко вложить медиа-объекты, включив другой <b-media> в тело родителя.

Вертикальное выравнивание

Aside может быть выровнен по вертикали с помощью vertical-align, должно быть либо top, center или end. По умолчанию top.

Медиа-список

Поскольку у медиа-объекта очень мало структурных требований, вы также можете использовать эти компоненты в качестве HTML-элементов списка. В вашем <ul> или <ol> добавьте класс list-unstyled, чтобы удалить все стили списка браузера по умолчанию, а затем используйте компонент <b-media> со свойством tag, установленным в li. Как всегда, используйте утилиты интервалов везде, где это необходимо для точной настройки.

<div>
  <ul class="list-unstyled">
    <b-media tag="li">
      <template #aside>
        <b-img blank blank-color="#abc" width="64" alt="placeholder"></b-img>
      </template>
      <h5 class="mt-0 mb-1">Медиа-объект на основе списка</h5>
      <p class="mb-0">
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
        Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
        ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </p>
    </b-media>

    <b-media tag="li" class="my-4">
      <template #aside>
       <b-img blank blank-color="#cba" width="64" alt="placeholder"></b-img>
      </template>

      <h5 class="mt-0 mb-1">Медиа-объект на основе списка</h5>
      <p class="mb-0">
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
        Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
        ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </p>
    </b-media>

    <b-media tag="li">
      <template #aside>
        <b-img blank blank-color="#bac" width="64" alt="placeholder"></b-img>
      </template>

      <h5 class="mt-0 mb-1">Медиа-объект на основе списка</h5>
      <p class="mb-0">
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
        Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
        ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </p>
    </b-media>
  </ul>
</div>

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

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

Свойства

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

Свойство
Тип
По умолчанию
Описание
no-body
BooleanfalseЕсли установлено, не отображает оболочку 'b-media-body' вокруг содержимого слота по умолчанию
right-align
BooleanfalseРасположите слот 'aside' справа. По умолчанию слева
tag
String'div'Указывает тег HTML для отображения вместо тега по умолчанию
vertical-align
String'top'Вертикальное выравнивание слота 'aside': 'start' (или 'top'), 'center', или 'end' (или 'bottom')

Слоты

Наименование
Описание
aside Media aside
default Контент для размещения в медиа-элементе

Свойства

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

Свойство
Тип
По умолчанию
Описание
right
BooleanfalseРасположите 'aside' справа. По умолчанию слева
tag
String'div'Указывает тег HTML для отображения вместо тега по умолчанию
vertical-align
String'top'Вертикальное выравнивание 'aside': 'start' (или 'top'), 'center', или 'end' (или 'bottom')

Слоты

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

Свойства

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

Свойство
Тип
По умолчанию
Описание
tag
String'div'Указывает тег HTML для отображения вместо тега по умолчанию

Слоты

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

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

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

Компонент
Именованный экспорт
Путь импорта
<b-media>BMediabootstrap-vue
<b-media-aside>BMediaAsidebootstrap-vue
<b-media-body>BMediaBodybootstrap-vue

Пример:

import { BMedia } from 'bootstrap-vue'
Vue.component('b-media', BMedia)

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

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

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

Пример:

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