Switch

Cập nhật lần cuối: 27/05/2022

Tạo giao diện cho phép người dùng thực hiện bật, tắt một chức năng

Properties

Switch

Name	Type	Default	Description
label	string		Thêm nhãn cho switch
size	SwitchSize		Kích thước của switch
wrapperClassName	string		Thêm class name cho wrapper của switch

Type

SwitchSize

Name	Description
"small"	Size small
"medium"	Size medium

Example

Open Sandbox

import React from "react";
import { Page, Switch, Text } from "zmp-ui";

export default function HomePage(props) {
  return (
    <Page className="section-container">
      <Text.Title size="small">Switch</Text.Title>
      Medium Size
      <div>
        <Switch label="Label" />
      </div>
      <div>
        <Switch checked label="Label" />
      </div>
      <div>
        <Switch disabled label="Label" />
      </div>
      <div>
        <Switch checked disabled label="Label" />
      </div>
      Small Size
      <div>
        <Switch size="small" label="Label" />
      </div>
      <div>
        <Switch size="small" checked label="Label" />
      </div>
      <div>
        <Switch size="small" disabled label="Label" />
      </div>
      <div>
        <Switch size="small" checked disabled label="Label" />
      </div>
    </Page>
  );
}