进度条 KLProgress

基本形式

<kl-progress percent=25 class="f-mb10" />
<kl-progress percent=25>
    25%
</kl-progress>

进度条尺寸

<kl-progress class="f-mb10" size="lg" percent=40 />
<kl-progress class="f-mb10" percent=40 />
<kl-progress class="f-mb10" size="sm" percent=40 />

进度条颜色

<kl-progress class="f-mb10" color="#F86B6B" percent=25 />

在进度条上显示进度

size必须是lg时才生效

<kl-progress class="f-mb10" size="lg" percent=2 insideText />
<kl-progress class="f-mb10" size="lg" percent=25 insideText />
<kl-progress class="f-mb10" size="lg" percent=100 insideText />

显示与隐藏

可以通过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.class]	`string`		=> 补充class
[options.data.percent]	`number`	`36`	=> 百分比
[options.data.size]	`string`	`null`	=> 进度条的尺寸, 可选值sm/lg
[options.data.visible]	`boolean`	`true`	=> 是否显示
[options.data.insideText]	`boolean`	`true`	=> 进度是否在进度条上显示,size=lg时才生效;
[options.data.color]	`string`		=> 进度条的颜色