0.1.0 • Published 7 years ago
owl-mobile v0.1.0
react-native的UI组件库
- QMBadge - 徽标
- QMButton - 按钮
- QMCheckBox - 复选框
- QMRadio - 单选
- QMList - 列表
- QMSwitch - 滑动开关
- QMInputItem - 文本输入
- QMSwipeAction - 滑动操作(左滑删除)
- QMTabs - 标签页
- QMTag - 标签
- QMToast - 轻提示
- QMDropDown - 下拉菜单
- QMPicker - 选择框
- QMIcon - 自定义字体图标库
- QMText - 文本
- QMTextInput - 输入框
- QMLoading - 加载中
- QMTextArea - 多行文本输入
- QMActionSheet - 动作面板
- 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一致
0.1.0
7 years ago