Nhảy tới nội dung
Phiên bản: 1.11.0

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

NameTypeDefaultDescription
labelstringThêm nhãn cho switch
sizeSwitchSizeKích thước của switch
wrapperClassNamestringThêm class name cho wrapper của switch

Type

SwitchSize

NameDescription
"small"Size small
"medium"Size medium

Example

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