uploader
uploader
là component thuộc tini-ui hỗ trợ chọn và xem trước tập tin (Hiện tại chỉ hỗ trợ tập tin là hình ả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/advance/actions/uploader/index
Xem code mẫu trên Tini Studiohttps://tiki.vn/apps/vn.tiki.miniapp.demo?page=pages/component/advance/actions/uploader/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 uploader
Thuộc tính | Kiểu dữ liệu | Giá trị mặc định | Mô tả |
---|---|---|---|
className | string | Custom class | |
style | string | Inline style | |
value | string | Giá trị khởi tạo | |
icon | string | Type của icon, xem thêm tại đây | |
iconSize | 40 | Size của icon | |
disabled | boolean | false | Disable uploader |
showPreview | boolean | true | Cho phép bấm vào hình ảnh để show preview uploader |
sourceType | array | ['camera, 'album'] | Chụp hình bằng camera hay lấy hình từ album. Mặc định là cả hai |
onChange | event | Sự kiện sẽ được gọi khi chọn hoặc xoá hình ảnh` |
Thuộc tính hình ảnh
Thuộc tính | Kiểu dữ liệu | Mô tả |
---|---|---|
path | string | Đường đẫn tạm thời của ảnh |
size | number | Dung lượng của ảnh. Đơn vị tính: byte |
width | number | Chiều rộng của ảnh. Đơn vị tính: pixel |
height | number | Chiều cao của ảnh. Đơn vị tính pixel |
Sample Code
index.json
{
"defaultTitle": "Uploader",
"usingComponents": {
"uploader": "@tiki.vn/tini-ui/es/uploader/index"
}
}
index.txml
<uploader/>
<uploader icon="plus"/>
<uploader style="width: 80px; height: 80px;" iconSize="40"/>
<uploader>
<view class="flex items-center px-2x-small">
<icon type="info" class="mr-2x-small"/>
<text>Select image</text>
</view>
</uploader>
<uploader disabled/>
<uploader value="https://i.picsum.photos/id/77/500/500.jpg?hmac=tSoa4RHbrWHe6CfA-uOJZpiHj-3e9OoYJ91vBlFaMD8"/>
<uploader onChange="onChange"/>
index.js
Page({
onChange(images) {
my.alert({
title: 'Uploader was changed',
content: JSON.stringify(images)
});
}
});