Skip to main content

progress

Last updated on

Progress bar (thanh tiến trình).

Quét mã để trải nghiệm

Xem code mẫu trên Tini Studio

Demo

Trải nghiệm thử với trình giả lập bên dưới

Thuộc tính

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
percentnumber0Hiển thị đoạn active đạt bao nhiêu phần trăm. Nhận giá trị từ 0 tới 100.
show-infobooleanfalseHiển thị con số phần trăm ở bên phải thanh progress bar.
stroke-widthnumber4Độ dày đuờng viên của progress bar.
active-colorstring--brandMàu của đoạn active.
background-colorstring--background-progress-inactiveMàu của toàn bộ thanh progress.
activebooleanfalseSử 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
}
});