BootstrapVue - Медиа и модальные окна

Чтобы создавать красивые приложения Vue, нам нужно стилизовать наши компоненты.

Чтобы облегчить себе жизнь, мы можем использовать компоненты со встроенными стилями.

В этой статье мы рассмотрим, как добавлять мультимедийные и модальные компоненты.

СМИ

Мы можем добавлять компоненты, чтобы показать медиа, которые находятся рядом с другим компонентом.

Для этого мы добавляем компонент b-media.

Мы можем использовать его следующим образом:

<template>
  <div id="app">
    <b-media>
      <template v-slot:aside>
        <b-img blank blank-color="#ccc" width="50" alt="placeholder"></b-img>
      </template>
      <h5 class="mt-0">Title</h5>
      <p>foo</p>
      <p>bar</p>
    </b-media>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Мы помещаем что-то в слот aside, как указано в директиве v-slot:aside.

Вставляем изображение внутрь.

Вне него мы добавляем текст.

aside поместит изображение слева, а текст - справа.

Мы также можем вложить их, чтобы написать:

<template>
  <div id="app">
    <b-media>
      <template v-slot:aside>
        <b-img blank blank-color="#ccc" width="50" alt="placeholder"></b-img>
      </template>
      <h5 class="mt-0">Title</h5>
      <p>foo</p>
      <b-media>
        <template v-slot:aside>
          <b-img blank blank-color="green" width="50" alt="placeholder"></b-img>
        </template>
        <h5 class="mt-0">Nested Media</h5>
        <p class="mb-0">
          bar
        </p>
      </b-media>
    </b-media>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Затем у нас есть еще один b-media компонент внутри внешнего.

Выровнять изображение

Мы можем выровнять изображения так, как нам нравится.

Для этого мы используем компонент b-media-aside с опорой vertical-align.

Например, мы можем написать:

<template>
  <div id="app">
    <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 class="ml-3">foo</b-media-body>
    </b-media>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

У нас есть компонент b-media-aside для размещения изображения с левой стороны.

vertica-align='center' сделает изображение вертикальным по центру.

b-media-body создайте тело справа от изображения.

порядок

Мы можем изменить порядок изображения и текста с помощью свойства right-align.

Например, мы можем написать:

<template>
  <div id="app">
    <b-media right-align>
      <template v-slot:aside>
        <b-img blank blank-color="#ccc" width="30" alt="placeholder"></b-img>
      </template>
<p>foo</p>
    </b-media>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Теперь у нас справа вместо текста отображается компонент b-img.

Список СМИ

Свойство tag позволяет нам отображать наши мультимедийные b-media компоненты с помощью нужного нам тега.

Например, мы можем написать:

<template>
  <div id="app">
    <ul>
      <b-media tag="li">
        <template v-slot:aside>
          <b-img blank blank-color="#ccc" width="30" alt="placeholder"></b-img>
        </template>
<p>foo</p>
      </b-media>
      <b-media tag="li">
        <template v-slot:aside>
          <b-img blank blank-color="blue" width="30" alt="placeholder"></b-img>
        </template>
         <p>bar</p>
      </b-media>
      <b-media tag="li">
        <template v-slot:aside>
          <b-img blank blank-color="green" width="30" alt="placeholder"></b-img>
        </template>
          <p>baz</p>
      </b-media>
    </ul>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Затем мы визуализируем наш b-media компонент как li-элементы.

Модальные окна

Модальные окна - это диалоговые окна, которые работают на JavaScript и CSS.

Мы можем создать простой с помощью компонента b-modal.

Например, мы можем написать:

<template>
  <div id="app">
    <b-button v-b-modal.modal>open modal</b-button>
    <b-modal id="modal" title="Hello">
      <p>Hello!</p>
    </b-modal>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

У нас есть b-button с директивой v-b-modal.modal.

Модификатор modal - это значение свойства id модального окна, которое мы хотим открыть.

Компонент b-modal сам является модальным.

title - это заголовок модального окна, отображаемый вверху.

Контент находится между тегами.

По умолчанию он также имеет кнопки ОК и Отмена.

Мы можем скрыть кнопку «Отмена» с помощью свойства ok-only.

Свойство ok-title позволяет нам изменять текст кнопки ОК.

Свойство cancel-title позволяет нам изменять текст кнопки «Отмена».

Мы можем использовать слоты modal-ok и modal-cancel для изменения содержимого кнопки.

Слот modal-title позволяет нам изменять содержание заголовка.

Слот modal-header позволяет нам изменить модальный заголовок.

Слот modal-footer позволяет нам изменять содержимое нижнего колонтитула.

Заключение

Компонент b-media позволяет нам добавлять изображение с текстом рядом.

Модальные окна - это диалоговые окна, которые накладываются на наш основной контент.