线性进度

Vue 组件
Circular Progress 环形进度
Vue 组件
Inner Loading 加载
Vue 组件
Spinners 加载项
Quasar 插件
Loading 加载
Quasar 插件
Loading Bar 加载条

QLinearProgress 组件显示一个彩色加载进度条。进度条可以有一个确定的进度，也可以有一个不确定的动画。它应该用于通知用户在后台正在进行某个操作。

QLinearProgress API

QLinearProgress API
buffer
: Number
说明
可选的缓冲值（0.0 < x < 1.0）
reverse
: Boolean
说明
进度条的反向方向
indeterminate
: Boolean
说明
将组件设置为不确定模式
query
: Boolean
说明
将组件置于查询模式中
instant-feedback
: Boolean
说明
当 model 数据发生变化时，不进行过渡效果

用法

确定的数据状态

<template>
  <div class="q-pa-md">
    <q-btn size="sm" color="primary" @click="randomize" label="Change Model" />

    <q-linear-progress :value="progress" class="q-mt-md" />

    <q-linear-progress :value="progress" color="warning" class="q-mt-sm" />

    <q-linear-progress :value="progress" color="secondary" class="q-mt-sm" />

    <q-linear-progress :value="progress" rounded color="accent" class="q-mt-sm" />

    <q-linear-progress :value="progress" rounded color="purple" track-color="orange" class="q-mt-sm" />

    <q-linear-progress :value="progress" rounded color="negative" class="q-mt-sm" />
  </div>
</template>

不确定的数据状态

<template>
  <div class="q-pa-md">
    <q-linear-progress indeterminate />

    <q-linear-progress indeterminate color="warning" class="q-mt-sm" />

    <q-linear-progress indeterminate color="secondary" class="q-mt-sm" />

    <q-linear-progress indeterminate rounded color="accent" class="q-mt-sm" />

    <q-linear-progress indeterminate rounded track-color="orange" color="purple" class="q-mt-sm" />

    <q-linear-progress indeterminate rounded color="negative" class="q-mt-sm" />
  </div>
</template>

TIP

对于不确定状态（上方）或查询状态（下方），您无需指定 value 属性。

<template>
  <div class="q-pa-md">
    <q-linear-progress query />

    <q-linear-progress query color="warning" class="q-mt-sm" />

    <q-linear-progress query color="secondary" class="q-mt-sm" />

    <q-linear-progress query color="accent" class="q-mt-sm" />

    <q-linear-progress query track-color="orange" color="purple" class="q-mt-sm" />

    <q-linear-progress query color="negative" class="q-mt-sm" />
  </div>
</template>

反向

<template>
  <div class="q-pa-md">
    <q-btn size="sm" color="primary" @click="randomize" label="Change Model" />

    <q-linear-progress reverse :value="progress" class="q-mt-md" />

    <q-linear-progress reverse :value="progress" color="warning" class="q-mt-sm" />

    <q-linear-progress reverse :value="progress" color="secondary" class="q-mt-sm" />
  </div>
</template>

样式

<template>
  <div class="q-pa-md">
    <q-linear-progress size="10px" :value="progress" />

    <q-linear-progress rounded size="20px" :value="progress" color="warning" class="q-mt-sm" />

    <q-linear-progress rounded size="15px" :value="progress" color="secondary" class="q-mt-sm" />

    <q-linear-progress size="25px" :value="progress" color="accent" class="q-mt-sm" />
  </div>
</template>
<template>
  <div class="q-pa-md q-gutter-md">
    <q-linear-progress
      v-for="size in ['xs', 'sm', 'md', 'lg', 'xl']"
      :key="size"
      :size="size"
      :value="progress"
      color="primary"
      @click="randomize"
    />
  </div>
</template>
<template>
  <div class="q-pa-md">
    <q-linear-progress stripe size="10px" :value="progress1" />

    <q-linear-progress stripe rounded size="20px" :value="progress2" color="warning" class="q-mt-sm" />
  </div>
</template>
<template>
  <div class="q-pa-md bg-grey-10 text-white">
    <q-linear-progress dark size="10px" :value="progress1" color="warning" />

    <q-linear-progress dark stripe rounded size="20px" :value="progress2" color="red" class="q-mt-sm" />

    <q-linear-progress dark rounded indeterminate color="secondary" class="q-mt-sm" />

    <q-linear-progress dark query color="cyan" class="q-mt-sm" />
  </div>
</template>

缓冲

<template>
  <div class="q-pa-md">
    <q-linear-progress :value="progress" :buffer="buffer" />

    <q-linear-progress :value="progress" :buffer="buffer" color="warning" class="q-mt-sm" />

    <q-linear-progress :value="progress" :buffer="buffer" color="secondary" class="q-mt-sm" />

    <q-linear-progress :value="progress" :buffer="buffer" color="accent" class="q-mt-sm" />

    <q-linear-progress :value="progress" :buffer="buffer" color="purple" track-color="orange" class="q-mt-sm" />

    <q-linear-progress :value="progress" :buffer="buffer" color="negative" class="q-mt-sm" />
  </div>
</template>

添加标签

要将标签添加到进度条，可以使用默认插槽。 请注意：

  • 用足够大的 size 以显示标签
  • 设置标签的文本颜色，以使其在填充和未填充区域均可见，或使用 text-shadow CSS，或使用 QBadge，以下示例所示:
<template>
  <div class="q-pa-md">
    <q-linear-progress size="25px" :value="progress1" color="accent">
      <div class="absolute-full flex flex-center">
        <q-badge color="white" text-color="accent" :label="progressLabel1" />
      </div>
    </q-linear-progress>

    <q-linear-progress size="50px" :value="progress2" color="accent" class="q-mt-sm">
      <div class="absolute-full flex flex-center">
        <q-badge color="white" text-color="accent" :label="progressLabel2" />
      </div>
    </q-linear-progress>
  </div>
</template>
30.00%
90.00%
查看更多？
Vue 组件
Knob 旋钮
Vue 组件
List & List Items 列表与列表项
发现了一处错误？帮助改进提交问题
Privacy Policy | Quasar Artwork
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。