スピナー

<b-spinner>コンポーネントは、プロジェクトの読み込み状態を表示するために使用できます。これらは軽量なVue関数型コンポーネントとして、基本的なHTMLとCSSのみでレンダリングされます。外観、配置、サイズは、いくつかの組み込みプロパティやBootstrap v4ユーティリティクラスで簡単にカスタマイズできます。

スピナーは、ボタン、アラート、さらには<b-table>のビジー状態スロットなど、どこにでも配置できます。

<div class="text-center">
  <b-spinner label="Spinning"></b-spinner>
  <b-spinner type="grow" label="Spinning"></b-spinner>
  <b-spinner variant="primary" label="Spinning"></b-spinner>
  <b-spinner variant="primary" type="grow" label="Spinning"></b-spinner>
  <b-spinner variant="success" label="Spinning"></b-spinner>
  <b-spinner variant="success" type="grow" label="Spinning"></b-spinner>
</div>

<!-- b-spinners.vue -->

スピナーの種類

Bootstrapには2種類のスピナーが含まれています。デフォルトのスピナータイプはborder（回転する円の境界線）と呼ばれ、オプションのタイプgrow（脈動するスタイルのインジケーター）があります。

境界線スピナー

軽量な読み込みインジケーターには、デフォルトの`border`タイプのスピナーを使用します。

<div>
  <b-spinner label="Loading..."></b-spinner>
</div>

<!-- b-spinner-border.vue -->

成長スピナー

境界線スピナーが気に入らない場合は、プロパティ`type`を`'grow'`に設定することで、成長スピナーに切り替えることができます。技術的には回転しませんが、繰り返し成長します！

<div>
  <b-spinner type="grow" label="Loading..."></b-spinner>
</div>

<!-- b-spinner-grow.vue -->

スピナーのカラーバリアント

スピナーは色に`currentColor`を使用します。つまり、現在のフォントの色を継承します。`variant`プロパティを使用して標準のテキストカラーバリアントを使用して色をカスタマイズするか、コンポーネントにクラスまたはスタイルを配置して色を変更できます。

`variant`プロパティは、バリアント名をBootstrap v4クラス`.text-{variant}`に変換するため、カスタム定義のテキストカラーバリアントがある場合は、`variant`プロパティを介して自由に使用できます。

<template>
  <div>
    <div class="text-center mb-3 d-flex justify-content-between">
      <b-spinner
        v-for="variant in variants"
        :variant="variant"
        :key="variant"
      ></b-spinner>
    </div>

    <div class="text-center d-flex justify-content-between">
      <b-spinner
        v-for="variant in variants"
        :variant="variant"
        :key="variant"
        type="grow"
      ></b-spinner>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        variants: ['primary', 'secondary', 'danger', 'warning', 'success', 'info', 'light', 'dark']
      }
    }
  }
</script>

<!-- b-spinner-variants.vue -->

**なぜ`border-color`ユーティリティを使用しないのですか？** 各`border`スピナーは、少なくとも1つの側面に`transparent`境界線を指定しているため、`.border-{color}`ユーティリティはそれをオーバーライドします。

サイズ

プロパティ`small`を`true`に設定すると、他のコンポーネント内で簡単に使用できる小さなスピナーが作成されます。

<div>
  <b-spinner small label="Small Spinner"></b-spinner>
  <b-spinner small label="Small Spinner" type="grow"></b-spinner>
</div>

<!-- b-spinner-sizes.vue -->

または、カスタムCSSまたはインラインスタイルを使用して、必要に応じて寸法を変更します。

<div>
  <b-spinner style="width: 3rem; height: 3rem;" label="Large Spinner"></b-spinner>
  <b-spinner style="width: 3rem; height: 3rem;" label="Large Spinner" type="grow"></b-spinner>
</div>

<!-- b-spinner-sizes-custom.vue -->

配置

Bootstrapのスピナーは、`rem`、`currentColor`、`display: inline-flex`を使用して構築されています。つまり、サイズ変更、色の変更、迅速な配置が容易です。

