stepper
stepper
dùng để tăng hoặc giảm giá trị hiện tại.
Quét mã để trải nghiệm
Hoặc sử dụng link
https://tiki.vn/apps/vn.tiki.miniapp.demo?page=pages/component/advance/form/stepper/index
Xem code mẫu trên Tini Studiohttps://tiki.vn/apps/vn.tiki.miniapp.demo?page=pages/component/advance/form/stepper/index
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ính | Kiểu dữ liệu | Giá trị mặc định | Mô tả |
---|---|---|---|
className | string | Custom class cho component | |
min | number | 0 | Giá trị nhỏ nhất |
max | number | 10000 | Giá trị lớn nhất |
value | number | 10 | Giá trị khởi tạo |
step | number | 1 | Giá trị mỗi lần tăng hoặc giảm, step có thể nhận giá trị kiểu double |
disabled | boolean | false | Disable stepper component |
readOnly | boolean | false | Nếu cờ được bật lên, users không thể thay đổi giá trị của stepper |
showNumber | boolean | false | Nếu cờ được bật lên, hiển thị giá trị trên stepper |
inputWidth | number | 40px | Độ rộng của phần input trong stepper |
vertical | boolean | false | Nếu cờ này được bật, stepper sẽ được hiện thị theo chiều dọc thay vì chiều ngang |
onChange | event | Sự 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);
}
});