cnd-components-mcp
Version:
An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询
312 lines (269 loc) • 13.4 kB
Markdown
## 简介
单选框常用于单项信息输入的场景，用户在可见选项中仅可选择一条内容。
## 示例
```tsx
import React from 'react';
import { Radio } from '@alicloud/console-components';
export default () => {
return (
<div>
<Radio style={{ marginRight: '24px' }}>文本信息</Radio>
<Radio disabled>文本信息</Radio>
</div>
);
};
export const meta = {
title: '交互',
describe: '基本使用方式。',
};
```
```tsx
import React, { useState } from 'react';
import { Radio } from '@alicloud/console-components';
const List = [
{
label: '文字信息',
value: 'A',
},
{
label: '文字信息',
value: 'B',
},
{
label: '文字信息',
value: 'C',
},
{
label: '文字信息',
value: 'D',
},
];
export default () => {
const [checkedList, setCheckedList] = useState<string | number>('');
return (
<div>
<h5>单选合集标题</h5>
<Radio.Group
dataSource={List}
value={checkedList}
direction="ver"
onChange={(value) => setCheckedList(`${value}`)}
/>
</div>
);
};
export const meta = {
title: '纵向排列',
describe: '通过direction属性设置排列方向。',
};
```
```tsx
import React, { useState } from 'react';
import { Radio } from '@alicloud/console-components';
const List = [
{
label: '文字信息',
value: 'A',
},
{
label: '文字信息',
value: 'B',
},
{
label: '文字信息',
value: 'C',
},
{
label: '文字信息',
value: 'D',
},
];
export default () => {
const [checkedList, setCheckedList] = useState<string | number>('');
return (
<div>
<h5>单选合集标题</h5>
<Radio.Group
dataSource={List}
value={checkedList}
direction="hoz"
onChange={(value) => setCheckedList(`${value}`)}
/>
</div>
);
};
export const meta = {
title: '横向排列',
describe: '通过direction属性设置排列方向。',
};
```
```tsx
import React, { useState } from 'react';
import { Radio } from '@alicloud/console-components';
const List = [
{
label: '输入文字',
value: 'A',
},
{
label: '输入文字',
value: 'B',
},
{
label: '输入文字',
value: 'C',
},
];
export default () => {
const [checkedList, setCheckedList] = useState<string | number>('');
return (
<div>
<h5>单选合集标题</h5>
<Radio.Group
value={checkedList}
itemDirection="ver"
onChange={(value) => setCheckedList(`${value}`)}
>
{List.map((item) => (
<Radio value={item.value}>
{item.label}
<p
style={{
margin: '0 0 0 24px',
color: '#808080',
}}
>
对于选项的描述/解释文案，对于选项的描述/解释文案
</p>
</Radio>
))}
</Radio.Group>
</div>
);
};
export const meta = {
title: '带描述的单选框',
describe: '在Radio中添加描述文案。',
};
```
```tsx
import React, { useState } from 'react';
import { Radio } from '@alicloud/console-components';
import styled from 'styled-components';
const List = [
{
label: '输入文字',
value: 'A',
},
{
label: '输入文字',
value: 'B',
},
{
label: '输入文字',
value: 'C',
disabled: true,
},
{
label: '输入文字',
value: 'D',
},
];
const StyledDiv = styled.div`
border-radius: 4px;
border: 1px solid #e5e5e5;
padding: 16px 16px 0 16px;
margin: 2px;
width: 252px;
&:hover {
background-color: #f7f9fa;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16);
}
`;
const girdStyle = {
display: 'grid',
gridTemplateColumns: '1fr 1fr',
grigTemplateRows: '1fr 1fr',
gridColumnGap: '106px',
gridRowGap: '32px',
};
export default () => {
const [checkedList, setCheckedList] = useState<string | number>('');
return (
<div>
<Radio.Group
value={checkedList}
onChange={(value) => setCheckedList(`${value}`)}
style={girdStyle}
>
{List.map((item) => (
<StyledDiv
style={
checkedList === item.value ? { backgroundColor: '#eff3f8' } : {}
}
>
<Radio value={item.value} disabled={item.disabled}>
{item.label}
<p
style={{
margin: '0 0 0 24px',
color: '#808080',
}}
>
按指定IP/实例ID申请，每月限使用20次，如需提升配额需
<a style={{ color: '#0064c8' }}>提交工单申请</a>
</p>
</Radio>
</StyledDiv>
))}
</Radio.Group>
</div>
);
};
export const meta = {
title: '单选选项卡（支持纵横布局）',
describe: '通过设置Radio.Group的style属性，实现横向和纵向布局；灵活使用Radio，实现选项卡。',
};
```
## API
### Radio
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ------ | -------- |
| id | 组件 input 的 id | string | - | |
| checked | 设置 radio 是否选中 | boolean | - | |
| defaultChecked | 设置 radio 是否默认选中 | boolean | - | |
| label | 通过属性配置 label | React.ReactNode | - | |
| onChange | 选中状态变化时触发的事件<br/><br/>**签名**:<br/>**参数**:<br/>*checked*: 是否选中<br/>*event*: DOM 事件 | (checked: boolean, event: React.ChangeEvent\<HTMLInputElement>) => void | - | |
| onMouseEnter | 鼠标进入 enter 事件 | (e: React.MouseEvent\<HTMLInputElement>) => void | - | |
| onMouseLeave | 鼠标离开事件 | (e: React.MouseEvent\<HTMLInputElement>) => void | - | |
| disabled | radio 是否被禁用 | boolean | - | |
| value | radio 的 value | RadioValue | - | |
| name | 表单项 name | string | - | |
| isPreview | 是否开启预览态 | boolean | - | |
| renderPreview | 自定义预览态模式下渲染的内容<br/><br/>**签名**:<br/>**参数**:<br/>*checked*: 是否选中<br/>*props*: 所有传入的参数<br/>**返回值**:<br/>渲染内容 | (checked: boolean, props: RadioProps) => React.ReactNode | - | |
### Radio.Group
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | -------- | -------- |
| name | 表单 name | string | - | |
| value | radio group 的选中项的值（受控） | RadioValue | - | |
| defaultValue | radio group 的默认值（非受控） | RadioValue | - | |
| component | 设置标签类型 | React.ElementType | 'div' | |
| onChange | 选中值改变时的事件<br/><br/>**签名**:<br/>**参数**:<br/>*value*: 选中的值<br/>*event*: Dom 事件对象 | (value: RadioValue, event: React.ChangeEvent\<HTMLInputElement>) => void | - | |
| disabled | 表示 radio 被禁用 | boolean | - | |
| shape | 展示类型 | 'normal' | 'button' | - | |
| size | 与 `shape` 属性配套使用，shape 设为 button 时有效 | 'large' | 'medium' | 'small' | 'medium' | |
| dataSource | 可选项列表 | Array\<RadioValue> | Array\<RadioValueItem> | - | |
| children | 通过子元素方式设置内部 radio | React.ReactNode | - | |
| direction | 子项目的排列方式 | 'hoz' | 'ver' | - | |
| isPreview | 是否开启预览态 | boolean | - | |
| renderPreview | 自定义预览态模式下渲染的内容<br/><br/>**签名**:<br/>**参数**:<br/>*previewed*: 预览的数据项<br/>*props*: 预览项的参数<br/>**返回值**:<br/>渲染内容 | (previewed: RadioValueItem | object, props: GroupProps) => React.ReactNode | - | |
### RadioValueItem
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| -------- | ---- | --------------- | ------ | -------- |
| label | - | React.ReactNode | - | |
| value | - | RadioValue | - | 是 |
| disabled | - | boolean | - | |
### RadioValue
```typescript
export type RadioValue = string | number | boolean;
```