Nhảy tới nội dung

stepper

stepper dùng để tăng hoặc giảm giá trị hiện tại.

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

Cài đặt tini-ui:

$> yarn add @tiki.vn/tini-ui

Thuộc tính

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
classNamestringCustom class cho component
minnumber0Giá trị nhỏ nhất
maxnumber10000Giá trị lớn nhất
valuenumber10Giá trị khởi tạo
stepnumber1Giá trị mỗi lần tăng hoặc giảm, step có thể nhận giá trị kiểu double
disabledbooleanfalseDisable stepper component
readOnlybooleanfalseNếu cờ được bật lên, users không thể thay đổi giá trị của stepper
showNumberbooleanfalseNếu cờ được bật lên, hiển thị giá trị trên stepper
inputWidthnumber40pxĐộ rộng của phần input trong stepper
verticalbooleanfalseNếu cờ này được bật, stepper sẽ được hiện thị theo chiều dọc thay vì chiều ngang
onChangeeventSự kiện được gọi khi giá trị thay đổi, với data có dạng (value: Number, mode: String) => void

Sample Code

index.txml
<view class="container">
<stepper
onChange="callBackFn"
step="{{1}}"
showNumber
value="{{value}}"
inputWidth="60px"
min="{{2}}" />
</view>
index.js
Page({
data: {
value: 8
},
callBackFn(value) {
console.log(value);
}
});