問題を報告するこのページを編集する

プログレスバー

シンプルなプログレスバーから複雑なプログレスバーまで、水平方向に積み重ねられたバー、アニメーション付きの背景、テキストラベルをサポートするカスタムプログレスコンポーネントを使用します。

<template>
  <div>
    <b-progress :value="value" :max="max" show-progress animated></b-progress>
    <b-progress class="mt-2" :max="max" show-value>
      <b-progress-bar :value="value * (6 / 10)" variant="success"></b-progress-bar>
      <b-progress-bar :value="value * (2.5 / 10)" variant="warning"></b-progress-bar>
      <b-progress-bar :value="value * (1.5 / 10)" variant="danger"></b-progress-bar>
    </b-progress>

    <b-button class="mt-3" @click="randomValue">Click me</b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 45,
        max: 100
      }
    },
    methods: {
      randomValue() {
        this.value = Math.random() * this.max
      }
    }
  }
</script>

<!-- b-progress.vue -->

値

maxプロパティ（デフォルトは100）で最大値を設定し、valueプロパティ（デフォルトは0）で現在の値を設定します。

単一のプロセスで複数のバーを作成する場合は、<b-progress-bar>サブコンポーネントに`value`プロパティを設定します（詳細は以下の**複数のバー**セクションを参照）。

ラベル

show-progress（最大値に対するパーセンテージ）またはshow-value（現在の絶対値）を有効にすることで、プログレスバーにラベルを追加できます。precisionプロパティ（デフォルトは小数点以下の桁数0）を使用して精度（小数点以下の桁数）を設定することもできます。

<template>
  <div>
    <h5>No label</h5>
    <b-progress :value="value" :max="max" class="mb-3"></b-progress>

    <h5>Value label</h5>
    <b-progress :value="value" :max="max" show-value class="mb-3"></b-progress>

    <h5>Progress label</h5>
    <b-progress :value="value" :max="max" show-progress class="mb-3"></b-progress>

    <h5>Value label with precision</h5>
    <b-progress :value="value" :max="max" :precision="2" show-value class="mb-3"></b-progress>

    <h5>Progress label with precision</h5>
    <b-progress :value="value" :max="max" :precision="2" show-progress class="mb-3"></b-progress>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 33.333333333,
        max: 50
      }
    }
  }
</script>

<!-- b-progress-labels.vue -->

カスタムプログレスラベル

ラベルをより細かく制御する必要がある場合は、<b-progress-bar>サブコンポーネント内のデフォルトスロットを使用するか、<b-progress-bar>のlabelまたはlabel-htmlプロパティを使用します。

<template>
  <div>
    <h5>Custom label via default slot</h5>
    <b-progress :max="max" height="2rem">
      <b-progress-bar :value="value">
        <span>Progress: <strong>{{ value.toFixed(2) }} / {{ max }}</strong></span>
      </b-progress-bar>
    </b-progress>

    <h5 class="mt-3">Custom label via property</h5>
    <b-progress :max="max">
      <b-progress-bar :value="value" :label="`${((value / max) * 100).toFixed(2)}%`"></b-progress-bar>
    </b-progress>

    <h5 class="mt-3">Custom label via property (HTML support)</h5>
    <b-progress :max="max">
      <b-progress-bar :value="value" :label-html="`<del>${value}</del>`"></b-progress-bar>
    </b-progress>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 33.333333333,
        max: 50
      }
    }
  }
</script>

<!-- b-progress-custom-labels.vue -->

ラベル設定方法の優先順位（上位が優先されます）

  • <b-progress-bar>のデフォルトスロット
  • <b-progress-bar>のlabelプロパティ
  • <b-progress-bar>のshow-progressプロパティ
  • <b-progress-bar>のshow-valueプロパティ
  • <b-progress>のshow-progressプロパティ
  • <b-progress>のshow-valueプロパティ
  • ラベルなし

幅と高さ

<b-progress>は常に親コンテナの最大幅に拡張されます。幅を変更するには、標準のBootstrap列に<b-progress>を配置するか、標準のBootstrap幅クラスを適用します。

