react-amber-input
react-amber-input组件,我们提供三套颜色主题 blue、purple、green,可以通过给theme属性传完整的16进制颜色和rgb值自定义主题色
包括以下几种组件
一、ReactInput 输入框组件
二、Page 分页组件
三、Slide 单选下拉组件
四、Button 按钮组件
Install
yarn add react-amber-input
或者npm install react-amber-input
一、ReactInput参数详解
1、需要传递的props参数如下表
name | 类型 | 默认值 | 描述 |
---|---|---|---|
width | String、Number | 200 | 输入框长度(数字默认单位:像素),字符串示例:"200px"、"100%" |
height | String、Number | 30 | 输入框高度(数字默认单位:像素),字符串示例:"30px"、"100%"、"2vw" |
issearch | Boolean | false | 是否要呈现搜索框 |
usetheme | Boolean | false | 是否要使用主题 |
theme | String | blue | 主题名称,目前提供 blue、purple、green 三种可选值,也可以传完整的16进制颜色和rgb值,使用主题后,以主题色为准 |
name | String | "" | 表单name值 |
type | String | text | 表单类型,目前在样式上提供 password、text 两种可选值 |
defaultValue | String、Number | "" | 表单默认值、受控制input需要传值 |
refresh | Boolean | false | 当有编辑功能需要该字段 |
borderradius | Number | 2 | 圆角(单位:像素) |
borderwidth | Number | 1 | 边框宽度 (单位:像素) |
bordercolor | String | #1890FF | 边框颜色,16进制、rgb值、或者其他颜色设置,不要边框可以设置此字段为 transparent |
boxshadow | String | none | 完整的box-shadow css样式 |
activeboxshadow | String | none | 获得焦点时完整的box-shadow css样式 |
background | String | transparent | 输入框背景 |
fontsize | Number、String | 14 | 字体大小(数字默认单位:像素),可以传字符串,字符串必须带单位如 "1rem" |
fontcolor | String | #333 | 输入框里字的颜色,16进制、rgb值、或者其他颜色设置 |
readonly | Boolean | false | 是否只读 |
placeholder | String | 请输入内容 | 输入框的placeholder |
maxlength | Number | 200 | 输入框可输入最大长度 |
iconcolor | String | #1890FF | 输入框里图标的颜色,16进制、rgb值、或者其他颜色设置 |
haseye | Boolean | false | 当type是password时有效 设置要不要眼睛 |
eyecolor | String | #1890FF | 输入框里眼睛图标的颜色,16进制、rgb值、或者其他颜色设置 |
pattern | Object | null | 正则 |
allcss | String | "" | 完整的css代码 字符串 |
incss | String | "" | 完整的css代码 给input框设置 |
iconsize | Number、String | 14 | ×图标字体大小 |
eyesize | Number、String | 18 | 眼睛图标字体大小 |
searchsize | Number、String | 16 | 搜索图标字体大小 |
2、需要传递的props方法如下表
changeContent(value,name)
1、name 是 input name值
2、value 是 输入框里的内容
focusContent(value,name)
用于取消报错
1、name 是 input name值
2、value 是 ""
二、Page参数详解
1、需要传递的props参数如下
基本属性
name | 类型 | 默认值 | 描述 |
---|---|---|---|
usetheme | Boolean | false | 是否要使用主题 |
theme | String | blue | 主题名称,目前提供 blue、purple、green 三种可选值,也可以传完整的16进制颜色和rgb值,使用主题后,以主题色为准 |
upDown | Boolean | true | 是否有上下页 |
pageNumber | Boolean | true | 是否有页码list |
allNumber | Boolean | false | 是否有共多少页 |
jumpNumber | Boolean | false | 是否有跳到多少页 |
selectNumber | Boolean | false | 是否有选择每页显示多少个 |
nowpage | Number | 1 | 当前页(必传) |
allPage | Number | 0 | 总数据条数(必传) |
everyPage | Number | 10 | 每页显示多少个 |
样式属性
name | 类型 | 默认值 | 描述 |
---|---|---|---|
allcss | String | "" | 针对于该组件外层的css完整样式代码 |
allHeight | String、Number | 20 | 组件中数字按钮、输入框、下拉的高度(字符串需要带单位,数字默认单位px) |
allBorderWidth | Number | 1 | 组件中数字按钮、输入框、下拉的边框宽度 (单位:像素) |
allBorderColor | String | #1D82FE | 组件中数字按钮、输入框、下拉的边框颜色 |
allActiveBgcolor | String | #1D82FE | 组件中数字按钮选中时的背景色 |
allActiveFcolor | String | #fff | 组件中数字按钮选中时的字体色 |
borderRadius | String、Number | 2 | 组件中数字按钮、输入框、下拉的圆角 (字符串需要带单位,数字默认单位px) |
componentHeight | String、Number | 30 | 整个组件的高度(字符串需要带单位,数字默认单位px) |
buttonFontSize | String、Number | 12 | 数字按钮的字体大小(字符串需要带单位,数字默认单位px) |
buttonBgcolor | String | transparent | 数字按钮的背景色 |
buttonFontColor | String | #333 | 数字按钮的字体色 |
buttonGap | Number | 5 | 数字按钮的间隔 |
disabledBgcolor | String | #bbb | 不可点击的上下一页按钮的背景色 |
disabledFontColor | String | #bbb | 不可点击的上下一页按钮的字体色 |
otherFontSize | String、Number | 12 | 除数字按钮外其他小组件字体大小(字符串需要带单位,数字默认单位px) |
otherColor | String | #333 | 除数字按钮外其他小组件字体颜色 |
inputWidth | String、Number | 50 | 输入框宽度(字符串需要带单位,数字默认单位px) |
inputColor | String | #333 | 输入框字体颜色 |
slideWidth | String、Number | 50 | 下拉框宽度(字符串需要带单位,数字默认单位px) |
slideBgcolor | String | #fff | 下拉框背景颜色 |
slideColor | String | #333 | 下拉框字体颜色 |
customSlide | Array | [10,20,50,100] | 自定义下拉 |
slideHeight | String、Number | #333 | 下拉框高 |
slideActiveBgcolor | String | #1D82FE | 下拉框选项选中时的背景色 |
slideActiveFcolor | String | #fff | 下拉框选项选中时的字体色 |
slideActiveOpacity | Number | 20 | 拉框选项选中时的背景透明度 0-100 |
slidePosition | String | up | 下拉方向 (提供 up和down两种) |
2、需要传递的props方法如下
changeNumber(page, all)
改变当前页
1、page 是 当前页
2、all 是 总页数
changeEvery(value)
改变每页显示个数
1、value 是每页显示个数
三、Slide参数详解
1、需要传递的props参数如下
基本属性
name | 类型 | 默认值 | 描述 |
---|---|---|---|
usetheme | Boolean | false | 是否要使用主题 |
theme | String | blue | 主题名称,目前提供 blue、purple、green 三种可选值,也可以传完整的16进制颜色和rgb值,使用主题后,以主题色为准 |
value | String、Number | "" | 没有传空 |
list | Array | [] | 下拉列表选项。注意这里要求必须有id和name两个字段 |
width | String、Number | 200 | 组件宽度 |
height | String、Number | 30 | 组件高度 |
field | String | "" | 当有表单时该下拉的字段名称 |
refresh | Boolean | false | 是否实时更新state |
notEmpty | Boolean | false | 是否该字段不能为空(有没有八叉图表) |
disturbInfo | String | "" | 打断下拉操作的信息 |
样式属性
name | 类型 | 默认值 | 描述 |
---|---|---|---|
allcss | String | "" | 针对于该组件外层的css完整样式代码 |
borderRadius | String、Number | 2 | 组件圆角 |
borderWidth | Number | 1 | 组件中的边框宽度 (单位:像素) |
borderColor | String | #1D82FE | 组件的边框颜色 |
background | String | transparent | 组件主体背景 |
fontSize | String、Number | 14 | 组件主体字体大小(字符串需要带单位,数字默认单位px) |
fontColor | String | #333 | 组件主体字体颜色 |
fontPlaceholderColor | String | #757575 | 组件主体类似placeholder字体颜色 |
placeholder | String | 请选择一项 | 类似input的placeholder |
iconColor | String | #1D82FE | × 按钮的颜色 |
iconSize | String、Number | 14 | × 按钮的字体大小 |
triangleColor | String | #333 | ↓下拉按钮的颜色 |
triangleSize | String、Number | 12 | ↓下拉按钮的字体大小(字符串需要带单位,数字默认单位px) |
下拉框样式属性
name | 类型 | 默认值 | 描述 |
---|---|---|---|
slideDirection | String | down | 上拉还是下拉 提供 up和down两种可选值 |
slideOptionHeight | String、Number | 25 | 下拉每个选项的高度 |
slideOptionNumber | Number | 7 | 下拉一屏展示多少个选项 |
slideBackground | String | #fff | 下拉背景色 |
slideBorderWidth | Number | 1 | 下拉框边框宽度 |
slideBorderColor | String | #1D82FE | 下拉框边框颜色 |
slideBoxShadow | String | none | 下拉框阴影 |
slideFontSize | String、Number | 12 | 下拉框选项字体颜色 |
slideActiveBgcolor | String | #1D82FE | 下拉框选项选中时的背景色 |
slideActiveFcolor | String | #fff | 下拉框选项选中时的字体色 |
slideActiveOpacity | Number | 20 | 拉框选项选中时的背景透明度 0-100 |
2、需要传递的props方法如下
doSelect(value, name,field)
改变当前选项
1、value 是选中那条数据的id
2、name 是选中那条数据的name
2、field 是字段名
focus(field)
用于取消报错
1、field 是字段名
disturb(disturbinfo)
当disturbinfo不为空的时候,点击打断下拉操作并将报错信息返回
四、Button参数详解
1、需要传递的props参数如下
基本属性
name | 类型 | 默认值 | 描述 |
---|---|---|---|
usetheme | Boolean | false | 是否要使用主题 |
theme | String | blue | 主题名称,目前提供 blue、purple、green 三种可选值,也可以传完整的16进制颜色和rgb值,使用主题后,以主题色为准 |
name | String | 搜索 | 按钮里的字 |
width | String、Number | 200 | 组件宽度 |
height | String、Number | 30 | 组件高度 |
样式属性
name | 类型 | 默认值 | 描述 |
---|---|---|---|
allcss | String | "" | 针对于该组件外层的css完整样式代码 |
borderRadius | String、Number | 2 | 组件圆角 |
borderWidth | Number | 1 | 组件中的边框宽度 (单位:像素) |
borderColor | String | #1D82FE | 组件的边框颜色 |
background | String | #1D82FE | 组件主体背景 |
fontSize | String、Number | 14 | 组件主体字体大小(字符串需要带单位,数字默认单位px) |
fontColor | String | #333 | 组件主体字体颜色 |
cursor | String | pointer | 鼠标移到组件上的样式 |
boxShadow | String | none | 完整的box-shadow样式 |
2、需要传递的props方法如下
doClick()
点击事件回调
四、SlideAll参数详解
参数与slide组件基本一致 不同的时候 value 变成 select 类型是数组
引入方法与示例
import { ReactInput,Page,Slide,Button } from 'react-input-owns';
<ReactInput />
<Page
usetheme
theme="green"
allNumber
jumpNumber
selectNumber
nowpage={1}
allPage={300}
everyPage={10}
changeEvery={(num)=>changeEvery(num)}
changeNumber={(page, all) => getPages(page, all)}
/>
<Slide
usetheme
theme="green"
field="hollo"
list={[{ id: 1, name: "hollo" }, { id: 2, name: "hollo123" }]}
/>
<Button usetheme theme="green" doClick={()=>setName(2)} />