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		Nhãn của switch, được hiển thị bên cạnh switch.
size	'medium' | 'small'	'medium'	Độ lớn của switch.
wrapperClassName	string		CSS class của phần tử chứa switch và label nếu có.

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>
  );
}