Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(progress): update code sample #690

Merged
merged 1 commit into from
Aug 1, 2022
Merged

docs(progress): update code sample #690

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 15 additions & 42 deletions src/progress/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,53 +23,26 @@ isComponent: true

## 代码演示

### 类型
<!-- 基础进度条 -->
```html
<t-progress></t-progress>
<t-progress percentage="88" ></t-progress>
<t-progress percentage="100" color="#0052D9"></t-progress>
```
### 基础进度条

### 状态
```html
<!-- 默认状态 -->
<t-progress percentage="88"></t-progress>

<!-- 进度状态发生重大错误 -->
<t-progress percentage="88" status="error"></t-progress>

<!-- 进度中止 -->
<t-progress percentage="88" status="warning"></t-progress>

<!-- 进度完成 -->
<t-progress percentage="100"></t-progress>

<!-- 过度样式 -->
<view class="box">
<t-progress percentage="{{percentage}}"></t-progress>
<view class="button-group">
<t-button bindtap="clickReduce" theme="primary" variant="plain" size="small">减少</t-button>
<view class="space"></view>
<t-button bindtap="clickAdd" theme="primary" size="small">增加</t-button>
</view>
</view>
```
{{ base }}

### 自定义颜色
```html
<t-progress percentage="88" trackColor="#EAC9FF" color="#CD04FF" ></t-progress>
```
### 进度条状态

### 规格
```html
<!-- 带数值进度条 -->
<t-progress percentage="88"></t-progress>
{{ status }}

<!-- 无数值进度条 -->
<t-progress percentage="72" label="{{false}}"></t-progress>
```

### 过度样式

{{ transition }}

### 自定义颜色/圆角

{{ custom }}

### 带数值/无数值进度条

{{ size }}

## API
### Progress Props
Expand Down
1 change: 1 addition & 0 deletions src/progress/_example/base/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Component({});
6 changes: 6 additions & 0 deletions src/progress/_example/base/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"component": true,
"usingComponents": {
"t-progress": "tdesign-miniprogram/progress/progress"
}
}
9 changes: 9 additions & 0 deletions src/progress/_example/base/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<view class="progress-container">
<t-progress></t-progress>
</view>
<view class="progress-container">
<t-progress percentage="88"></t-progress>
</view>
<view class="progress-container">
<t-progress percentage="100" color="#0052D9"></t-progress>
</view>
5 changes: 5 additions & 0 deletions src/progress/_example/base/index.wxss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.progress-container {
background-color: #fff;
padding: 16rpx 32rpx;
margin-bottom: 32rpx;
}
1 change: 1 addition & 0 deletions src/progress/_example/custom/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Component({});
6 changes: 6 additions & 0 deletions src/progress/_example/custom/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"component": true,
"usingComponents": {
"t-progress": "tdesign-miniprogram/progress/progress"
}
}
6 changes: 6 additions & 0 deletions src/progress/_example/custom/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<view class="progress-container">
<t-progress percentage="88" trackColor="#EAC9FF" color="#CD04FF" t-class-label="external-class-label"></t-progress>
</view>
<view class="progress-container">
<t-progress percentage="88" t-class-bar="external-class-bar"></t-progress>
</view>
13 changes: 13 additions & 0 deletions src/progress/_example/custom/index.wxss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.progress-container {
background-color: #fff;
padding: 16rpx 32rpx;
margin-bottom: 32rpx;
}

.external-class-label {
color: #d504d9;
}

.external-class-bar {
border-radius: 20rpx;
}
8 changes: 7 additions & 1 deletion src/progress/_example/progress.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
{
"navigationBarTitleText": "Progress 进度条",
"navigationBarBackgroundColor": "#fff",
"usingComponents": {}
"usingComponents": {
"base": "./base",
"transition": "./transition",
"status": "./status",
"custom": "./custom",
"size": "./size"
}
}
22 changes: 0 additions & 22 deletions src/progress/_example/progress.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +0,0 @@
.box {
background-color: #fff;
padding: 16rpx 32rpx;
margin-bottom: 32rpx;

.button-group {
display: flex;
justify-content: center;
padding-bottom: 16rpx;
.space {
width: 32rpx;
}
}

.external-class-label {
color: #d504d9;
}

.external-class-bar {
border-radius: 20rpx;
}
}
18 changes: 1 addition & 17 deletions src/progress/_example/progress.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1 @@
Page({
data: {
percentage: 88,
},

clickAdd() {
this.setData({
percentage: Math.min(this.data.percentage + 10, 100),
});
},

clickReduce() {
this.setData({
percentage: Math.max(0, this.data.percentage - 10),
});
},
});
Page({});
70 changes: 11 additions & 59 deletions src/progress/_example/progress.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,70 +2,22 @@
<view class="demo-title">Progress 进度条</view>
<view class="demo-desc">在导航栏下方，用于给用户显示提示消息</view>
<t-demo title="01 类型" desc="基础进度条">
<view class="box">
<t-progress></t-progress>
</view>
<view class="box">
<t-progress percentage="88"></t-progress>
</view>
<view class="box">
<t-progress percentage="100" color="#0052D9"></t-progress>
</view>
<base />
</t-demo>