マージン

簡単なスペーシングには、`.m-5`などのマージンユーティリティを使用します。

<div>
  <b-spinner class="m-5" label="Busy"></b-spinner>
</div>

<!-- b-spinner-margin.vue -->

配置

フレックスボックスユーティリティ、フロートユーティリティ、またはテキスト配置ユーティリティクラスを使用して、あらゆる状況でスピナーを必要な場所に正確に配置します。

フレックス

フレックスユーティリティクラスの使用

<div>
  <div class="d-flex justify-content-center mb-3">
    <b-spinner label="Loading..."></b-spinner>
  </div>

  <div class="d-flex align-items-center">
    <strong>Loading...</strong>
    <b-spinner class="ml-auto"></b-spinner>
  </div>
</div>

<!-- b-spinner-flex.vue -->

フロート

フロートユーティリティクラスの使用

<div class="clearfix">
  <b-spinner class="float-right" label="Floated Right"></b-spinner>
</div>

<!-- b-spinner-floats.vue -->

テキスト配置

テキスト配置ユーティリティクラスの使用

<div class="text-center">
  <b-spinner variant="primary" label="Text Centered"></b-spinner>
</div>

<!-- b-spinner-text-align.vue -->

ボタン内のスピナー

ボタン内でスピナーを使用して、現在処理中または実行中のアクションを示します。スピナー要素からラベルテキストをスワップアウトし、必要に応じてボタンテキストを利用することもできます。

<div>
  <b-button variant="primary" disabled>
    <b-spinner small></b-spinner>
    <span class="sr-only">Loading...</span>
  </b-button>

  <b-button variant="primary" disabled>
    <b-spinner small type="grow"></b-spinner>
    Loading...
  </b-button>
</div>

<!-- b-spinner-buttons.vue -->

スピナーのアクセシビリティ

`label`プロパティまたは`label`スロットを使用して、スクリーンリーダーユーザー向けにスピナー内に非表示のラベルテキストを配置します。コンテンツは、クラス`sr-only`を持つ`<span>`要素でラップされたスピナーの*内部*に配置され、スクリーンリーダーユーザーがラベルを利用できるようになります。

アクセシビリティのために、ラベルが提供されると、各スピナーは自動的に`role="status"`属性を持ちます。プロパティ`role`を介してロールを簡単にカスタマイズできます。指定された`role`は、ラベルが提供されない場合は適用されません。

また、ラベルが提供されない場合、スピナーは自動的に属性`aria-hidden="true"`を持ち、スクリーンリーダーユーザーからスピナーを非表示にします。

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

`<b-spinner>`

関数型コンポーネント

ソースを表示

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

プロパティ

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

プロパティ	タイプ	デフォルト	説明
`label`	`文字列`		sr-onlyラベルに配置するテキストコンテンツ
`role`	`文字列`	`文字列`	'status'
ARIA属性`role`を特定の値に設定します	`small`	`真偽値`	false
`設定すると、ボタンに配置するのに適した小さなスピナーをレンダリングします`	`文字列`	`tag`	文字列
`'span'`	`文字列`	`デフォルトタグの代わりにレンダリングするHTMLタグを指定します`	type
`文字列`	`文字列`		'border'

表示するスピナーのタイプ。現在サポートされているタイプは 'border' と 'grow' です

variant	説明
`label`	文字列

Bootstrapテーマカラーバリアントのいずれかをコンポーネントに適用します

スロット

名前	デフォルト	sr-onlyラベルに配置するコンテンツ
`個々のコンポーネントのインポート`	`次の名前付きエクスポートを介して個々のコンポーネントをプロジェクトにインポートできます`	`コンポーネント`

名前付きエクスポート

import { BSpinner } from 'bootstrap-vue'
Vue.component('b-spinner', BSpinner)

インポートパス

<b-spinner>BSpinner

デフォルト	sr-onlyラベルに配置するコンテンツ
`bootstrap-vue`	`コンポーネント`