报告问题编辑此页面

骨架

<b-skeleton> 是一个 BootstrapVue 自定义组件，它允许你显示几种组件类型的载入状态，在获取或计算你的数据时。

在 BootstrapVue 中 v2.17.0 中可用

範例：基本用法

<template>
  <div>
    <div class="d-flex align-items-center mb-3">
      <b-progress class="w-100" :max="maxLoadingTime" height="1.5rem">
        <b-progress-bar :value="loadingTime" :label="`${((loadingTime / maxLoadingTime) * 100).toFixed(2)}%`"></b-progress-bar>
      </b-progress>

      <b-button class="ml-3" @click="startLoading()">Reload</b-button>
    </div>

    <b-skeleton-wrapper :loading="loading">
      <template #loading>
        <b-card>
          <b-skeleton width="85%"></b-skeleton>
          <b-skeleton width="55%"></b-skeleton>
          <b-skeleton width="70%"></b-skeleton>
        </b-card>
      </template>

      <b-card>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra nunc sapien,
        non rhoncus elit tincidunt vitae. Vestibulum maximus, ligula eu feugiat molestie,
        massa diam imperdiet odio, vitae viverra ligula est id nisi. Aliquam ut molestie est.
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
        turpis egestas. Phasellus at consequat dui. Aenean tristique sagittis quam,
        sit amet sollicitudin neque sodales in.
      </b-card>
    </b-skeleton-wrapper>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        loadingTime: 0,
        maxLoadingTime: 3
      }
    },
    watch: {
      loading(newValue, oldValue) {
        if (newValue !== oldValue) {
          this.clearLoadingTimeInterval()

          if (newValue) {
            this.$_loadingTimeInterval = setInterval(() => {
              this.loadingTime++
            }, 1000)
          }
        }
      },
      loadingTime(newValue, oldValue) {
        if (newValue !== oldValue) {
          if (newValue === this.maxLoadingTime) {
            this.loading = false
          }
        }
      }
    },
    created() {
      this.$_loadingTimeInterval = null
    },
    mounted() {
      this.startLoading()
    },
    methods: {
      clearLoadingTimeInterval() {
        clearInterval(this.$_loadingTimeInterval)
        this.$_loadingTimeInterval = null
      },
      startLoading() {
        this.loading = true
        this.loadingTime = 0
      }
    }
  }
</script>

<!-- b-skeleton.vue -->

类型

<b-skeleton> 支持各种基本类型，以表示你项目中的各种组件。

<h5>Text (default)</h5>
<b-skeleton></b-skeleton>

<h5 class="mt-3">Avatar</h5>
<b-skeleton type="avatar"></b-skeleton>

<h5 class="mt-3">Input</h5>
<b-skeleton type="input"></b-skeleton>

<h5 class="mt-3">Button</h5>
<b-skeleton type="button"></b-skeleton>

<!-- b-skeleton-types.vue -->

骨架动画

<b-skeleton> 支持不同的动画。你可以按组件设置，或在 设置 中全局更改它。

<h5>Wave (default)</h5>
<b-card>
  <b-skeleton animation="wave" width="85%"></b-skeleton>
  <b-skeleton animation="wave" width="55%"></b-skeleton>
  <b-skeleton animation="wave" width="70%"></b-skeleton>
</b-card>

<h5 class="mt-3">Fade</h5>
<b-card>
  <b-skeleton animation="fade" width="85%"></b-skeleton>
  <b-skeleton animation="fade" width="55%"></b-skeleton>
  <b-skeleton animation="fade" width="70%"></b-skeleton>
</b-card>

<h5 class="mt-3">Throb</h5>
<b-card>
  <b-skeleton animation="throb" width="85%"></b-skeleton>
  <b-skeleton animation="throb" width="55%"></b-skeleton>
  <b-skeleton animation="throb" width="70%"></b-skeleton>
</b-card>

<h5 class="mt-3">None</h5>
<b-card>
  <b-skeleton animation width="85%"></b-skeleton>
  <b-skeleton animation width="55%"></b-skeleton>
  <b-skeleton animation width="70%"></b-skeleton>
</b-card>

<!-- b-skeleton-animations.vue -->

辅助组件

利用 <b-skeleton> 辅助组件快速架构現有的组件。

表格

<b-skeleton-table> 可讓您透過利用 rows 和 columns 屬性來定義表格大小，來建立建構基本表格結構。您可以透過 table-props 屬性直接將屬性傳遞到表格中，它支援與 <b-table-simple> 相同的屬性。有關完整清單，請參閱 <b-table-simple> 文件。

<b-skeleton-table
  :rows="5"
  :columns="4"
  :table-props="{ bordered: true, striped: true }"
></b-skeleton-table>

<!-- b-skeleton-helper-table.vue -->

影像

使用 <b-skeleton-img> 來代表影像。它預設使用 16:9 的長寬比，以利於回應式調整大小。您可以套用 no-aspect 並使用 height 和 width 屬性來設定自己的大小，來覆寫此設定。

<b-row>
  <b-col>
    <b-skeleton-img></b-skeleton-img>
  </b-col>
  <b-col>
    <b-skeleton-img></b-skeleton-img>
  </b-col>
  <b-col cols="12" class="mt-3">
    <b-skeleton-img no-aspect height="150px"></b-skeleton-img>
  </b-col>
</b-row>

<!-- b-skeleton-helper-img.vue -->

卡片影像

在 <b-card> 中使用 <b-skeleton-img> 來代表影像。請記得將 card-img 屬性設定為影像的位置。這將套用適當的邊框半徑。

