2.5.9 • Published 3 years ago

react-input-owns v2.5.9

Weekly downloads
2
License
ISC
Repository
github
Last release
3 years ago

react-input-owns

react-input-owns组件,我们提供三套颜色主题 blue、purple、green,可以通过给theme属性传完整的16进制颜色和rgb值自定义主题色

包括以下几种组件

一、ReactInput 输入框组件

二、Page 分页组件

三、Slide 单选下拉组件

四、Button 按钮组件

Install

yarn add react-input-owns或者npm install react-input-owns

一、ReactInput参数详解

1、需要传递的props参数如下表:

name类型默认值描述
widthString、Number200输入框长度(数字默认单位:像素),字符串示例:"200px"、"100%"
heightString、Number30输入框高度(数字默认单位:像素),字符串示例:"30px"、"100%"、"2vw"
issearchBooleanfalse是否要呈现搜索框
usethemeBooleanfalse是否要使用主题
themeStringblue主题名称,目前提供 blue、purple、green 三种可选值,也可以传完整的16进制颜色和rgb值,使用主题后,以主题色为准
nameString""表单name值
typeStringtext表单类型,目前在样式上提供 password、text 两种可选值
defaultValueString、Number""表单默认值、受控制input需要传值
refreshBooleanfalse当有编辑功能需要该字段
borderradiusNumber2圆角(单位:像素)
borderwidthNumber1边框宽度 (单位:像素)
bordercolorString#1890FF边框颜色,16进制、rgb值、或者其他颜色设置,不要边框可以设置此字段为 transparent
boxshadowStringnone完整的box-shadow css样式
activeboxshadowStringnone获得焦点时完整的box-shadow css样式
backgroundStringtransparent输入框背景
fontsizeNumber、String14字体大小(数字默认单位:像素),可以传字符串,字符串必须带单位如 "1rem"
fontcolorString#333输入框里字的颜色,16进制、rgb值、或者其他颜色设置
readonlyBooleanfalse是否只读
placeholderString请输入内容输入框的placeholder
maxlengthNumber200输入框可输入最大长度
iconcolorString#1890FF输入框里图标的颜色,16进制、rgb值、或者其他颜色设置
haseyeBooleanfalse当type是password时有效 设置要不要眼睛
eyecolorString#1890FF输入框里眼睛图标的颜色,16进制、rgb值、或者其他颜色设置
patternObjectnull正则
allcssString""完整的css代码 字符串
incssString""完整的css代码 给input框设置
iconsizeNumber、String14×图标字体大小
eyesizeNumber、String18眼睛图标字体大小
searchsizeNumber、String16搜索图标字体大小

2、需要传递的props方法如下表:

changeContent(value,name)

1、name 是 input name值

2、value 是 输入框里的内容

focusContent(value,name) 用于取消报错

1、name 是 input name值

2、value 是 ""

二、Page参数详解

1、需要传递的props参数如下:

基本属性
name类型默认值描述
usethemeBooleanfalse是否要使用主题
themeStringblue主题名称,目前提供 blue、purple、green 三种可选值,也可以传完整的16进制颜色和rgb值,使用主题后,以主题色为准
upDownBooleantrue是否有上下页
pageNumberBooleantrue是否有页码list
allNumberBooleanfalse是否有共多少页
jumpNumberBooleanfalse是否有跳到多少页
selectNumberBooleanfalse是否有选择每页显示多少个
nowpageNumber1当前页(必传)
allPageNumber0总数据条数(必传)
everyPageNumber10每页显示多少个
样式属性
name类型默认值描述
allcssString""针对于该组件外层的css完整样式代码
allHeightString、Number20组件中数字按钮、输入框、下拉的高度(字符串需要带单位,数字默认单位px)
allBorderWidthNumber1组件中数字按钮、输入框、下拉的边框宽度 (单位:像素)
allBorderColorString#1D82FE组件中数字按钮、输入框、下拉的边框颜色
allActiveBgcolorString#1D82FE组件中数字按钮选中时的背景色
allActiveFcolorString#fff组件中数字按钮选中时的字体色
borderRadiusString、Number2组件中数字按钮、输入框、下拉的圆角 (字符串需要带单位,数字默认单位px)
componentHeightString、Number30整个组件的高度(字符串需要带单位,数字默认单位px)
buttonFontSizeString、Number12数字按钮的字体大小(字符串需要带单位,数字默认单位px)
buttonBgcolorStringtransparent数字按钮的背景色
buttonFontColorString#333数字按钮的字体色
buttonGapNumber5数字按钮的间隔
disabledBgcolorString#bbb不可点击的上下一页按钮的背景色
disabledFontColorString#bbb不可点击的上下一页按钮的字体色
otherFontSizeString、Number12除数字按钮外其他小组件字体大小(字符串需要带单位,数字默认单位px)
otherColorString#333除数字按钮外其他小组件字体颜色
inputWidthString、Number50输入框宽度(字符串需要带单位,数字默认单位px)
inputColorString#333输入框字体颜色
slideWidthString、Number50下拉框宽度(字符串需要带单位,数字默认单位px)
slideBgcolorString#fff下拉框背景颜色
slideColorString#333下拉框字体颜色
customSlideArray10,20,50,100自定义下拉
slideHeightString、Number#333下拉框高
slideActiveBgcolorString#1D82FE下拉框选项选中时的背景色
slideActiveFcolorString#fff下拉框选项选中时的字体色
slideActiveOpacityNumber20拉框选项选中时的背景透明度 0-100
slidePositionStringup下拉方向 (提供 up和down两种)

