旋转指示器(Spinners)

<b-spinner> 组件可用于显示项目中的加载状态。仅使用基本的HTML和CSS作为轻量级的Vue功能组件来呈现它们。可以使用一些内置的props和/或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>

Spinner 类型

Bootstrap包括两种类型的微调器。默认的微调器类型称为border（旋转的圆环边框），而可选的类型增长（throbber样式指示器）。

边框 spinner

将默认边框类型微调器用于轻型加载指示器。

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

成长 spinner

如果您不喜欢边框spinner，请通过将属性类型设置为'增长'来切换到增长 spinner。尽管从技术上讲它不是旋转的，但确实会反复增长！

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

Spinner 颜色variant

Spinners使用currentColor作为其颜色，这意味着它继承了当前的字体颜色。您可以使用variant属性使用标准文本颜色变体来自定义颜色，或在组件上放置类或样式以更改其颜色。

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>

为什么不使用border-color实体程序? 每个边框 spinner 至少为一侧指定透明 边框，因此.border-{color}实用程序将覆盖该边框。

大小

将属性设置为true可以制作一个小的微调器，可以在其他组件中快速使用该微调器。

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

或者，使用自定义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>

对齐

Bootstrap中的Spinner使用rems, currentColor,和 display: inline-flex构建。这意味着它们可以轻松地调整大小，重新着色并快速对齐。

边距

使用诸如.m-5之类的边距实用程序可轻松实现间距。

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

放置方式

在任何情况下，都可以使用flexbox实用程序，float实用程序或文本对齐实用程序类将Spinner精确地放置在所需的位置。

Flex

使用flex实用程序类：

Loading...

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

Floats

使用float实用程序类：

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

文本对齐

使用文本对齐工具类：

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

Spinners 按钮

使用按钮内的Spinners指示当前正在处理或正在进行的动作。您也可以将标签文本换出Spinner元素，并根据需要使用按钮文本。

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

Spinner accessibility

通过标签属性或标签槽将隐藏的标签文本放置在spinner内，以供屏幕阅读器用户使用。内容将放置在包裹在<span>元素中的微调框内，该元素具有sr-only类，
这将使标签可供屏幕阅读器用户使用。

出于可访问性的目的，每个spinner在提供标签时将自动具有role="status"属性。如果需要，您可以通过属性角色轻松自定义角色。如果未提供标签，则将不应用指定的角色。

同样，当未提供标签时，spinner将自动具有属性aria-hidden="true"，以向屏幕阅读器用户隐藏spinner。

组件参考

`<b-spinner>`

功能组件

View source

<b-spinner> 属性
<b-spinner> 插槽

Properties

属性	类型	默认值	描述
`type`	String	`'border'`	要显示的spinner 类型。当前支持的类型为“边界”和“增长”
`label`	String		放置在sr-only标签中的文本内容
`variant`	String		将Bootstrap主题颜色变体之一应用于组件
`small`	Boolean	`false`	设置后，渲染一个适合放置在按钮中的较小的spinner
`role`	String	`'status'`	将ARIA属性“角色”设置为特定值
`tag`	String	`'span'`	指定要呈现的HTML标签，而不是默认标签

插槽

插槽名称	描述
`label`	放置在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)