progress
Progress bar (thanh tiến trình).
Quét mã để trải nghiệm
Hoặc sử dụng link
https://tiki.vn/apps/vn.tiki.miniapp.demo?page=pages/component/basic/progress/index
Xem code mẫu trên Tini Studiohttps://tiki.vn/apps/vn.tiki.miniapp.demo?page=pages/component/basic/progress/index
Demo
Trải nghiệm thử với trình giả lập bên dưới
Thuộc tính
Thuộc tính | Kiểu dữ liệu | Giá trị mặc định | Mô tả |
---|---|---|---|
percent | number | 0 | Hiển thị đoạn active đạt bao nhiêu phần trăm. Nhận giá trị từ 0 tới 100. |
show-info | boolean | false | Hiển thị con số phần trăm ở bên phải thanh progress bar. |
stroke-width | number | 4 | Độ dày đuờng viên của progress bar. |
active-color | string | --brand | Màu của đoạn active. |
background-color | string | --background-progress-inactive | Màu của toàn bộ thanh progress. |
active | boolean | false | Sử dụng animation cho thanh progress. |
Sample Code
index.txml
<view class="container">
<view class="block">
<progress />
<progress percent="20" show-info="{{showInfo}}" />
<progress percent="40" stroke-width="20" />
<progress percent="60" active-color="red" />
<progress percent="80" background-color="green" />
<progress percent="90" active="true" show-info="true" />
<progress percent="100" />
</view>
</view>
index.tcss
.container {
min-height: 100%;
background-color: var(--gray20);
padding: 16px;
}
.block {
background-color: white;
margin: 8px 0;
padding: 16px;
border-radius: var(--border-radius-rounded-4px);
}
progress {
margin-bottom: 32px;
}
index.js
/* js */
Page({
data: {
showInfo: true
}
});