# ArcProgressStackViewJS

**Repository Path**: openharmony-tpc/ArcProgressStackViewJS

## Basic Information

- **Project Name**: ArcProgressStackViewJS
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2021-09-17
- **Last Updated**: 2025-04-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 🚨 **重要提示 | IMPORTANT**
>
> **⚠️ 此代码仓已归档。新地址请访问 [ArcProgressStackViewJS](https://gitcode.com/openharmony-tpc/ArcProgressStackViewJS)。| ⚠️ This repository has been archived. For the new address, please visit [ArcProgressStackViewJS](https://gitcode.com/openharmony-tpc/ArcProgressStackViewJS).**
>
---
>
# ArcProgressStackViewJS
js项目，弧形进度条

## 效果图
<img src="screenshot/1.jpg"/>
<img src="screenshot/2.jpg"/>

## 如何使用
在js中初始化数据，配置每条进度条的标题，进度值（最大值为100），进度条颜色，背景色。
```javascript
import {Model} from '../../common/component/arcprogressstackview/Model.js'
export default {
    data: {
        models:new Array()
    },
    onInit() {
        this.models.push(new Model("Strategy",40,"#ffa50a","#a3a3a3"));
        this.models.push(new Model("Design",50,"#e08e00","#bbbbbb"));
        this.models.push(new Model("Development",38,"#b87400","#cccccc"));
        this.models.push(new Model("DA",79,"#8f5a00","#dddddd"));
    }
}
```
在hml自定义相关属性
```hml
<element name='arcprogress' src='../../common/component/arcprogressstackview/ArcProgress.hml'></element>
<arcprogress class="arcprogress" models="{{models}}" apsv-model-bg-enabled="true"
                 apsv-rounded="false" apsv-show-progress="true" apsv-textcolor="#000000"
                 apsv-typeface="serif" ></arcprogress>
```


##自定义属性
| 属性          | 描述 |数据类型|
|:---				 |:---|:---|
| apsv-rounded	     | 进度条是否显示圆角 |boolean|
| apsv-model-bg-enabled	     | 是否显示背景 |boolean|
| apsv-show-progress 	     |是否显示百分比进度文字 |boolean|
| apsv-textcolor	     | 文字颜色 |string|
| apsv-typeface 	     | 文字字体，支持sans-serif, serif, monospace三种字体 |string|

## LICENSE
```
Copyright (c) 2021 XuSaisai
ArcProgressStackViewJS is licensed under Mulan PSL v2.
You can use this software according to the terms and conditions of the Mulan PSL v2.
You may obtain a copy of Mulan PSL v2 at:
         http://license.coscl.org.cn/MulanPSL2
THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
See the Mulan PSL v2 for more details.
```