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, ...

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/switch/index

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ính	Kiểu dữ liệu	Mô tả
name	string	Khai báo name khi được sử dụng trong form, được sử dụng để lấy value cho form
checked	boolean	Chỉ định giá trị của switch có được chọn hay không
disabled	boolean	Disable switch component
color	string	Màu của component, sử dụng mã màu như trong css
onChange	event	Sự kiện được gọi khi giá trị bị thay đổi, event.detail = { checked: checked }
controlled	boolean	Nế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;
}