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

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

## 示例
```tsx
import React from "react";
import { Input } from "@alicloud/console-components";

const titleStyle = {
  margin: "4px 0 4px",
  color: "#1D1D1F",
  height: 20,
};

const contentStyle = {
  display: "grid",
  gridTemplateColumns: "repeat(2, 1fr)",
  gap: 36,
};

export default () => {
  return (
    <div style={contentStyle}>
      <div>
        <div style={titleStyle}>默认</div>
        <Input placeholder="请输入内容" size="medium" />
      </div>
      <div>
        <div style={titleStyle}>大号</div>
        <Input placeholder="请输入内容" size="large" />
      </div>
      <div>
        <div style={titleStyle}>小号</div>
        <Input placeholder="请输入内容" size="small" />
      </div>
    </div>
  );
};


export const meta = {
  title: '普通输入框',
  describe: '通过 size 属性设置输入框的大小，对单行输入框有效。',
};

```
```tsx
import React from "react";
import { Input } from "@alicloud/console-components";

const titleStyle = {
  margin: "4px 0 4px",
  color: "#1D1D1F",
  height: 20,
};

const contentStyle = {
  display: "grid",
  gridTemplateColumns: "repeat(2, 1fr)",
  gap: 36,
};

export default () => {
  return (
    <div style={contentStyle}>
      <div>
        <div style={titleStyle}>默认</div>
        <Input placeholder="请输入内容" size="medium" />
      </div>
      <div>
        <div style={titleStyle}>输入完成</div>
        <Input
          defaultValue="已输入文本"
          placeholder="请输入内容"
          size="medium"
        />
      &lt;/div&gt;
      &lt;div&gt;
        &lt;div style={titleStyle}&gt;禁用&lt;/div&gt;
        &lt;Input placeholder="请输入内容" size="medium" disabled /&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;div style={titleStyle}&gt;输入错误或未填&lt;/div&gt;
        &lt;Input placeholder="请输入内容" size="medium" defaultValue="已输入文本" state="error" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
};

export const meta = {
  title: '段落输入框',
  describe: '为 `Input` 设置 `disabled` 状态,通过state添加错误状态。',
};

```
```tsx
import React from 'react';
import { Input } from '@alicloud/console-components';

const { TextArea } = Input;

const titleStyle = {
  margin: '4px 0 4px',
  color: '#1D1D1F',
  height: 20,
};

const contentStyle = {
  display: 'grid',
  gridTemplateColumns: 'repeat(2, 1fr)',
  gap: 36,
};

export default () => {
  return (
    &lt;div style={contentStyle}&gt;
      &lt;div&gt;
        &lt;div style={titleStyle}&gt;默认&lt;/div&gt;
        &lt;TextArea placeholder="请输入内容" size="medium" /&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;div style={titleStyle}&gt;输入完成&lt;/div&gt;
        <TextArea
          defaultValue="已输入文本"
          placeholder="请输入内容"
          size="medium"
        />
      &lt;/div&gt;
      &lt;div&gt;
        &lt;div style={titleStyle}&gt;禁用&lt;/div&gt;
        &lt;TextArea placeholder="请输入内容" size="medium" disabled /&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;div style={titleStyle}&gt;输入错误或未填&lt;/div&gt;
        <TextArea
          placeholder="请输入内容"
          defaultValue="已输入文本"
          size="medium"
          state="error"
        />
      &lt;/div&gt;
    &lt;/div&gt;
  );
};

export const meta = {
  title: '段落输入框',
  describe: '通过 size 属性设置输入框的大小，对单行输入框有效。',
};

```
```tsx
import React from 'react';
import { Input } from '@alicloud/console-components';

const titleStyle = {
  margin: '4px 0 4px',
  color: '#1D1D1F',
  height: 20,
};

const contentStyle = {
  display: 'grid',
  gridTemplateColumns: 'repeat(2, 1fr)',
  gap: 36,
};

export default () => {
  return (
    &lt;div style={contentStyle}&gt;
      &lt;div&gt;
        &lt;div style={titleStyle}&gt;前缀&lt;/div&gt;
        &lt;Input placeholder="请输入内容" label="+86" /&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;div style={titleStyle}&gt;后缀&lt;/div&gt;
        &lt;Input placeholder="请输入内容" innerAfter="@alibaba-inc.com" /&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;div style={titleStyle}&gt;前后缀&lt;/div&gt;
        <Input
          placeholder="请输入内容"
          label="http://"
          innerAfter="@alibaba-inc.com"
        />
      &lt;/div&gt;
    &lt;/div&gt;
  );
};

export const meta = {
  title: '前后缀',
  describe: '通过label,innerAfter属性设置前后缀',
};

```