xa-input

• 最基础的输入框

     import  Input  from 'xa-input';

      ReactDOM.render(
        <div>
          <Input />
          <Input placeholder="placeholder" />
        </div>
        , mountNode
      );

• 大小，定义输入框的大小

 import  Input  from 'xa-input';

  ReactDOM.render(
    <div>
      <Input size="small" />
      <Input size="base" />
      <Input size="large" />
    </div>
    , mountNode
  );

• disabled 可以设置是否禁用该输入框

  import  Input  from 'xa-input';

  ReactDOM.render(
    <div>
      <Input disabled={true} placeholder="不可输入" />
    </div>
    , mountNode
  );

• value 可以设置input的值

  import  Input  from 'xa-input';
 ReactDOM.render(
    <div>
      <Input value={ 123 }/>
    </div>
    , mountNode
  );

• type,定义原生的input的类型

 import  Input  from 'xa-input';

  ReactDOM.render(
    <div>
      <Input type="password" />
    </div>
    , mountNode
  );

• action,可以给输入框添加前缀和后缀

  import  Input  from 'xa-input';

  ReactDOM.render(
    <div>
      <Input addonBefore="http://" addonAfter=".com" />
      <Input addonBefore="搜索框" addonAfter={<Icon type='search' />} />
    </div>
    , mountNode
  );

• radius,设置该属性可以让input输入框更加的圆滑美观

import  Input  from 'xa-input';
 ReactDOM.render(
    <div>
      <Input radius="radius"/>
    </div>
    , mountNode
  );

• maxlength,可以设置输入框最多输入多少字符

import  Input  from 'xa-input';

  ReactDOM.render(
    <div>
      <Input maxLength={5} />
    </div>
    , mountNode
  );

API

| 属性名 | 类型 | 默认值 | 说明 --------|-------|-------|----------- | value | String | 无 | input的值 | type | String | text | 声明input类型，同原生 input 标签的 type 属性，见：MDN(文本输入域请使用Textarea组件)。 | addonBefore |String or ReactNode|无|带标签的 input，设置前置标签 |addonAfter|String or ReactNode|无|带标签的 input，设置后置标签 |disabled|Boolean|false|是否禁用状态，默认为 false |placeholder|String|无|未输入时的提示 |size|String|'base'|输入框的宽度，可选值 'small', 'base', 'large' |name|String|无|表单字段名称 |maxLength|String|无|输入框可输入的最大长度 |radius|String|无|输入框为圆角，选值为：radius |onChange|Function|无|在input的值改变时触发