cnd-components-mcp/componentData/components/Switch/examples.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

### 尺寸
```tsx
import React from 'react';
import { Switch, Grid } from '@alicloud/console-components';

const { Row, Col } = Grid;

export default () => {
  return (
    <div>
      <h4>默认 24px</h4>
      <Row>
        <Col>
          <Switch defaultChecked />
          <br />
          <br />
          <Switch />
        </Col>
        <Col>
          <Switch defaultChecked disabled />
          <br />
          <br />
          <Switch disabled />
        </Col>
        <Col>
          <Switch defaultChecked loading />
          <br />
          <br />
          <Switch loading />
        </Col>
      </Row>
      <br />
      <h4>小号 24px</h4>
      <Row>
        <Col>
          <Switch defaultChecked size="small" />
          <br />
          <br />
          <Switch size="small" />
        </Col>
        <Col>
          <Switch defaultChecked disabled size="small" />
          <br />
          <br />
          <Switch disabled size="small" />
        </Col>
        <Col>
          <Switch defaultChecked loading size="small" />
          <br />
          <br />
          <Switch loading size="small" />
        </Col>
      </Row>
    </div>
  );
};

export const meta = {
  title: '尺寸',
  describe: '',
};

```
### 基础形态
```tsx
import React from 'react';
import { Switch, Grid } from '@alicloud/console-components';

const { Row, Col } = Grid;

export default () => {
  return (
    <Row>
      <Col>
        <Switch
          autoWidth
          defaultChecked
          checkedChildren="on"
          unCheckedChildren="off"
        />
        &lt;br /&gt;
        &lt;br /&gt;
        <Switch
          autoWidth
          checkedChildren="on"
          unCheckedChildren="off"
        />
      &lt;/Col&gt;
      &lt;Col&gt;
        <Switch
          autoWidth
          defaultChecked
          disabled
          checkedChildren="on"
          unCheckedChildren="off"
        />
        &lt;br /&gt;
        &lt;br /&gt;
        <Switch
          autoWidth
          disabled
          checkedChildren="on"
          unCheckedChildren="off"
        />
      &lt;/Col&gt;
      &lt;Col&gt;
        <Switch
          autoWidth
          defaultChecked
          loading
          checkedChildren="on"
          unCheckedChildren="off"
        />
        &lt;br /&gt;
        &lt;br /&gt;
        <Switch
          autoWidth
          loading
          checkedChildren="on"
          unCheckedChildren="off"
        />
      &lt;/Col&gt;
    &lt;/Row&gt;
  );
};

export const meta = {
  title: '文字',
  describe: '',
};

```
## 更多示例
```tsx
```
```tsx
```
```tsx
```