进度条 KLProgress

基本形式

<kl-progress class="f-mb10" percent=25 />
<kl-progress class="f-mb10" percent=50 />
<kl-progress class="f-mb10" percent=75 />
<kl-progress class="f-mb10" percent=100 />

var component = new NEKUI.Component({
    template: template
});

进度条尺寸

<kl-progress class="f-mb10" size="xs" percent=20 />
<kl-progress class="f-mb10" size="sm" percent=40 />
<kl-progress class="f-mb10" percent=60 />
<kl-progress class="f-mb10" size="lg" percent=80 />
<kl-progress class="f-mb10" size="xl" percent=100 />

var component = new NEKUI.Component({
    template: template
});

进度条状态

<kl-progress class="f-mb10" state="info" percent=25 />
<kl-progress class="f-mb10" state="success" percent=50 />
<kl-progress class="f-mb10" state="warning" percent=75 />
<kl-progress class="f-mb10" state="error" percent=100 />

var component = new NEKUI.Component({
    template: template
});

条纹与激活

striped属性控制了进度条是否显示条纹；active属性控制了进度条的动画效果显示。

仅当striped属性为true，并且active属性也为true时候，进度条才会显示动画。

<kl-progress percent=50 striped active />

var component = new NEKUI.Component({
    template: template
});

百分比文字显示

text属性可以为Boolean或String类型。

当类型为Boolean时，text属性控制了进度条上是否显示百分比；当类型为String时，进度条上将显示text的值。

<div class="g-row">
    <kl-input placeholder="输入显示在进度条上的文字" value={displayText} />
</div>
<kl-progress percent=50 text={displayText || true} />

var component = new NEKUI.Component({
    template: template,
    data: {
        displayText: ''
    }
});

显示与隐藏

可以通过visible属性来控制进度条的显示与隐藏

<kl-button
    class="f-mb10"
    title={visible ? '已显示进度条' : '已隐藏进度条'}
    on-click={visible = !visible}
/>
<kl-progress percent=50 visible={visible} />

var component = new NEKUI.Component({
    template: template,
    data: {
        visible: true
    }
});

API

KLProgress

Param	Type	Default	Description
[options.data]	`object`		= 绑定属性
[options.data.percent]	`number`	`36`	=> 百分比
[options.data.text]	`string/boolean`	`true`	=> 在进度条中是否显示百分比。值为`string`时显示该段文字。
[options.data.size]	`string`	`null`	=> 进度条的尺寸
[options.data.state]	`string`	`null`	=> 进度条的状态
[options.data.striped]	`boolean`	`false`	=> 是否显示条纹
[options.data.active]	`boolean`	`false`	=> 进度条是否为激活状态，当`striped`为`true`时，进度条显示动画
[options.data.visible]	`boolean`	`true`	=> 是否显示
[options.data.class]	`string`		=> 补充class