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

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

## 示例
```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&lt;Array<any&gt;>([]);
  return (
    &lt;div&gt;
      <Checkbox.Group
        dataSource={List}
        value={checkedList}
        direction="ver"
        onChange={setCheckedList}
      />
    &lt;/div&gt;
  );
};

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&lt;Array<any&gt;>([]);
  return (
    &lt;div&gt;
      <Checkbox.Group
        dataSource={List}
        value={checkedList}
        onChange={setCheckedList}
      />
    &lt;/div&gt;
  );
};

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&lt;Array<any&gt;>([]);
  return (
    <Checkbox.Group
      value={checkedList}
      direction="ver"
      onChange={setCheckedList}
    >
      {List.map((item) => (
        &lt;Checkbox value={item.value} disabled={item.disabled}&gt;
          {item.label}
          &lt;p style={itemStyle}&gt;
            对于选项的描述/解释文案，对于选项的描述/解释文案
          &lt;/p&gt;
        &lt;/Checkbox&gt;
      ))}
    &lt;/Checkbox.Group&gt;
  );
};

export const meta = {
  title: '带描述的多选框',
  describe:
    '使用 `&lt;Checkbox.Group&gt;` 渲染 `&lt;Checkbox&gt;` 分组,定制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&lt;Array<any&gt;>([]);
  const getStyle = (item) => {
    if (item.disabled) {
      return disableStyle;
    }
    if (checkedList.find((i) => i === item.value)) {
      return checkedStyle;
    }
    return {};
  };
  return (
    &lt;Checkbox.Group value={checkedList} onChange={setCheckedList}&gt;
      {List.map((item) => (
        &lt;CheckItem style={getStyle(item)}&gt;
          &lt;Checkbox value={item.value} disabled={item.disabled}&gt;
            {item.label}
            <p
              style={{
                margin: '0 0 0 24px',
                color: '#808080',
              }}
            >
              对于选项的描述/解释文案，对于选项的描述/解释文案
            &lt;/p&gt;
          &lt;/Checkbox&gt;
        &lt;/CheckItem&gt;
      ))}
    &lt;/Checkbox.Group&gt;
  );
};

export const meta = {
  title: '多项选项卡（支持横纵布局）',
  describe:
    '使用 `&lt;Checkbox.Group&gt;` 渲染 `&lt;Checkbox&gt;` 分组,定制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);
  }
`;

```