❤
npm
Sign UpSign In

owl-mobile

0.1.0 • Public • Published

react-native的UI组件库
  1. QMBadge - 徽标
  2. QMButton - 按钮
  3. QMCheckBox - 复选框
  4. QMRadio - 单选
  5. QMList - 列表
  6. QMSwitch - 滑动开关
  7. QMInputItem - 文本输入
  8. QMSwipeAction - 滑动操作(左滑删除)
  9. QMTabs - 标签页
  10. QMTag - 标签
  11. QMToast - 轻提示
  12. QMDropDown - 下拉菜单
  13. QMPicker - 选择框
  14. QMIcon - 自定义字体图标库
  15. QMText - 文本
  16. QMTextInput - 输入框
  17. QMLoading - 加载中
  18. QMTextArea - 多行文本输入
  19. QMActionSheet - 动作面板
  20. QMDatePicker - 日期控件

QMBadge - 徽标

图标右上角的红点、数字或者文字。用于告知用户，该区域的状态变化或者待处理任务的数量。 可参照mobile.ant.design

规则

  • 当用户只需知道大致有内容更新时，应该使用红点型，如：社交中的群消息通知。
  • 当用户有必要知晓每条更新时，应该使用数字型。如：社交中的一对一的消息通知。

API

属性 说明 类型 默认值
size 大小，可选 large small string small
text 展示的数字或文案，当为数字时候，大于 overflowCount
时显示为 ${overflowCount}+，为 0 时隐藏		 string|number -
corner 置于角落 boolean false
dot 不展示数字，只有一个小红点 boolean false
overflowCount 展示封顶的数字值 number 99

QMButton - 按钮

点击后会触发一个操作。 可参照mobile.ant.design

API

属性 说明 类型 默认值
type 按钮类型，可选值为primary/ghost或者不设 string -
size 按钮大小，可选值为middle、small string middle
activeStyle 点击反馈的自定义样式 (设为 false 时表示禁止点击反馈) {}/false {}
disabled 设置禁用 boolean false
style 自定义样式 Object 无
onPress 点击按钮的点击回调函数 (e: Object): void 无
onPressIn 同 RN TouchableHighlight onPressIn (e: Object): void 无
onPressOut 同 RN TouchableHighlight onPressOut (e: Object): void 无
onShowUnderlay 同 RN TouchableHighlight onShowUnderlay (e: Object): void 无
onHideUnderlay 同 RN TouchableHighlight onHideUnderlay (e: Object): void 无

QMCheckBox - 复选框

复选框 可参照mobile.ant.design

API

Checkbox

属性 说明 类型 默认值
defaultChecked 初始是否选中 Boolean 无
checked 指定当前是否选中 Boolean 无
disabled Boolean false
onChange change 事件触发的回调函数 (e: Object): void 无

Checkbox.CheckboxItem

基于List.Item对Checkbox进行封装,List.Item的thumb属性固定传入Checkbox,其他属性和List.Item一致。 其他 API 和 Checkbox 相同。

Checkbox.AgreeItem

QMRadio - 单选

单选框 可参照mobile.ant.design

Radio

属性 说明 类型 默认值
name name String 无
defaultChecked 初始是否选中 Boolean 无
checked 指定当前是否选中 Boolean 无
disabled 禁用 Boolean false
onChange change 事件触发的回调函数 (e: Object): void 无

Radio.RadioItem

基于List.Item对Radio进行封装,List.Item的extra属性固定传入Radio,其他属性和List.Item一致。 其他 API 和 Radio 相同。

QMList - 列表

单个连续模块垂直排列，显示当前的内容、状态和可进行的操作 可参照mobile.ant.design

规则

  • 一般由主要信息、主要操作、次要信息、次要操作组成。
  • 主要信息和主要操作放在列表的左边，次要信息和次要操作放在列表的右边。

API

List

属性 说明 类型 默认值
renderHeader list heder (): void 无
renderFooter list footer (): void 无

List.Item

属性 说明 类型 默认值
thumb 缩略图(当为 string 类型时作为 img src) String/React.Element 无
extra 右边内容 String/React.Element 无
arrow 箭头方向(右,上,下), 可选horizontal,up,down,empty，如果是empty则存在对应的dom,但是不显示 String 无
align Flex 子元素垂直对齐，可选top,middle,bottom String middle
onClick 点击事件的回调函数 (): void 无
error(web only) 报错样式,右侧文字颜色变成橙色 Boolean false
multipleLine 多行 Boolean false
wrap 是否换行，默认情况下，文字超长会被隐藏， Boolean false
activeStyle(web only) 自定义active的样式 Object
platform (web only) 设定组件的平台特有样式, 可选值为 android, ios， 默认为 cross， 即组件会自动检测设备 UA 应用不同平台的样式 String 'cross'

