You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
4.1 KiB
102 lines
4.1 KiB
<import src="../common/template/icon.wxml" />
|
|
<wxs src="../common/utils.wxs" module="_" />
|
|
<wxs src="./progress.wxs" module="this" />
|
|
|
|
<view style="{{_._style([style, customStyle])}}" class="{{classPrefix}} class">
|
|
<view
|
|
aria-role="progressbar"
|
|
role="progressbar"
|
|
aria-valuenow="{{computedProgress}}"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
aria-label="{{ ariaLabel || this.getAriaLabel(status) }}"
|
|
aria-labelledby="{{ ariaLabelledby }}"
|
|
aria-describedby="{{ ariaDescribedby }}"
|
|
aria-busy="{{ ariaBusy }}"
|
|
wx:if="{{theme === this.PRO_THEME.LINE}}"
|
|
class="{{classPrefix }}--thin {{classPrefix}}--status--{{status || computedStatus}} {{prefix}}-class"
|
|
>
|
|
<view
|
|
class="{{classPrefix }}__bar"
|
|
style="height: {{heightBar}}px;border-radius: {{heightBar}}px;background-color: {{bgColorBar}}"
|
|
>
|
|
<view
|
|
class="{{classPrefix }}__inner {{prefix}}-class-bar"
|
|
style="background: {{colorBar}}; width: {{computedProgress + '%'}}"
|
|
></view>
|
|
</view>
|
|
<view wx:if="{{label}}" class="{{classPrefix}}__info {{prefix}}-class-label">
|
|
<template
|
|
wx:if="{{_.includes(this.STATUS, status)}}"
|
|
is="icon"
|
|
data="{{class: classPrefix + '__icon', size:'44rpx', name: this.LINE_STATUS_ICON[status]}}"
|
|
></template>
|
|
<text wx:else>{{ _.isString(label)? label: computedProgress + '%' }}</text>
|
|
</view>
|
|
<slot wx:else name="label" />
|
|
</view>
|
|
|
|
<view
|
|
wx:if="{{theme === this.PRO_THEME.PLUMP}}"
|
|
aria-role="progressbar"
|
|
role="progressbar"
|
|
aria-valuenow="{{computedProgress}}"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
aria-label="{{ ariaLabel || this.getAriaLabel(status) }}"
|
|
aria-labelledby="{{ ariaLabelledby }}"
|
|
aria-describedby="{{ ariaDescribedby }}"
|
|
aria-busy="{{ ariaBusy }}"
|
|
class="{{classPrefix}}__bar {{classPrefix}}--plump {{computedProgress > 10 ? classPrefix + '--over-ten': classPrefix + '--under-ten'}} {{classPrefix}}--status--{{status || computedStatus}} {{prefix}}-class"
|
|
style="height: {{heightBar}}px;border-radius: {{heightBar}}px;background-color: {{bgColorBar}}"
|
|
>
|
|
<view
|
|
class="{{classPrefix}}__inner {{prefix}}-class-bar"
|
|
style="background: {{colorBar}}; width: {{computedProgress}}%"
|
|
>
|
|
<view wx:if="{{label && computedProgress > 10}}" class="{{classPrefix }}__info {{prefix}}-class-label">
|
|
<text>{{ _.isString(label)? label: computedProgress + '%' }}</text>
|
|
</view>
|
|
<slot wx:else name="label" />
|
|
</view>
|
|
<view wx:if="{{label && computedProgress <= 10}}" class="{{ classPrefix }}__info {{prefix}}-class-label">
|
|
<text>{{ _.isString(label)? label: computedProgress + '%' }}</text>
|
|
</view>
|
|
<slot wx:else name="label" />
|
|
</view>
|
|
|
|
<view
|
|
wx:if="{{theme === this.PRO_THEME.CIRCLE}}"
|
|
aria-role="progressbar"
|
|
role="progressbar"
|
|
aria-valuenow="{{computedProgress}}"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
aria-label="{{ ariaLabel || this.getAriaLabel(status) }}"
|
|
aria-labelledby="{{ ariaLabelledby }}"
|
|
aria-describedby="{{ ariaDescribedby }}"
|
|
aria-busy="{{ ariaBusy }}"
|
|
class="{{classPrefix}}--status--{{status || computedStatus}} {{prefix}}-class"
|
|
>
|
|
<view
|
|
class="{{classPrefix}}__canvas--circle"
|
|
style="background-image: conic-gradient( {{colorCircle || this.STATUS_COLOR[status] || '#0052d9'}} {{computedProgress}}%, {{bgColorBar || '#e7e7e7'}} 0%);"
|
|
>
|
|
<view
|
|
class="{{classPrefix}}__canvas--inner {{prefix}}-class-bar"
|
|
style="{{innerDiameter? 'width:'+ innerDiameter*2 + 'rpx;' + 'height:'+ innerDiameter*2 + 'rpx;': ''}}"
|
|
>
|
|
<view wx:if="{{label}}" class="{{classPrefix}}__info {{prefix}}-class-label">
|
|
<template
|
|
wx:if="{{_.includes(this.STATUS, status)}}"
|
|
is="icon"
|
|
data="{{class: classPrefix + '__icon', size:'96rpx', name: this.CIRCLE_STATUS_ICON[status]}}"
|
|
></template>
|
|
<text wx:else>{{ _.isString(label)? label: computedProgress + '%' }}</text>
|
|
</view>
|
|
<slot wx:else name="label" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|