Skip to main content

checkbox

Last updated on

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à successminus, 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 valuetrue/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;
}