@tarojs/components
Version:
Taro 组件库
190 lines (189 loc) • 4.94 kB
JavaScript
import { h, Host } from '@stencil/core';
export class Progress {
constructor() {
this.percent = 0;
this.showInfo = false;
this.borderRadius = 0;
this.fontSize = 16;
this.strokeWidth = 6;
this.activeColor = '#09BB07';
this.backgroundColor = '#EBEBEB';
this.active = false;
}
render() {
const { percent, showInfo, borderRadius, fontSize, strokeWidth, activeColor, backgroundColor, active } = this;
const pgPercent = percent > 100 ? 100 : percent < 0 ? 0 : percent;
const pgHeight = {
height: strokeWidth + 'px',
backgroundColor
};
const transition = active ? 'width 1s ease-in-out' : 'none';
const pgWidth = {
width: `${pgPercent}%`,
transition,
WebkitTransition: transition,
backgroundColor: activeColor,
borderRadius: borderRadius ? `${borderRadius}px` : '0px'
};
return (h(Host, { class: 'weui-progress' }, h("div", { class: 'weui-progress__bar', style: pgHeight }, h("div", { class: 'weui-progress__inner-bar', style: pgWidth })), showInfo && (h("div", { class: 'weui-progress__opr', style: { 'font-size': `${fontSize}px` } }, h("span", null, pgPercent, "%")))));
}
static get is() { return "taro-progress-core"; }
static get originalStyleUrls() {
return {
"$": ["./style/index.scss"]
};
}
static get styleUrls() {
return {
"$": ["./style/index.css"]
};
}
static get properties() {
return {
"percent": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "percent",
"reflect": false,
"defaultValue": "0"
},
"showInfo": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "show-info",
"reflect": false,
"defaultValue": "false"
},
"borderRadius": {
"type": "any",
"mutable": false,
"complexType": {
"original": "number | string",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "border-radius",
"reflect": false,
"defaultValue": "0"
},
"fontSize": {
"type": "any",
"mutable": false,
"complexType": {
"original": "number | string",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "font-size",
"reflect": false,
"defaultValue": "16"
},
"strokeWidth": {
"type": "any",
"mutable": false,
"complexType": {
"original": "number | string",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "stroke-width",
"reflect": false,
"defaultValue": "6"
},
"activeColor": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "active-color",
"reflect": false,
"defaultValue": "'#09BB07'"
},
"backgroundColor": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "background-color",
"reflect": false,
"defaultValue": "'#EBEBEB'"
},
"active": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "active",
"reflect": false,
"defaultValue": "false"
}
};
}
}