Skip to main content

button

Last updated on

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

Tiki Tini Button - Tini UI Design System Community

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ả
onTapfunction(EventObject)Hàm xử lý được gọi khi người dùng tap vào nút.
sizeenum('large', 'medium', 'small')largeKích thước của button.
typeenum('solid', 'outline', 'ghost')solidKiểu định sẵn của button.
shapeenum('pill', 'rounded', 'circle', 'square')pillHình dạng định sẵn của button.
disabledboolfalseNếu set về true, tắt tất cả interactions cho button.
skeletonboolfalseNếu set về true, tắt tất cả interactions cho button và hiển thị default skeleton.
loadingboolfalseNếu set về true, tắt tất cả interactions cho button, hiển thị loading indicator.
iconNameenum(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.
formTypeformTypeXem thêm button:formType.
classstringClass của button.
stylestringInline 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' });
}
});