线型进度条 LinearProgress

示例

基本形式

<linearProgress percent="36" />

颜色扩展

<linearProgress percent="25" state="info" />
<linearProgress percent="50" state="success" />
<linearProgress percent="75" state="warning" />
<linearProgress percent="100" state="error" />

尺寸扩展

<linearProgress percent="20" size="xs" />
<linearProgress percent="40" size="sm" />
<linearProgress percent="60" />
<linearProgress percent="80" size="lg" />
<linearProgress percent="100" size="xl" />

条纹

<linearProgress percent="36" striped />

条纹动画

<linearProgress percent="72" state="error" striped active />

.u-linearProgress + .u-linearProgress { margin-top: 20px; }

API

Class

LinearProgress

继承自。

Options

new LinearProgress()

参数	类型	默认值	数据流向	描述
`data`	Object			绑定属性
`data.percent`	number	`0`	outside => inside	百分比
`data.size`	string		outside => inside	进度条的尺寸
`data.state`	string		outside => inside	进度条的状态
`data.striped`	boolean	`false`	outside => inside	是否显示条纹
`data.active`	boolean	`false`	outside => inside	进度条是否为激活状态，当`striped`为`true`时，进度条显示动画
`data.visible`	boolean	`true`	outside => inside	是否显示
`data.class`	string	`''`	outside => inside	补充class