---
order: 16
group:
  title: 文本
  order: 40
---

## 文本输入框

输入框是高级交互组件的一种，支持自定义输入框的背景颜色、文本样式、边框样式以及多种状态下输入框按键的样式等，可以作为输入表单在可视化应用中使用，将用户的输入提交到后端进行处理

开发日期：2021-08-10 周二

开发者：[wujie](http://portal.gtcloud.cn/web/guest/address?p_p_id=organization_WAR_gtplatformportlet&p_p_lifecycle=2&p_p_state=normal&p_p_mode=view&p_p_cacheability=cacheLevelPage&p_p_col_id=column-1&p_p_col_count=1&_organization_WAR_gtplatformportlet_cmd=selectOrgUserAndOtherPhoneByUserCode&_organization_WAR_gtplatformportlet_userCode=15001283&_organization_WAR_gtplatformportlet_orgUnitCode=50084580&t=1628600906387)

相关开发者：黄家星、王志畅

产品经理：泮薇薇

```tsx
import React from 'react';
import * as Charts from 'edata-charts';

export default () => <Charts.Input />;
```

## API

| 参数                 | 说明               | 类型         |
| -------------------- | ------------------ | ------------ |
| placeholder          | 输入框提示文字     | string       |
| placeholderColor     | 输入框提示文字颜色 | string       |
| inputBgColor         | 输入框背景颜色     | string       |
| inputFont            | 输入框字体         | **FontType** |
| inputBorderType      | 输入框边框类型     | string       |
| inputBorderRadius    | 输入框边框圆角     | number       |
| inputBorderColor     | 输入框边框颜色     | string       |
| inputBorderSize      | 输入框边框大小     | number       |
| inputPadding         | 输入框缩进         | number       |
| btnContent           | 按钮文本内容       | string       |
| btnFont              | 按钮默认字体       | **FontType** |
| btnBorderType        | 按钮默认边框类型   | string       |
| btnBorderRadius      | 按钮默认边框圆角   | number       |
| btnBorderColor       | 按钮默认边框颜色   | string       |
| btnBorderSize        | 按钮默认边框大小   | number       |
| btnBgColor           | 按钮默认背景颜色   | string       |
| btnWidth             | 按钮默认宽度       | number       |
| btnHoverFont         | 按钮悬浮字体       | **FontType** |
| btnHoverBorderType   | 按钮悬浮边框类型   | string       |
| btnHoverBorderRadius | 按钮悬浮边框圆角   | number       |
| btnHoverBorderColor  | 按钮悬浮边框颜色   | string       |
| btnHoverBorderSize   | 按钮悬浮边框大小   | number       |
| btnHoverBgColor      | 按钮悬浮背景颜色   | string       |

### FontType

| 参数       | 说明     | 类型   |
| ---------- | -------- | ------ |
| color      | 颜色     | string |
| fontFamily | 字体     | string |
| fontWeight | 字体粗细 | string |
| fontSize   | 字体大小 | number |

## 默认配置

```json
{
  "dataSource": {
    "data": "[]",
    "fields": {
      "s": {
        "optional": true,
        "description": "系列(可选)"
      },
      "y": {
        "description": "值"
      },
      "x": {
        "description": "类目"
      }
    },
    "type": "static",
    "description": "定位接口"
  },
  "attr": {
    "btnHoverFont": {
      "color": "rgb(255, 255, 255)",
      "fontFamily": "Microsoft Yahei",
      "fontWeight": "normal",
      "fontSize": 12
    },
    "btnHoverBorderType": "solid",
    "btnHoverBorderRadius": 0,
    "btnHoverBorderColor": "rgb(24, 144, 255)",
    "btnHoverBorderSize": 1,
    "btnHoverBgColor": "rgb(24, 144, 255)",
    "btnFont": {
      "color": "rgb(255, 255, 255)",
      "fontFamily": "Microsoft Yahei",
      "fontWeight": "normal",
      "fontSize": 12
    },
    "btnBorderType": "solid",
    "btnBorderRadius": 4,
    "btnBorderColor": "rgb(10, 115, 255)",
    "btnBorderSize": 1,
    "btnBgColor": "rgb(10, 115, 255)",
    "btnWidth": 88,
    "inputBorderType": "solid",
    "inputBorderRadius": 0,
    "inputBorderColor": "#39414d",
    "inputBorderSize": 1,
    "inputFont": {
      "color": "rgb(144, 160, 174)",
      "fontFamily": "Microsoft Yahei",
      "fontWeight": "normal",
      "fontSize": 12
    },
    "inputPadding": 11,
    "inputBgColor": "#39414d",
    "btnContent": "确认",
    "placeholder": "请输入文本...",
    "placeholderColor": "rgb(144, 160, 174)"
  },
  "size": {
    "height": 35,
    "width": 320
  }
}
```