Skip to main content

switch

switch hoạt động như một công tắc giúp người dùng chuyển đổi giữa hai trạng thái - ON vs OFF, YES vs NO, ...

switch component

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

Chi tiết

Thuộc tínhKiểu dữ liệuMô tả
namestringKhai báo name khi được sử dụng trong form, được sử dụng để lấy value cho form
checkedbooleanChỉ định giá trị của switch có được chọn hay không
disabledbooleanDisable switch component
colorstringMàu của component, sử dụng mã màu như trong css
onChangeeventSự kiện được gọi khi giá trị bị thay đổi, event.detail = { checked: checked }
controlledbooleanNếu giá trị là true, giá trị của component chỉ thay đổi thông qua setData

Sample Code

index.txml
<view>
<block-header title="Usage" description="Switches give user control over a feature or option that can be turned on or off." />

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

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