进度条

v-progress-circularv-progress-linear组件用于将数据直观地传达给用户。他们也可以代表一个不确定的数量,如加载或处理。这些组件包含一个位于组件容器中心的插槽。

用例

By default, progress circular uses the applications secondary color.

API

v-progress-circular
名称
button
默认值
false
类型
boolean

Components.Progress.

名称
color
默认值
undefined
类型
string

将指定的色彩应用与控件

名称
indeterminate
默认值
false
类型
boolean

Components.Progress.

名称
rotate
默认值
0
类型
number | string

Components.Progress.

名称
size
默认值
32
类型
number | string

设置元素的高度和宽度

名称
value
默认值
0
类型
number | string

控制可见性

名称
width
默认值
4
类型
number | string

内容的宽度

示例

圆环色彩

可以使用其他颜色。

不定圆环

一个不确定的进度圆环永远循环动画。

圆环大小和宽度

进度圆环组件可以改变宽度和大小。

圆环环绕

进度圆环原生可以环绕。

定值线条

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

不定线条

正如进度圆环组件一样,进度线条有一个不确定的状态。

缓冲

缓冲区状态同事表示两个值,主值由模型控制,而缓冲区由buffer-value属性控制。

查询不确定和确定

To query state is controlled by the truthiness of indeterminate with the query prop set to true.

自定义高度和上下文色彩

自定义高度或上下文颜色可以应用于进度条。边栏的原色是您的应用程序的主要颜色。

自定义色彩

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

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore