xy-input
v0.1.3
Published
基于React的输入框组件
Downloads
56
Maintainers
Readme
| | | | | | | ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | | IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
xy-input
输入框, 文本域组件
安装
# yarn
yarn add xy-input
使用例子
import React from "react";
import ReactDOM from "react-dom";
import { Input, InputGroup, TextArea } from "xy-input";
ReactDOM.render(<Input />, container);
API
通用属性
| 属性 | 说明 | 类型 | 默认值 | | ------------------ | ------------------ | -------------------------------------------------------------------- | ------ | | disabled | 是否禁用 | boolean | false | | value | 输入框值 | string | 无 | | defaultValue | 输入框默认值 | string | 无 | | placeholder | 占位符文本 | string | 无 | | autoFocus | 自动焦点 | boolean | 无 | | onFocus | 输入框焦点事件 | (e: React.FocusEvent) => void | 无 | | onBlur | 输入框失去焦点事件 | (e: React.FocusEvent) => void | 无 | | onKeyDown | 键盘事件 | (e: React.KeyboardEvent) => void | 无 | | onChange | 输入框 change 事件 | (value: string, event?: React.ChangeEvent) => void | 无 | | onCompositionStart | 开始输入中文 | (e: React.CompositionEvent) => void | 无 | | onCompositionEnd | 输入中文完毕 | (e: React.CompositionEvent) => void | 无 |
Input
| 属性 | 说明 | 类型 | 默认值 | | ----------- | ---------------- | ----------------- | ------ | | type | 输入框类型 | "text"/"password" | 无 | | clearable | 是否显示清除 | "text"/"password" | 无 | | onClean | 清除按钮点击事件 | Function | 无 | | addonBefore | 前置标签 | React.ReactNode | 无 | | addonAfter | 后置标签 | React.ReactNode | 无 | | prefix | 前置图标 | React.ReactNode | 无 | | suffix | 后置图标 | React.ReactNode | 无 |
InputGroup
| 属性 | 说明 | 类型 | 默认值 | | ------- | ------------ | ------- | ------ | | compact | 是否紧凑模式 | boolean | 无 |
TextArea
| 属性 | 说明 | 类型 | 默认值 | | -------- | ---------------- | -------------------- | ------ | | autosize | 是否自动调整尺寸 | boolean/TextAreaSize | 无 |
开发
yarn run start
例子
http://localhost:6006
测试
yarn run test
开源许可
xy-input is released under the MIT license.