cnd-components-mcp
Version:
An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询
306 lines (270 loc) • 16.2 kB
Markdown
## 简介
复选框常用于信息输入的场景，用户在可见选项中选择一条或多条内容。
## 示例
```tsx
import React from 'react';
import { Checkbox } from '@alicloud/console-components';
export default () => {
return (
<div>
<Checkbox>文本信息</Checkbox>
<Checkbox checked>文本信息</Checkbox>
<Checkbox defaultIndeterminate>文本信息</Checkbox>
<br />
<br />
<Checkbox disabled>文本信息</Checkbox>
<Checkbox disabled checked>
文本信息
</Checkbox>
<Checkbox disabled defaultIndeterminate>
文本信息
</Checkbox>
</div>
);
};
export const meta = {
title: '交互',
describe:
'Checkbox 组件使用，分 label 和无 label 两种情况。defaultChecked 属性默认选中，checked 属性选中，disabled 属性不可操作，defaultIndeterminate 属性设置半选状态。',
};
```
```tsx
import React, { useState } from 'react';
import { Checkbox } from '@alicloud/console-components';
const List = [
{
label: '文本信息',
value: 'A',
},
{
label: '文本信息',
value: 'B',
},
{
label: '文本信息',
value: 'C',
disabled: true,
},
{
label: '文本信息',
value: 'D',
},
];
export default () => {
const [checkedList, setCheckedList] = useState<Array<any>>([]);
return (
<div>
<Checkbox.Group
dataSource={List}
value={checkedList}
direction="ver"
onChange={setCheckedList}
/>
</div>
);
};
export const meta = {
title: '纵向排列',
describe: '通过direction属性控制选项排列方向。',
};
```
```tsx
import React, { useState } from 'react';
import { Checkbox } from '@alicloud/console-components';
const List = [
{
label: '文本信息',
value: 'A',
},
{
label: '文本信息',
value: 'B',
},
{
label: '文本信息',
value: 'C',
disabled: true,
},
{
label: '文本信息',
value: 'D',
},
];
export default () => {
const [checkedList, setCheckedList] = useState<Array<any>>([]);
return (
<div>
<Checkbox.Group
dataSource={List}
value={checkedList}
onChange={setCheckedList}
/>
</div>
);
};
export const meta = {
title: '横向排列',
describe: '通过direction属性控制选项排列方向，默认横向。',
};
```
```tsx
import React, { useState } from 'react';
import { Checkbox } from '@alicloud/console-components';
const List = [
{
label: '文本信息',
value: 'A',
},
{
label: '文本信息',
value: 'B',
},
{
label: '文本信息',
value: 'C',
disabled: true,
},
];
const itemStyle = {
margin: '0 0 0 24px',
color: '#808080',
};
export default () => {
const [checkedList, setCheckedList] = useState<Array<any>>([]);
return (
<Checkbox.Group
value={checkedList}
direction="ver"
onChange={setCheckedList}
>
{List.map((item) => (
<Checkbox value={item.value} disabled={item.disabled}>
{item.label}
<p style={itemStyle}>
对于选项的描述/解释文案，对于选项的描述/解释文案
</p>
</Checkbox>
))}
</Checkbox.Group>
);
};
export const meta = {
title: '带描述的多选框',
describe:
'使用 `<Checkbox.Group>` 渲染 `<Checkbox>` 分组,定制Checkbox的children添加描述',
};
```
```tsx
import React, { useState } from 'react';
import { Checkbox } from '@alicloud/console-components';
import styled from 'styled-components';
const List = [
{
label: '文本信息A',
value: 'A',
},
{
label: '文本信息B',
value: 'B',
},
{
label: '文本信息C',
value: 'C',
disabled: true,
},
{
label: '文本信息D',
value: 'D',
},
];
const disableStyle = {
backgroundColor: '#f6f6f6',
};
const checkedStyle = {
backgroundColor: '#eff3f8',
};
export default () => {
const [checkedList, setCheckedList] = useState<Array<any>>([]);
const getStyle = (item) => {
if (item.disabled) {
return disableStyle;
}
if (checkedList.find((i) => i === item.value)) {
return checkedStyle;
}
return {};
};
return (
<Checkbox.Group value={checkedList} onChange={setCheckedList}>
{List.map((item) => (
<CheckItem style={getStyle(item)}>
<Checkbox value={item.value} disabled={item.disabled}>
{item.label}
<p
style={{
margin: '0 0 0 24px',
color: '#808080',
}}
>
对于选项的描述/解释文案，对于选项的描述/解释文案
</p>
</Checkbox>
</CheckItem>
))}
</Checkbox.Group>
);
};
export const meta = {
title: '多项选项卡（支持横纵布局）',
describe:
'使用 `<Checkbox.Group>` 渲染 `<Checkbox>` 分组,定制Checkbox的为卡片样式',
};
const CheckItem = styled.div`
border-radius: 4px;
border: 1px solid #e5e5e5;
padding: 16px 16px 0 16px;
margin: 2px;
width: 230px;
display: inline-block;
&:hover {
background-color: #f7f9fa;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
}
`;
```
## API
### Checkbox
| 参数 | 说明 | 类型 | 默认值 | 是否必填 | 支持版本 |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | ------ | -------- | -------- |
| className | 自定义类名 | string | - | | - |
| id | checkbox id, 挂载在 input 上 | string | - | | - |
| style | 自定义内联样式 | React.CSSProperties | - | | - |
| checked | 选中状态 | boolean | - | | - |
| value | checkbox 的 value | ValueItem | - | | - |
| name | name | string | - | | - |
| defaultChecked | 默认选中状态 | boolean | false | | - |
| disabled | 禁用 | boolean | - | | - |
| label | 通过属性配置 label， | React.ReactNode | - | | - |
| indeterminate | Checkbox 的中间状态，只会影响到 Checkbox 的样式，并不影响其 checked 属性 | boolean | - | | - |
| defaultIndeterminate | Checkbox 的默认中间态，只会影响到 Checkbox 的样式，并不影响其 checked 属性 | boolean | false | | - |
| onChange | 状态变化时触发的事件 | (checked: boolean, e: React.ChangeEvent\<HTMLInputElement>) => void | - | | - |
| onMouseEnter | 鼠标进入 enter 事件 | (e: React.MouseEvent\<HTMLInputElement | HTMLLabelElement>) => void | - | | - |
| onMouseLeave | 鼠标离开 Leave 事件 | (e: React.MouseEvent\<HTMLInputElement | HTMLLabelElement>) => void | - | | - |
| isPreview | 是否为预览态 | boolean | false | | 1.19 |
| renderPreview | 预览态模式下渲染的内容<br/><br/>**签名**:<br/>**参数**:<br/>*checked*: 是否选中<br/>*props*: 所有传入的参数<br/>**返回值**:<br/>定制渲染内容 | (checked: boolean, props: CheckboxProps) => React.ReactNode | - | | 1.19 |
### Checkbox.Group
| 参数 | 说明 | 类型 | 默认值 | 是否必填 | 支持版本 |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | -------- |
| className | 自定义类名 | string | - | | - |
| style | 自定义内联样式 | React.CSSProperties | - | | - |
| disabled | 整体禁用 | boolean | - | | - |
| dataSource | 可选项列表 | Array\<ValueItem> | Array\<CheckboxData> | - | | - |
| value | 被选中的值列表 | ValueItem\[] | ValueItem | - | | - |
| defaultValue | 默认被选中的值列表 | ValueItem\[] | ValueItem | - | | - |
| name | name | string | - | | - |
| children | 通过子元素方式设置内部 checkbox | React.ReactNode | - | | - |
| onChange | 选中值改变时的事件 | (value: ValueItem\[], e: React.ChangeEvent\<HTMLInputElement>) => void | - | | - |
| direction | 子项目的排列方式 | 'hoz' | 'ver' | - | | - |
| itemDirection | \[废弃] 子项目的排列方式 | 'hoz' | 'ver' | - | | - |
| isPreview | 是否为预览态 | boolean | - | | 1.19 |
| renderPreview | 预览态模式下渲染的内容<br/><br/>**签名**:<br/>**参数**:<br/>*previewed*: 预览值 \[{label: '', value:''},...]<br/>*props*: 所有传入的参数<br/>**返回值**:<br/>定制渲染内容 | (<br/> previewed: {<br/> label: string | React.ReactNode;<br/> value: string | React.ReactNode;<br/> }\[],<br/> props: object<br/> ) => React.ReactNode | - | | 1.19 |