<template>
  <div>
    <h5>Default width</h5>
    <b-progress :value="value" class="mb-3"></b-progress>

    <h5>Custom widths</h5>
    <b-progress :value="value" class="w-75 mb-2"></b-progress>
    <b-progress :value="value" class="w-50 mb-2"></b-progress>
    <b-progress :value="value" class="w-25"></b-progress>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 75
      }
    }
  }
</script>

<!-- b-progress-width.vue -->

プログレスバーの高さを制御するには、heightプロパティを使用します。高さの値は標準のCSS寸法（px、rem、emなど）である必要があります。デフォルトの高さは1remです。

<template>
  <div>
    <h5>Default height</h5>
    <b-progress :value="value" show-progress class="mb-3"></b-progress>

    <h5>Custom heights</h5>
    <b-progress height="2rem" :value="value" show-progress class="mb-2"></b-progress>
    <b-progress height="20px" :value="value" show-progress class="mb-2"></b-progress>
    <b-progress height="2px" :value="value"></b-progress>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 75
      }
    }
  }
</script>

<!-- b-progress-height.vue -->

背景

背景バリアントを使用して、個々のプログレスバーの外観を変更します。デフォルトのバリアントはprimaryです。

単色背景バリアント

<template>
  <div>
    <div v-for="bar in bars" class="row mb-1">
      <div class="col-sm-2">{{ bar.variant }}:</div>
      <div class="col-sm-10 pt-1">
        <b-progress :value="bar.value" :variant="bar.variant" :key="bar.variant"></b-progress>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        bars: [
          { variant: 'success', value: 75 },
          { variant: 'info', value: 75 },
          { variant: 'warning', value: 75 },
          { variant: 'danger', value: 75 },
          { variant: 'primary', value: 75 },
          { variant: 'secondary', value: 75 },
          { variant: 'dark', value: 75 }
        ],
        timer: null
      }
    },
    mounted() {
      this.timer = setInterval(() => {
        this.bars.forEach(bar => (bar.value = 25 + Math.random() * 75))
      }, 2000)
    },
    beforeDestroy() {
      clearInterval(this.timer)
      this.timer = null
    }
  }
</script>

<!-- b-progress-backgrounds.vue -->

ストライプ背景

stripedを設定すると、CSSグラデーションを使用してプログレスバーの背景バリアント上にストライプが適用されます。

<template>
  <div>
    <b-progress :value="25" variant="success" :striped="striped"></b-progress>
    <b-progress :value="50" variant="info" :striped="striped" class="mt-2"></b-progress>
    <b-progress :value="75" variant="warning" :striped="striped" class="mt-2"></b-progress>
    <b-progress :value="100" variant="danger" :striped="striped" class="mt-2"></b-progress>

    <b-button variant="secondary" @click="striped = !striped" class="mt-3">
      {{ striped ? 'Remove' : 'Add' }} Striped
    </b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        striped: true
      }
    }
  }
</script>

<!-- b-progress-striped.vue -->

アニメーション付きの背景

animatedプロパティを設定すると、ストライプグラデーションをアニメーション化することもできます。

<template>
  <div>
    <b-progress :value="25" variant="success" striped :animated="animate"></b-progress>
    <b-progress :value="50" variant="info" striped :animated="animate" class="mt-2"></b-progress>
    <b-progress :value="75" variant="warning" striped :animated="animate" class="mt-2"></b-progress>
    <b-progress :value="100" variant="danger" :animated="animate" class="mt-3"></b-progress>

    <b-button variant="secondary" @click="animate = !animate" class="mt-3">
      {{ animate ? 'Stop' : 'Start' }} Animation
    </b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        animate: true
      }
    }
  }
</script>

<!-- b-progress-animated.vue -->

備考

  • animatedがtrueの場合、stripedは自動的に有効になります。
  • Opera 12では、CSS3アニメーションをサポートしていないため、アニメーション付きのプログレスバーは機能しません。
  • このコンポーネントのアニメーション効果は、prefers-reduced-motionメディアクエリに依存しています。詳細については、アクセシビリティドキュメントの低モーションに関するセクションを参照してください。

