Nhảy tới nội dung

checkbox

checkbox là một component cho phép người dùng chọn một hoặc nhiều phương án.

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ệuMô tả
namestringTên của checkbox khi được sử dụng trong form, được sử dụng để lấy value cho form
valuestringGiá trị của checkbox. Cần được khai báo khi sử dụng bên trong checkbox-group
checkedbooleanQuy định checkbox có được mặc định chọn hay không
disabledbooleanDisable checkbox, Nếu giá trị là true, người dùng sẽ không thay đổi giá trị của checkbox bằng cách tap vào nó
colorstringMàu của component checkbox, sử dụng mã màu như trong css
iconstringLoại icon hiển thị khi checkbox được chọn. Chỉ hỗ trợ 2 loại icon là success và minus, Xem thêm. Giá trị mặc định là success
onChangeeventSự kiện được gọi khi giá trị bị thay đổi, event.detail = { value: value }. Giá trị của value là true/false tùy vào checkbox được chọn hay không

Sample Code​

index.txml
<view>
  <block-header title="Usage" description="Checkboxes are used to let a user choose one or more options from a limited number of options." />

  <view class="block-content">
    <text class="title mb-8">Variants</text>
    <text class="subtitle mb-8">State</text>
    <text class="component-state">Default, Selected, Disable and Disable - Selected</text>

    <view class="component-item">
      <checkbox onChange="onChange" />
      <text>Default</text>
    </view>
    <view class="component-item">
      <checkbox checked />
      <text>Selected</text>
    </view>
    <view class="component-item">
      <checkbox disabled />
      <text>Disable</text>
    </view>
    <view class="component-item last">
      <checkbox checked disabled />
      <text>Disable - Selected</text>
    </view>
  </view>
</view>
index.js
Page({
  onChange(e) {
    console.log('onChange', e);
  }
});
index.tcss
.component-item {
  flex-direction: row;
  align-items: center;
}