旋转器(Spinners)

旋转器用于向用户显示正在进行的及时过程。 这是一项重要的用户体验功能，它让用户感觉系统正在继续为更长期的活动工作，比如从服务器获取数据或进行一些繁重的计算。

安装

编辑 /quasar.conf.js:

framework: {
  components: [
    'QSpinner',
    'QSpinnerAudio',
    ...
  ]
}

基本用法

<!-- 默认平台旋转器-->
<q-spinner />

<!-- 带有选项的旋转器 -->
<q-spinner color="secondary" :size="30" />
<q-spinner color="teal-4" size="40px" />

<!--
  Alternatively, you can set CSS colo prop on
  a container or directly with `style` attribute on spinner
  或者，您可以在一个容器上设置CSS的color属性
  或直接在旋转器上使用`style`属性
-->
<q-spinner style="color: #e2aa6f" />

Vue属性

Vue属性 类型 说明
size 数字/字符串 数字（以像素为单位定义大小）或字符串（单位为CSS大小）。
color 字符串 Quasar调色板中的CSS颜色。

您可以在不损失质量的情况下更改旋转器的尺寸，因为使用了SVG。

使用特定的旋转器

如果您想使用与默认不同的旋转控制器，请使用特定的旋转控制器组件，该组件继承上述相同的属性。

以下特定的旋转器组件可用。 这些组件的名称是q-spinner-*name*，其中name是 ‘audio’、 ‘ball’、 ‘bars’、 ‘circles’、 ‘comment’、 ‘cube’、 ‘dots’、 ‘grid’、 ‘hearts’、 ‘ios’、 ‘mat’、 ‘oval’、 ‘puff’、 ‘rings’、 ‘tail’、 ‘facebook’、 ‘gears’、 ‘hourglass’、 ‘infinity’、 ‘pie’、 ‘radio’其中之一。

例子:

<!-- 特定旋转器图标 -->
<q-spinner-audio />

<!-- 具有选项的特定旋转器图标-->
<q-spinner-audio color="primary" :size="30" />

注意
不得不使用额外的组件来标识特定的旋转器看起来像额外的工作，但是，目标是在最终版本中能够删除所有其他spinner组件，以便将应用程序的整体包大小降低到最小。

旋转器用于像QInnerLoading和QBtn这样的组件或加载功能中。仅举几个例子。

进度条 转盘