Skip to main content

button

Last updated on

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ả
sizestringlargeKích thước của button. Nhận các giá trị = [large || medium || small].
typestringsolidKiểu button. Nhận các giá trị = [solid || outline || ghost].
loadingbooleanfalseHiển thị icon loading bên cạnh caption. Trong lúc hiển thị loading, button bị vô hiệu hoá.
disabledbooleanfalseVô hiệu hoá button.
form-typestringGiá trị là submit hoặc reset, sử dụng với form. Khi tap vào button, sẽ gọi sự kiện onSubmit hoặc onReset của form
onTapeventSự kiện được kích hoạt khi tap vào button.
---oOo---

Các kiểu nút

solid button

Các thành phần của button - caption, đường viền và màu nền - được hiển thị đầy đủ.

outline button

Button gồm caption và đuờng viền; màu nền thì transparent.

ghost button

Button chỉ có caption; màu nền cũng như đường viền thì transparent.

Sample Code

index.txml

<view class="container">
<view class="block">
<text>type: solid</text>
<button type="solid" onTap="onTap">Solid</button>
<button type="solid" disabled >Solid(disabled)</button>
<button type="solid" size="medium">Solid(medium)</button>
<button type="solid" size="small">Solid(small)</button>
<button type="solid" loading>Solid(loading)</button>
</view>

<view class="block">
<text>type: outline</text>
<button type="outline">Outline</button>
<button type="outline" disabled >Outline(disabled)</button>
<button type="outline" size="medium">Outline(medium)</button>
<button type="outline" size="small">Outline(small)</button>
<button type="outline" loading>Outline(loading)</button>
</view>

<view class="block">
<text>type: ghost</text>
<button type="ghost">Ghost</button>
<button type="ghost" disabled >Ghost(disabled)</button>
<button type="ghost" size="medium">Ghost(medium)</button>
<button type="ghost" size="small">Ghost(small)</button>
<button type="ghost" loading>Ghost(loading)</button>
</view>
</view>
index.tcss
.container {
min-height: 100%;
background-color: var(--gray20);
padding: 16px;
}

.block {
background-color: white;
margin: 8px 0;
padding: 16px;
border-radius: var(--border-radius-rounded-4px);
}

button {
margin-top: 8px;
width: 100%;
}
index.js
Page({
onTap() {
console.log('Button onTap');
}
});