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

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

### 基本使用
```tsx preview
import React from "react";
import {CpuMemSelector} from "@ali/cnd";


const Demo = () => {
  const children = {
    cpu: [
      { label: 1, value: 1 },
      { label: 1.5, value: 1.5 },
      { label: 2, value: 2, disabled: true },
      { label: 4, value: 4 },
      { label: 6, value: 6 },
      { label: 8, value: 8 },
      { label: 12, value: 12 },
      { label: 16, value: 16 },
    ],
    memory: [
      { label: 128, value: 128 },
      { label: 256, value: 256 },
      { label: 512, value: 512 },
      { label: 1024, value: 1024 },
      { label: 2048, value: 2048, disabled: true },
      { label: 4096, value: 4096 },
      { label: 8192, value: 8192 },
      { label: 16384, value: 16384 },
      { label: 32768, value: 32768 },
    ],
  };
  return (
    <div>
      <CpuMemSelector hasClear />
      <CpuMemSelector
        unit='MB'
        children={children}
        defaultValue={{ cpu: 2, memory: 2048 }}
        style={{ marginLeft: 16 }}
      />
    &lt;/div&gt;
  );
};

export default Demo;
```
### 受控组件
```tsx preview
import React, { useState } from "react";
import {CpuMemSelector} from "@ali/cnd";

const Demo = () => {
  const [cpumem, setCpumem] = useState({ cpu: 0.5, memory: 2 });

  return (
    <CpuMemSelector
      value={cpumem}
      onChange={(v) => {
        console.log(v);
      }}
    />
  );
};

export default Demo;
```
### children 的使用
```tsx preview
import React, { useState } from "react";
import {CpuMemSelector} from "@ali/cnd";

const Demo = () => {
  const [cpumem, setCpumem] = useState({ cpu: 6, memory: 12 });
  const children = {
    cpu: [
      { label: 1, value: 1 },
      { label: 2, value: 2 },
      { label: 4, value: 4 },
      { label: 6, value: 6 },
      { label: 7, value: 7 },
      { label: 8, value: 8 },
      { label: 12, value: 12 },
      { label: 16, value: 16 },
    ],
    memory: [
      { label: 1, value: 1 },
      { label: 2, value: 2 },
      { label: 3, value: 3 },
      { label: 4, value: 4 },
      { label: 6, value: 6 },
      { label: 8, value: 8 },
      { label: 12, value: 12 },
      { label: 16, value: 16 },
      { label: 24, value: 24 },
      { label: 32, value: 32 },
    ],
  };

  return (
    <CpuMemSelector
      value={cpumem}
      children={children}
    />
  );
};

export default Demo;
```
### 显示功能
```tsx preview
import React from "react";
import {CpuMemSelector} from "@ali/cnd";

const { Preview: CpuMemPreview } = CpuMemSelector;

const Demo = () => {
  return (
    &lt;CpuMemPreview value={{ cpu: 2, memory: 4 }} /&gt;
  );
};

export default Demo;
```
### 基本使用
```tsx preview
import React from "react";
import {CpuMemSelectorField} from "@ali/cnd";

const Demo = () => {
  return (
    &lt;div&gt;
      <CpuMemSelectorField
        label="单实例规格"
        hasClear
        required
        name="Spec"
        help="单实例规格由CPU和内存组成"
        labelColSpan={3}
        wrapperColSpan={21}
        placeholder="请选择单实例规格"
        labelAlign="left"
        labelTextAlign="left"
        validation={[
          {
            type: 'required',
            message: '请选择单实例规格',
          }
        ]}
      />
    &lt;/div&gt;
  );
};

export default Demo;
```