Vuetify

商店

企业版

v-progress-lineear 组件用于将数据直观传输给用户。它们也可以表示一个不确定的数量,如加载或处理。

最简单的形式,v-progress-linear 显示一个水平进度条。使用 value 属性来控制进度。

从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。

下面是一些简单到复杂的例子。

进度线条组件可以有一个由 v-model 修改的确定性状态。

使用 indeterminate 属性, v-progress-linear 持续不断的动画。

缓冲区状态同时表示两个值。 主值由 v-model 控制,而缓冲区由 buffer-value 属性控制。

query 属性设置为 true 时,query 状态由不确定性的真实性控制 。

您还可以使用属性 colorbackground-color 设置颜色。

rounded 属性是一种替代样式,为 v-progress-linear 组件添加了边框半径。

stream 属性与 buffer-value 一起工作,向用户传达正在进行某些操作。您可以使用 buffer-valuevalue 的任何组合来实现您的设计。

这将在 v-progress-linear 的值部分上应用条纹背景。

Displays reversed progress (right to left in LTR mode and left to right in RTL).

使用 absolute 属性,我们可以将 v-progress-linear 组件定位在 v-toolbar 的底部。我们还使用了 active 属性来控制进度的可见性。

v-progress-linear 组件有助于向用户解释他们正在等待响应。

使用 v-model 时,v-progress-linear 组件将响应用户输入。 您可以使用默认插槽或绑定本地模型以显示进度内部。 如果要在线性组件上寻找高级功能,请查看 v-slider

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!