2、需要传递的props方法如下:

changeNumber(page, all) 改变当前页

1、page 是 当前页

2、all 是 总页数

changeEvery(value) 改变每页显示个数

1、value 是每页显示个数

三、Slide参数详解

1、需要传递的props参数如下:

基本属性
name类型默认值描述
usethemeBooleanfalse是否要使用主题
themeStringblue主题名称,目前提供 blue、purple、green 三种可选值,也可以传完整的16进制颜色和rgb值,使用主题后,以主题色为准
valueString、Number""没有传空
listArray[]下拉列表选项。注意这里要求必须有id和name两个字段
widthString、Number200组件宽度
heightString、Number30组件高度
fieldString""当有表单时该下拉的字段名称
refreshBooleanfalse是否实时更新state
notEmptyBooleanfalse是否该字段不能为空(有没有八叉图表)
disturbInfoString""打断下拉操作的信息
样式属性
name类型默认值描述
allcssString""针对于该组件外层的css完整样式代码
borderRadiusString、Number2组件圆角
borderWidthNumber1组件中的边框宽度 (单位:像素)
borderColorString#1D82FE组件的边框颜色
backgroundStringtransparent组件主体背景
fontSizeString、Number14组件主体字体大小(字符串需要带单位,数字默认单位px)
fontColorString#333组件主体字体颜色
fontPlaceholderColorString#757575组件主体类似placeholder字体颜色
placeholderString请选择一项类似input的placeholder
iconColorString#1D82FE× 按钮的颜色
iconSizeString、Number14× 按钮的字体大小
triangleColorString#333↓下拉按钮的颜色
triangleSizeString、Number12↓下拉按钮的字体大小(字符串需要带单位,数字默认单位px)
下拉框样式属性
name类型默认值描述
slideDirectionStringdown上拉还是下拉 提供 up和down两种可选值
slideOptionHeightString、Number25下拉每个选项的高度
slideOptionNumberNumber7下拉一屏展示多少个选项
slideBackgroundString#fff下拉背景色
slideBorderWidthNumber1下拉框边框宽度
slideBorderColorString#1D82FE下拉框边框颜色
slideBoxShadowStringnone下拉框阴影
slideFontSizeString、Number12下拉框选项字体颜色
slideActiveBgcolorString#1D82FE下拉框选项选中时的背景色
slideActiveFcolorString#fff下拉框选项选中时的字体色
slideActiveOpacityNumber20拉框选项选中时的背景透明度 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类型默认值描述
usethemeBooleanfalse是否要使用主题
themeStringblue主题名称,目前提供 blue、purple、green 三种可选值,也可以传完整的16进制颜色和rgb值,使用主题后,以主题色为准
nameString搜索按钮里的字
widthString、Number200组件宽度
heightString、Number30组件高度
样式属性
name类型默认值描述
allcssString""针对于该组件外层的css完整样式代码
borderRadiusString、Number2组件圆角
borderWidthNumber1组件中的边框宽度 (单位:像素)
borderColorString#1D82FE组件的边框颜色
backgroundString#1D82FE组件主体背景
fontSizeString、Number14组件主体字体大小(字符串需要带单位,数字默认单位px)
fontColorString#333组件主体字体颜色
cursorStringpointer鼠标移到组件上的样式
boxShadowStringnone完整的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)} />
2.5.9

3 years ago

2.5.4

4 years ago

2.5.3

4 years ago

2.5.2

4 years ago

2.5.1

4 years ago

2.5.0

4 years ago

2.4.13

5 years ago

2.4.12

5 years ago

2.4.11

5 years ago

2.4.10

5 years ago

2.4.9

5 years ago

2.4.8

5 years ago

2.4.7

5 years ago

2.4.6

5 years ago

2.4.5

5 years ago

2.4.4

5 years ago

2.4.1

5 years ago

2.4.0

5 years ago

2.3.8

5 years ago

2.3.7

5 years ago

2.3.6

5 years ago

2.3.5

5 years ago

2.3.4

5 years ago

2.3.3

5 years ago

2.3.2

5 years ago

2.3.1

5 years ago

2.3.0

5 years ago

2.2.1

5 years ago

2.2.0

5 years ago

2.1.0

5 years ago

2.0.2

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.1.10

5 years ago

1.1.9

5 years ago

1.1.8

5 years ago

1.1.6

5 years ago

1.1.5

5 years ago

1.1.4

5 years ago

1.1.2

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.0

5 years ago