複数のバー

<b-progress>コンポーネントに複数の<b-progress-bar>サブコンポーネントを含めて、水平方向に積み重ねられたプログレスバーセットを作成します。

<template>
  <div>
    <b-progress :max="max" class="mb-3">
      <b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
      <b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
      <b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
    </b-progress>

    <b-progress show-progress :max="max" class="mb-3">
      <b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
      <b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
      <b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
    </b-progress>

    <b-progress show-value striped :max="max" class="mb-3">
      <b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
      <b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
      <b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
    </b-progress>

    <b-progress :max="max">
      <b-progress-bar variant="primary" :value="values[0]" show-progress></b-progress-bar>
      <b-progress-bar variant="success" :value="values[1]" animated show-progress></b-progress-bar>
      <b-progress-bar variant="info" :value="values[2]" striped show-progress></b-progress-bar>
    </b-progress>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        values: [15, 30, 20],
        max: 100
      }
    }
  }
</script>

<!-- b-progress-multiple.vue -->

<b-progress-bar>は<b-progress>親コンポーネントのプロパティの大部分を継承しますが、<b-progress-bar>でプロパティを設定することで、任意のプロパティを上書きできます。

備考

  • heightを指定する場合は、常に<b-progress>コンポーネントで設定する必要があります。
  • <b-progress-bar>は<b-progress>からvalueを継承しません。

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

<b-progress>

ソースコードを見る

プロパティ

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

プロパティ
型
デフォルト
説明
animated
ブール値falseアニメーション付きの背景を有効にします。'striped'も自動的に設定されます。
height
文字列CSSの高さ値（単位を含む）を指定して、デフォルトの高さを上書きします。
max
NumberまたはString100最大値を設定します。
precision
NumberまたはString0値を丸める小数点以下の桁数
show-progress
ブール値false現在の進捗値をパーセンテージで表示します。
show-value
ブール値false現在の進捗値を表示します。
striped
ブール値falseストライプ背景を有効にします。
value
NumberまたはString0プログレスバーの現在の値
variant
文字列Bootstrapテーマのカラーバリアントをコンポーネントに適用します。

スロット

名前
説明
default プログレス要素に配置するコンテンツ（プログレスバー）

<b-progress-bar>

ソースコードを見る

プロパティ

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

プロパティ
(クリックして昇順にソート)
型
(クリックして昇順にソート)
デフォルト
説明
animated
ブール値nullアニメーション付きの背景を有効にします。'striped'も自動的に設定されます。
label
文字列ラベルを明示的に設定するテキスト文字列
label-html
注意して使用してください 		文字列ラベルを明示的に設定するHTML文字列
max
NumberまたはStringnull最大値を設定します。
precision
NumberまたはStringnull値を丸める小数点以下の桁数
show-progress
ブール値null現在の進捗値をパーセンテージで表示します。
show-value
ブール値null現在の進捗値を表示します。
striped
ブール値nullストライプ背景を有効にします。
value
NumberまたはString0プログレスバーの現在の値
variant
文字列Bootstrapテーマのカラーバリアントをコンポーネントに適用します。

注意：HTML文字列をサポートするプロパティ（*-html）は、未加工のユーザー提供値を渡すと、クロスサイトスクリプティング（XSS）攻撃に対して脆弱になる可能性があります。最初にユーザー入力を適切にサニタイズする必要があります！

スロット

名前
説明
default プログレスバーに配置するコンテンツ。`label`、`label-html`、`show-progress`、`show-value`プロパティを上書きします。

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

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

コンポーネント
名前付きエクスポート
インポートパス
<b-progress>BProgressbootstrap-vue
<b-progress-bar>BProgressBarbootstrap-vue

例

import { BProgress } from 'bootstrap-vue'
Vue.component('b-progress', BProgress)

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

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

名前付きエクスポート
インポートパス
ProgressPluginbootstrap-vue

例

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