メディア

メディアオブジェクトは、メディアがコンテンツの横に配置され、コンテンツがメディアを囲まない、複雑で反復的なコンポーネントを構築するのに役立ちます。さらに、flexboxのおかげで、必要なクラスは2つだけです。

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

      <h5 class="mt-0">Media Title</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">Nested Media</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>Media Body</h2>
    <p>Some text</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">Media Title</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">Nested Media</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">Media object</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> を含めることで、メディアオブジェクトを簡単にネストできます。

垂直方向の配置

vertical-align プロパティを使用して、top、center、または end に設定することで、Aside を垂直方向に配置できます。デフォルトの配置は top です。

メディアリスト

メディアオブジェクトは構造的な要件が少ないため、HTMLリストのリストアイテムとしてこのコンポーネントを使用できます。<ul> または <ol> に list-unstyled クラスを追加してブラウザのデフォルトのリストスタイルを削除し、tag プロパティを li に設定した <b-media>コンポーネントを使用します。いつものように、必要に応じてスペーシングユーティリティを使用して微調整します。

<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">List-based media object</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">List-based media object</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">List-based media object</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 -->

コンポーネントリファレンス

`<b-media>`

関数型コンポーネント

ソースコードを表示

<b-media> プロパティ
<b-media> スロット

プロパティ

すべてプロパティのデフォルト値はグローバルに設定可能です。

プロパティ	タイプ	デフォルト	説明
`no-body`	`ブール値`	`false`	設定されている場合、デフォルトスロットコンテンツの周りに 'b-media-body' ラッパーをレンダリングしません
`right-align`	`ブール値`	`false`	'aside' スロットを右側にレンダリングします。デフォルトは左側です
`tag`	`文字列`	`'div'`	デフォルトタグの代わりにレンダリングするHTMLタグを指定します
`vertical-align`	`文字列`	`'top'`	'aside' スロットの垂直方向の配置： 'start' (または 'top')、 'center'、または 'end' (または 'bottom')

スロット

名前	説明
`aside`	メディア aside
`default`	メディア要素に配置するコンテンツ

`<b-media-aside>`

関数型コンポーネント

ソースコードを表示

<b-media-aside> プロパティ
<b-media-aside> スロット

プロパティ

すべてプロパティのデフォルト値はグローバルに設定可能です。

プロパティ	タイプ	デフォルト	説明
`right`	`ブール値`	`false`	'aside' を右側に配置します。デフォルトは左側です
`tag`	`文字列`	`'div'`	デフォルトタグの代わりにレンダリングするHTMLタグを指定します
`vertical-align`	`文字列`	`'top'`	aside の垂直方向の配置： 'start' (または 'top')、 'center'、または 'end' (または 'bottom')

スロット

名前	説明
`default`	メディア aside に配置するコンテンツ

`<b-media-body>`

関数型コンポーネント

ソースコードを表示

<b-media-body> プロパティ
<b-media-body> スロット

プロパティ

すべてプロパティのデフォルト値はグローバルに設定可能です。

プロパティ	タイプ	デフォルト	説明
`tag`	`文字列`	`'div'`	デフォルトタグの代わりにレンダリングするHTMLタグを指定します

スロット

名前	説明
`default`	メディア本文に配置するコンテンツ

個々のコンポーネントのインポート

次の名前付きエクスポートを介して個々のコンポーネントをプロジェクトにインポートできます

コンポーネント	名前付きエクスポート	インポートパス
`<b-media>`	`BMedia`	`bootstrap-vue`
`<b-media-aside>`	`BMediaAside`	`bootstrap-vue`
`<b-media-body>`	`BMediaBody`	`bootstrap-vue`

例

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

Vue.jsプラグインとしてのインポート

このプラグインには、上記の個々のコンポーネントがすべて含まれています。プラグインには、コンポーネントのエイリアスも含まれています。

名前付きエクスポート	インポートパス
`MediaPlugin`	`bootstrap-vue`

例

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