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
Hoặc sử dụng link
https://tiki.vn/apps/vn.tiki.miniapp.demo?page=pages/component/basic/checkbox/index
Xem code mẫu trên Tini Studiohttps://tiki.vn/apps/vn.tiki.miniapp.demo?page=pages/component/basic/checkbox/index
Demo
Trải nghiệm thử với trình giả lập bên dưới
Thuộc tính
Thuộc tính | Kiểu dữ liệu | Mô tả |
---|---|---|
name | string | Tên của checkbox khi được sử dụng trong form, được sử dụng để lấy value cho form |
value | string | Giá trị của checkbox. Cần được khai báo khi sử dụng bên trong checkbox-group |
checked | boolean | Quy định checkbox có được mặc định chọn hay không |
disabled | boolean | Disable 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ó |
color | string | Màu của component checkbox, sử dụng mã màu như trong css |
icon | string | Loạ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 |
onChange | event | Sự 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;
}