QMList.Row 某些情况下，QMList.Item不能满足需求，尤其里面的布局不规则时，我们提供了QMList.Row，你可以在里面自定义布局。

属性 说明
style 为QMList.Row编写自定义样式
onPress 为QMList.Row绑定onPress事件

QMSwitch - 滑动开关

在两个互斥对象进行选择，eg：选择开或关。 可参照mobile.ant.design

规则

  • 只在 List 中使用。
  • 避免增加额外的文案来描述当前 Switch 的值。
  • 可调整 Switch 的主体来满足 APP 的视觉风格。

API

属性 说明 类型 默认值
checked 是否默认选中 Boolean false
disabled 是否不可修改 Boolean false
onChange change 事件触发的回调函数 (checked: bool): void 无
name(web only) switch 的 name String
platform (web only) 设定组件的平台特有样式, 可选值为 android, ios， 默认为 cross， 即组件会自动检测设备 UA 应用不同平台的样式 String 'cross'

QMInputItem - 文本输入

用于接受单行文本。。 可参照mobile.ant.design

规则

  • 支持通过键盘或者剪切板输入文本。
  • 通过光标可以在水平方向进行移动。
  • 对特定格式的文本进行处理，eg：隐藏密码。

API

属性 说明 类型 默认值
type 银行卡bankCard,手机号phone（此时最大长度固定为11,maxLength设置无效）,密码password, 数字number（尽量唤起数字键盘） String text
value value 值(受控与否参考https://facebook.github.io/react/docs/forms.html) String 无
defaultValue 设置初始默认值 String -
placeholder placeholder String ''
editable 是否可编辑 bool true
disabled 是否禁用 bool false
clear 是否带清除功能(仅editable为true,disabled为false,value设置才生效) bool false
maxLength 最大长度 number 无
onChange change 事件触发的回调函数 (val: string): void -
onBlur blur 事件触发的回调函数 (val: string): void -
onFocus focus 事件触发的回调函数 (val: string): void -
error 报错样式 bool false
onErrorClick 点击报错 icon 触发的回调函数 (e: Object): void 无
extra 右边注释 string or node ''
onExtraClick extra 点击事件触发的回调函数 (e: Object): void 无
labelNumber 定宽枚举值：num * @input-label-width: 34px，可用2-7之间的数字，一般(不能保证全部)能对应显示出相应个数的中文文字(不考虑英文字符) number 5
autoFocus 页面初始化时Input自动获取光标,每个页面只有一个Input的autpFocus会生效。（不保证所有浏览器都生效） bool false
focused 页面运行过程中,Input获取光标,当Input获取光标（focused更新为true）后，需要在onFocus或者onBlur时再次将该属性设置为false。 bool false
updatePlaceholder (web only) 当清除内容时，是否将清除前的内容替换到 placeholder 中 bool false
prefixListCls (web only) 列表 className 前缀 String am-list
name (web only) input 的 name String 无

更多属性请参考 react-native TextInput (http://facebook.github.io/react-native/docs/textinput.html)

QMSwipeAction - 滑动操作(左滑删除)

滑动操作组件。结合手势操作，从屏幕一侧唤出操作。 可参照mobile.ant.design

规则

  1. 一次只可滑动一行列表
  2. 点击任意按钮之外处或往回滑动该列表可隐藏操作。

API

SwipeAction

属性 说明 类型 默认值
style swipeout 样式 Object
left 左侧按钮组 Array null
right 右侧按钮组 Array null
autoClose 点击按钮后自动隐藏按钮 Boolean function() {}
onOpen 打开时回调函数 (): void function() {}
disabled 禁用 swipeout Boolean false
onClose 关闭时回调函数 (): void function() {}

Button

参数 说明 类型 默认值
text 按钮文案 String Click
style 按钮样式 Object ``
onPress 按钮点击事件 (): void function() {}

QMTabs - 标签页

用于让用户在不同的视图中进行切换。 可参照mobile.ant.design

规则

  • 标签数量，一般 2-4 个；其中，标签中的文案需要精简，一般 2-4 个字。
  • 在 iOS 端的次级页面中，不建议使用左右滑动来切换 Tab，这个和 iOS 的左滑返回存在冲突，eg：详情页中 Tabs。

API

适用平台：WEB、React-Native

Tabs

属性 说明 类型 默认值
activeKey 当前激活 tab 面板的 key String 无
defaultActiveKey 初始化选中面板的 key，如果没有设置 activeKey String 第一个面板
onChange 切换面板的回调 (key: string): void 无
onTabClick tab 被点击的回调 (key: string): void 无
animated 是否动画 boolean true
swipeable 是否可以滑动 tab 内容进行切换 boolean true
hammerOptions(Web Only) 开启swipeable的时候可以对 hammerjs 的 pan 和 swipe 两种手势进行参数配置 object {}
tabBarPosition tab 位置 top/bottom string top
destroyInactiveTabPane 是否销毁掉不活动的 tabPane (优化使用) boolean false
underlineColor(react-native only) 线条颜色 string #ddd
activeUnderlineColor(react-native only) 选中线条颜色 string #108ee9
textColor(react-native only) 文字颜色 string #000
activeTextColor(react-native only) 选中文字颜色 string #108ee9
barStyle(react-native only) tabs bar 样式 object {}
prefixCls(web only) className 前缀 string am-tabs
className(web only) 额外的 className string 无
pageSize(web only) 可视区显示的 tab 数量，可以看做一页 number 5
speed(web only) 多页模式下，TabBar 滑动的速度 Number: 1 ~ 10 8
tabBarhammerOptions(web only) 同hammerOptions，对 TabBar 的滑动手势进行配置 Obejct {}

Tabs.TabPane

属性 说明 类型 默认值
key 对应 activeKey String 无
tab 选项卡头显示文字 React.Element or String 无

QMTag - 标签

进行标记和分类的小标签，用于标记事物的属性和维度，以及进行分类。 可参照mobile.ant.design

规则

  • 标签文字必须显示完全。

API

属性 说明 类型 默认值
type 按钮类型，可选值为default(点击无选中效果)/primary/hot/warning/success或者不设 string -
small 小号标签 Boolean false
disabled 是否不可用 Boolean false
closable 是否关闭（非 disabled small 状态） Boolean false
selected 是否默认选中 Boolean false
onChange 切换选中回调函数 (selected: bool): void 无
onClose 点关闭时的回调函数 (): void 无
afterClose 关闭后的回调 (): void 无

QMToast - 轻提示

一种轻量级反馈/提示，可以用来显示不会打断用户操作的内容，适合用于页面转场、数据交互的等场景中。 可参照mobile.ant.design

规则

  • 一次只显示一个 toast。
  • 有 Icon 的 Toast，字数为 4-6 个；没有 Icon 的 Toast，字数不宜超过 14 个。

API

适用平台：WEB、React-Native

  • Toast.success(content, duration, onClose, mask)
  • Toast.fail(content, duration, onClose, mask)
  • Toast.info(content, duration, onClose, mask)
  • Toast.loading(content, duration, onClose, mask)
  • Toast.offline(content, duration, onClose, mask)

组件提供了五个静态方法，参数如下：

属性 说明 类型 默认值
content 提示内容 React.Element or String 无
duration 自动关闭的延时，单位秒 number 3
onClose 关闭后回调 Function 无
mask 是否显示透明蒙层，防止触摸穿透 Boolean true

注： duration = 0 时，onClose 无效，toast 不会消失；隐藏 toast 需要手动调用 hide

还提供了全局配置和全局销毁方法：

  • Toast.hide()

QMDropDown - 下拉菜单

点击后会显示一个菜单。 API

DropDownItem

属性 说明 类型 默认值
title 按钮显示文本，如果为数组则自动为多个按钮（DropDownItem 必须添加titleIndex属性） string或array -
onChange 点击下拉菜单触发的事件 (value: string, titleIndex: number): void -
defaultValue 默认值 - -
changeTitleAble 点击下拉菜单是否切换title文本 boolean true
visible 是否可见 boolean true
style 自定义样式 Object 无
clearNext 选中当前时候清空下一个的选中(多级时才有用) boolean false
modalCloseVisible 点击遮罩是否关闭下拉框 boolean true

DropDownItem

属性 说明 类型 默认值
value 值 string -
onClick 点击下拉菜单触发的事件 (value: string, titleIndex: number): void -
titleIndex 多个按钮时对应的下标 - -

QMPicker - 选择框

在一组预设数据中进行选择，e.g. 省市区选择 可参照mobile.ant.design

QMIcon - 自定义字体图标库

图标 如何使用

一. 首先安装依赖：（参考 https://github.com/oblador/react-native-vector-icons）

npm install react-native-vector-icons-qmicon —save

react-native link

二. 应用： import { QMIcon, QMButton } from "qmkit";

图标： 带图标按钮：123

API

适用平台：React-Native

属性 说明 类型 默认值
name 图标名称 name ‘shouji1’ reqiure('xxx')
size 图标大小 'xxs'/'xs'/'sm'/'md'/'lg'
color 图标颜色 color '#000'

QMForm - 表单

form常用的组件，输入框、日期控件、只读组件、密码控件

QMText - 文本

文本，属性与react-native Text一致

Readme

Keywords

none

Package Sidebar

Install

npm i owl-mobile

Weekly Downloads

0

Version

0.1.0

License

none

Last publish

Collaborators

  • ve
Try on RunKit
Report malware