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

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

## 示例
```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}`)}
      />
    &lt;/div&gt;
  );
};

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&lt;string | number&gt;('');

  return (
    &lt;div&gt;
      &lt;h5&gt;单选合集标题&lt;/h5&gt;
      <Radio.Group
        dataSource={List}
        value={checkedList}
        direction="hoz"
        onChange={(value) => setCheckedList(`${value}`)}
      />
    &lt;/div&gt;
  );
};

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&lt;string | number&gt;('');

  return (
    &lt;div&gt;
      &lt;h5&gt;单选合集标题&lt;/h5&gt;
      <Radio.Group
        value={checkedList}
        itemDirection="ver"
        onChange={(value) => setCheckedList(`${value}`)}
      >
        {List.map((item) => (
          &lt;Radio value={item.value}&gt;
            {item.label}
            <p
              style={{
                margin: '0 0 0 24px',
                color: '#808080',
              }}
            >
              对于选项的描述/解释文案，对于选项的描述/解释文案
            &lt;/p&gt;
          &lt;/Radio&gt;
        ))}
      &lt;/Radio.Group&gt;
    &lt;/div&gt;
  );
};

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&lt;string | number&gt;('');

  return (
    &lt;div&gt;
      <Radio.Group
        value={checkedList}
        onChange={(value) => setCheckedList(`${value}`)}
        style={girdStyle}
      >
        {List.map((item) => (
          <StyledDiv
            style={
              checkedList === item.value ? { backgroundColor: '#eff3f8' } : {}
            }
          >
            &lt;Radio value={item.value} disabled={item.disabled}&gt;
              {item.label}
              <p
                style={{
                  margin: '0 0 0 24px',
                  color: '#808080',
                }}
              >
                按指定IP/实例ID申请，每月限使用20次，如需提升配额需
                &lt;a style={{ color: '#0064c8' }}&gt;提交工单申请&lt;/a&gt;
              &lt;/p&gt;
            &lt;/Radio&gt;
          &lt;/StyledDiv&gt;
        ))}
      &lt;/Radio.Group&gt;
    &lt;/div&gt;
  );
};

export const meta = {
  title: '单选选项卡（支持纵横布局）',
  describe: '通过设置Radio.Group的style属性，实现横向和纵向布局；灵活使用Radio，实现选项卡。',
};

```