Nhảy tới nội dung

button

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');
  }
});