button
Tini Button là một button component được xây dựng dựa trên Design System của Tiki.

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/button/index
Xem code mẫu trên Tini Studiohttps://tiki.vn/apps/vn.tiki.miniapp.demo?page=pages/component/advance/actions/button/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ả |
---|---|---|---|
onTap | function(EventObject) | Hàm xử lý được gọi khi người dùng tap vào nút. | |
size | enum('large', 'medium', 'small') | large | Kích thước của button. |
type | enum('solid', 'outline', 'ghost') | solid | Kiểu định sẵn của button. |
shape | enum('pill', 'rounded', 'circle', 'square') | pill | Hình dạng định sẵn của button. |
disabled | bool | false | Nếu set về true , tắt tất cả interactions cho button. |
skeleton | bool | false | Nếu set về true , tắt tất cả interactions cho button và hiển thị default skeleton. |
loading | bool | false | Nếu set về true , tắt tất cả interactions cho button, hiển thị loading indicator. |
iconName | enum(icon:type) | Hiển thị một icon ở vị trí mặc định, icon sẽ bị ẩn nếu loading được đặt về true . Xem danh sách icon tại đây. | |
formType | formType | Xem thêm button:formType . | |
class | string | Class của button. | |
style | string | Inline styles cho button. |
Sample Code
Khai báo components:
Khai báo dưới đây sẽ thay thế
<button/>
mặc định của framework. Nếu không muốn điều này xảy ra, bạn có thể sử dụng tên khác tùy ý.
{
"defaultTitle": "Tini Button",
"usingComponents": {
"button": "@tiki.vn/tini-ui/es/tu-button/index"
}
}
<button onTap="onTap">Tini Button</button>
Page({
onTap(e) {
my.alert({ content: 'Button Clicked' });
}
});