Spinner

<b-spinner> 组件可用于在项目中显示加载状态。它们仅使用基本 HTML 和 CSS 作为轻量级 Vue 函数组件进行渲染。它们的外观、对齐方式和大小可以通过一些内置属性和/或 Bootstrap v4 实用程序类轻松自定义。

Spinner 可以放置在任何地方，包括按钮、警告，甚至 <b-table> 的 busy 插槽中。

<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 -->

Spinner 类型

Bootstrap 包含两种类型的 Spinner。默认的 Spinner 类型称为 border（旋转圆圈边框），可选类型 grow（脉动式指示器）。

边框旋转指示器

使用默认的 border 类型旋转指示器作为轻量级的加载指示器。

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

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

增长旋转指示器

如果您不喜欢 border 旋转指示器，可以通过将 type 属性设置为 'grow' 来切换到 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 旋转指示器至少为一侧指定 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 -->

放置

使用 flexbox 实用程序、浮动实用程序或文本对齐实用程序类在任何情况下将旋转指示器准确地放置在您需要的位置。

Flex

使用 flex 实用程序类

<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 -->

浮动

使用 float 实用程序类

<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> 属性
<b-spinner> 插槽

属性

所有属性默认值均可全局配置。

属性	类型	默认	说明
`标签`	`字符串`		放置在 sr-only 标签中的文本内容
`角色`	`字符串`	`'状态'`	将 ARIA 属性 `role` 设置为特定值
`小`	`布尔值`	`false`	设置后，呈现一个较小的旋转器，适合放置在按钮中
`标签`	`字符串`	`'span'`	指定要呈现的 HTML 标签，而不是默认标签
`类型`	`字符串`	`'边框'`	要显示的旋转器类型。当前支持的类型为 '边框' 和 '增长'
`变体`	`字符串`		将 Bootstrap 主题颜色变体之一应用于组件

插槽

名称	说明
`标签`	要放置在 sr-only 标签中的内容

导入单个组件

可以通过以下命名导出将单个组件导入到项目中

组件	命名导出	导入路径
`<b-spinner>`	`BSpinner`	`bootstrap-vue`

示例

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

作为 Vue.js 插件导入

此插件包含上述所有列出的单个组件。插件还包括任何组件别名。

命名导出	导入路径
`SpinnerPlugin`	`bootstrap-vue`

示例

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