回報問題編輯此頁面

進度

使用我們自訂的進度元件來顯示簡單或複雜的進度條，具有水平堆疊的條、動畫背景和文字標籤等功能。

<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> 的預設區塊
  • label <b-progress-bar> 的屬性
  • show-progress <b-progress-bar> 的屬性
  • show-value <b-progress-bar> 的屬性
  • show-progress <b-progress> 的屬性
  • show-value <b-progress> 的屬性
  • 沒有標籤

寬度和高度

<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> 將不會繼承 value 來自 <b-progress>。

組件參考資料

<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 主題顏色變體至組件

插槽

名稱
說明
預設值 要放入進度元素的內容（進度欄）

<b-progress-bar>

顯示原始碼

屬性

所有屬性的預設值皆可 進行全域設定。

屬性
(按一下以按遞增順序排序)
類型
(按一下以按遞增順序排序)
預設值
說明
animated
布林null啟用動畫背景。同時自動設定為「striped」
標籤
字串明確設定標籤為文字字串
標籤 HTML
請小心使用 		字串明確設定標籤為 HTML 字串
max
Number 或 Stringnull設定最大值
precision
Number 或 Stringnull小數點後要四捨五入的位元數
show-progress
布林null以百分比顯示目前進度值
show-value
布林null顯示目前的進度值
striped
布林null啟用條紋背景
value
Number 或 String0進度列目前的數值
variant
字串套用其中一個 Bootstrap 主題顏色變體至組件

小心： 支援 HTML 字串的屬性 (*-html) 傳遞未經處理的使用者提供值時，容易遭受 跨網站指令碼 (XSS) 攻擊。您必須先正確 清除 使用者輸入。

插槽

名稱
說明
預設值 放置在進度列中的內容。會覆寫 `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)