<b-row>
  <b-col cols="12" md="6">
    <h5>Image top</h5>
    <b-card no-body img-top>
      <b-skeleton-img card-img="top" aspect="3:1"></b-skeleton-img>
      <b-card-body>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra nunc sapien,
        non rhoncus elit tincidunt vitae.
      </b-card-body>
    </b-card>
  </b-col>
  <b-col cols="12" md="6">
    <h5>Image bottom</h5>
    <b-card no-body img-bottom>
      <b-card-body>
        Vestibulum maximus, ligula eu feugiat molestie, massa diam imperdiet odio, vitae viverra
        ligula est id nisi. Aliquam ut molestie est.
      </b-card-body>
      <b-skeleton-img card-img="bottom" aspect="3:1"></b-skeleton-img>
    </b-card>
  </b-col>
</b-row>

<b-row class="mt-md-3">
  <b-col cols="12" md="6">
    <h5>Image left</h5>
    <b-card no-body img-left>
      <b-skeleton-img card-img="left" width="225px"></b-skeleton-img>
      <b-card-body>
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
        egestas. Phasellus at consequat dui.
      </b-card-body>
    </b-card>
  </b-col>
  <b-col cols="12" md="6">
    <h5>Image right</h5>
    <b-card no-body img-right>
      <b-skeleton-img card-img="right" width="225px"></b-skeleton-img>
      <b-card-body>
        Aenean tristique sagittis quam, sit amet sollicitudin neque sodales in.
      </b-card-body>
    </b-card>
  </b-col>
</b-row>

<!-- b-skeleton-helper-card-img.vue -->

圖示

<b-skeleton-icon> 也可以做為圖示的佔位符。如果需要使用任何圖示屬性，您可以透過 icon-props 屬性來傳遞它們。

<b-skeleton-icon
  icon="person"
  :icon-props="{ fontScale: 2 }"
></b-skeleton-icon>

<b-skeleton-icon
  icon="person-fill"
  :icon-props="{ fontScale: 2, variant: 'dark' }"
></b-skeleton-icon>

<!-- b-skeleton-helper-card-icon.vue -->

注意： throb 動畫不適用於 b-skeleton-icon。

樣式和自訂設定

<b-skeleton> 元件和輔助元件會盡可能使用 Bootstrap SCSS 變數，以最符合原生元件的樣式和大小。這表示如果您已自訂 Bootstrap SCSS，則 Skeleton 元件應會調整以符合您的自訂主題。

我們也提供了一些自訂 SCSS 變數，可用於進一步自訂不同 <b-skeleton> 元件的樣式。您可以在 主題設定區段中深入瞭解如何變更這些變數。

元件說明

<b-skeleton>

函式型元件
檢視原始碼

屬性

所有屬性預設值皆可 全局設定。

屬性
類型
預設值
說明
animation
字串'wave'變更元件的動畫，留空或設為 `null` 可停用動畫
height
字串設定元件的 `height`
size
字串設定元件的 `width` 和 `height`
type
字串'text'變更類型，請參閱 [類型](/#types) 區段
variant
字串套用其中一個 Bootstrap 主題色彩變體到元件
width
字串設定元件的 `width`

<b-skeleton-wrapper>

函式型元件
檢視原始碼

屬性

所有屬性預設值皆可 全局設定。

屬性
類型
預設值
說明
loading
布林值false決定是否要顯示 `loading` 插槽

插槽

名稱
說明
預設 當 `loading` prop 為 `false` 時要顯示的內容
loading 當 `loading` prop 為 `true` 時要顯示的內容

<b-skeleton-table>

函式型元件
檢視原始碼

屬性

所有屬性預設值皆可 全局設定。

屬性
類型
預設值
說明
animation
字串用於每個儲存格的元件動畫，留空或設為 `null` 可停用動畫
columns
數字5要顯示的欄位數量
hide-header
布林值false隱藏表格標題
rows
數字3要顯示的列數
show-footer
布林值false啟用表格的頁尾
table-props
物件{}支援與 `<b-table-simple>` 相同的 prop

<b-skeleton-img>

函式型元件
檢視原始碼

屬性

所有屬性預設值皆可 全局設定。

屬性
類型
預設值
說明
animation
字串元件使用的動畫，留空或設為 `null` 可停用動畫
aspect
字串'16:9'控制圖片的縱橫比
card-img
字串如果作為卡片圖片使用，請使用這個 prop 來設定位置。可接受值為 `top`、`bottom`、`left` 和 `right`
height
字串設定圖片的高度。最適合與 `no-aspect` 設定為 `true` 一併使用
no-aspect
布林值false移除骨架周圍的外觀包覆
variant
字串套用其中一個 Bootstrap 主題色彩變體到元件
width
字串設定圖片的寬度。最適合與 `no-aspect` 設定為 `true` 一併使用

<b-skeleton-icon>

函式型元件
檢視原始碼

屬性

所有屬性預設值皆可 全局設定。

屬性
類型
預設值
說明
animation
字串'wave'元件使用的動畫，留空或設為 `null` 可停用動畫
icon
字串顯示的圖示
icon-props
物件{}傳遞給圖示的屬性。請參閱 `<b-icon>` 屬性參考

匯入個別元件

您可以透過下列的命名匯出來匯入個別元件到您的專案中

元件
命名匯出
匯入路徑
<b-skeleton>BSkeletonbootstrap-vue
<b-skeleton-wrapper>BSkeletonWrapperbootstrap-vue
<b-skeleton-table>BSkeletonTablebootstrap-vue
<b-skeleton-img>BSkeletonImgbootstrap-vue
<b-skeleton-icon>BSkeletonIconbootstrap-vue

範例

import { BSkeleton } from 'bootstrap-vue'
Vue.component('b-skeleton', BSkeleton)

以此匯入為 Vue.js 外掛

這個外掛包含上述列出的所有個別元件外掛也包含任何元件別名。

命名匯出
匯入路徑
SkeletonPluginbootstrap-vue

範例

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