README

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的值改变时触发

Usage no npm install needed!

README

xa-input

API