旋转器用于向用户显示当前正在及时进行的过程。 这是一项重要的UX功能,它使用户感到系统正在继续长期工作,例如从服务器获取数据或进行大量计算。

QSpinner API



size
: String
Description
Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
Examples
16px
2rem
xs
md
color
: String
Description
Color name for component from the Quasar Color Palette
Examples
primary
teal-10
thickness
: Number
Description
Override value to use for stroke-width
Default value
5

其它旋转器API

TIP

以下API适用于所有旋转器,但QSpinner除外。 使用QSpinnerCube进行示例。



size
: String
Description
Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
Examples
16px
2rem
xs
md
color
: String
Description
Color name for component from the Quasar Color Palette
Examples
primary
teal-10

用法



<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row">
      <q-spinner
        color="primary"
        size="3em"
      />

      <q-spinner
        color="primary"
        size="3em"
        :thickness="2"
      />

      <q-spinner
        color="primary"
        size="3em"
        :thickness="10"
      />
    </div>
  </div>
</template>

在下面的示例中,将鼠标悬停在旋转器上可以查看其名称。







请注意,默认情况下,QSpinner和所有其它旋转器将继承父元素的字体大小并将其应用为自己的字体大小。