<t-demo title="02 状态" desc="默认状态">
<view class="box">
<t-progress percentage="88"></t-progress>
</view>

<view class="demo-section__desc">进度状态发生重大错误</view>
<view class="box">
<t-progress percentage="88" status="error"></t-progress>
</view>

<view class="demo-section__desc">进度中止</view>
<view class="box">
<t-progress percentage="88" status="warning"></t-progress>
</view>

<view class="demo-section__desc">进度完成</view>
<view class="box">
<t-progress percentage="100"></t-progress>
</view>

<view class="demo-section__desc">过度样式</view>
<view class="box">
<t-progress percentage="{{percentage}}"></t-progress>
<view class="button-group">
<t-button bindtap="clickReduce" theme="primary" variant="plain" size="small">减少</t-button>
<view class="space"></view>
<t-button bindtap="clickAdd" theme="primary" size="small">增加</t-button>
</view>
</view>
<t-demo title="02 状态" desc="进度条状态">
<status />
</t-demo>

<view class="demo-section__desc">自定义颜色</view>
<view class="box">
<t-progress
percentage="88"
trackColor="#EAC9FF"
color="#CD04FF"
t-class-label="external-class-label"
></t-progress>
</view>
<view class="demo-section__desc">自定义圆角</view>
<view class="box">
<t-progress percentage="88" t-class-bar="external-class-bar"></t-progress>
</view>
<t-demo desc="过度样式">
<transition />
</t-demo>

<t-demo title="03 规格" desc="带数值进度条">
<view class="box">
<t-progress percentage="88"></t-progress>
</view>
<t-demo desc="自定义颜色/圆角">
<custom />
</t-demo>

<view class="demo-section__desc">无数值进度条</view>
<view class="box">
<t-progress percentage="72" label="{{false}}"></t-progress>
</view>
<t-demo title="03 规格" desc="带数值/无数值进度条">
<size />
</t-demo>
</view>
1 change: 1 addition & 0 deletions src/progress/_example/size/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Component({});
6 changes: 6 additions & 0 deletions src/progress/_example/size/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"component": true,
"usingComponents": {
"t-progress": "tdesign-miniprogram/progress/progress"
}
}
6 changes: 6 additions & 0 deletions src/progress/_example/size/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<view class="progress-container">
<t-progress percentage="88"></t-progress>
</view>
<view class="progress-container">
<t-progress percentage="72" label="{{false}}"></t-progress>
</view>
5 changes: 5 additions & 0 deletions src/progress/_example/size/index.wxss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.progress-container {
background-color: #fff;
padding: 16rpx 32rpx;
margin-bottom: 32rpx;
}
1 change: 1 addition & 0 deletions src/progress/_example/status/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Component({});
6 changes: 6 additions & 0 deletions src/progress/_example/status/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"component": true,
"usingComponents": {
"t-progress": "tdesign-miniprogram/progress/progress"
}
}
12 changes: 12 additions & 0 deletions src/progress/_example/status/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<view class="progress-container">
<t-progress percentage="88"></t-progress>
</view>
<view class="progress-container">
<t-progress percentage="88" status="error"></t-progress>
</view>
<view class="progress-container">
<t-progress percentage="88" status="warning"></t-progress>
</view>
<view class="progress-container">
<t-progress percentage="100"></t-progress>
</view>
5 changes: 5 additions & 0 deletions src/progress/_example/status/index.wxss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.progress-container {
background-color: #fff;
padding: 16rpx 32rpx;
margin-bottom: 32rpx;
}
19 changes: 19 additions & 0 deletions src/progress/_example/transition/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
Component({
data: {
percentage: 88,
},

methods: {
clickAdd() {
this.setData({
percentage: Math.min(this.data.percentage + 10, 100),
});
},

clickReduce() {
this.setData({
percentage: Math.max(0, this.data.percentage - 10),
});
},
},
});
6 changes: 6 additions & 0 deletions src/progress/_example/transition/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"component": true,
"usingComponents": {
"t-progress": "tdesign-miniprogram/progress/progress"
}
}
8 changes: 8 additions & 0 deletions src/progress/_example/transition/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<view class="progress-container">
<t-progress percentage="{{percentage}}"></t-progress>
<view class="button-group">
<t-button bindtap="clickReduce" theme="primary" variant="plain" size="small">减少</t-button>
<view class="space"></view>
<t-button bindtap="clickAdd" theme="primary" size="small">增加</t-button>
</view>
</view>
15 changes: 15 additions & 0 deletions src/progress/_example/transition/index.wxss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
.progress-container {
background-color: #fff;
padding: 16rpx 32rpx;
margin-bottom: 32rpx;
}

.button-group {
display: flex;
justify-content: center;
padding-bottom: 16rpx;
}

.button-group .space {
width: 32rpx;
}