cnd-components-mcp
Version:
An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询
180 lines (156 loc) • 7.87 kB
Markdown
## 简介
开关常用于需要进行两种状态切换的场景，适用于语义非常明确的场景，例如代表“是”或“否”。
## 示例
### 尺寸
```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"
/>
<br />
<br />
<Switch
autoWidth
checkedChildren="on"
unCheckedChildren="off"
/>
</Col>
<Col>
<Switch
autoWidth
defaultChecked
disabled
checkedChildren="on"
unCheckedChildren="off"
/>
<br />
<br />
<Switch
autoWidth
disabled
checkedChildren="on"
unCheckedChildren="off"
/>
</Col>
<Col>
<Switch
autoWidth
defaultChecked
loading
checkedChildren="on"
unCheckedChildren="off"
/>
<br />
<br />
<Switch
autoWidth
loading
checkedChildren="on"
unCheckedChildren="off"
/>
</Col>
</Row>
);
};
export const meta = {
title: '文字',
describe: '',
};
```
## API
### Switch
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | -------- | -------- |
| defaultChecked | 开关是否打开默认值 (非受控) | boolean | false | |
| checked | 开关是否打开（受控） | boolean | - | |
| onChange | 开关状态改变时事件<br/><br/>**签名**:<br/>**参数**:<br/>*checked*: 是否打开 | (<br/> checked: boolean,<br/> e: React.MouseEvent\<HTMLDivElement> | React.KeyboardEvent\<HTMLDivElement><br/> ) => void | - | |
| size | switch 的尺寸 | 'medium' | 'small' | 'medium' | |
| loading | 加载状态 | boolean | false | |
| disabled | 表示开关被禁用 | boolean | false | |
| autoWidth | 宽度根据内容自适应 | boolean | false | |
| isPreview | 是否预览模式 | boolean | false | |
| renderPreview | 自定义预览态模式下渲染的内容<br/><br/>**签名**:<br/>**参数**:<br/>*checked*: 是否打开<br/>*props*: 组件参数对象<br/>**返回值**:<br/>预览模式下的渲染内容 | (checked: boolean, props: SwitchProps) => React.ReactNode | - | |
| checkedChildren | 打开时的内容 | React.ReactNode | - | |
| unCheckedChildren | 关闭时的内容 | React.ReactNode | - | |
| onClick | 鼠标点击事件 | (e: React.MouseEvent\<HTMLDivElement> | React.KeyboardEvent\<HTMLDivElement>) => void | - | |
| onKeyDown | 键盘按键事件 | (e: React.KeyboardEvent\<HTMLDivElement>) => void | - | |
## 无障碍键盘操作指南
| 按键 | 说明 |
| :---- | :----------- |
| Enter | 切换选中状态 |
| SPACE | 切换选中状态 |
## 更多示例
```tsx
```
```tsx
```
```tsx
```