1.0.1 • Published 7 years ago
@ali/weex-ui-components
A ui-components webpack for weex.
Install
npm install gts-weex-components --save
Usage
已有组件:
button/button-group/button-icon/button-plain/cell-item/cells-item/col/form-item/icon/input/line/list/menu/picker/row/search/select/slider/switch/tab/tabbar/textarea/textarea-withcount/upload
使用方法:按需引入 require('weex-ui-components/组件名称')
Each component attributes as follows:
1.Button 组件
按钮组件,以下分别是基本按钮、朴素按钮、图标按钮的属性说明:
Button Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
size | 尺寸 | string | large,small | — |
type | 类型 | string | primary,secondary,warning,text | — |
disabled | 是否禁用状态 | boolean | — | false |
Plain Button Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
size | 尺寸 | string | large,small | — |
type | 类型 | string | primary,secondary,warning | — |
disabled | 是否禁用状态 | boolean | — | false |
Icon Button Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
size | 尺寸 | string | large,small | — |
type | 类型 | string | primary,secondary,warning,text | — |
disabled | 是否禁用状态 | boolean | — | false |
icon | 图标,已有的图标库中的图标名 | string | Icon List | — |
2.Cell-item 组件
类似于form的列表视图,用于将信息以列表的结构显示在页面上,属性说明如下:
Cell-item Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
access | 是否有图标 | boolean | — | false |
last | 是否为最后一列 | boolean | — | false |
cellIcon | 图标 | string | — | — |
title | 标题文字 | string | — | — |
desc | 说明文字 | string | — | — |
3.Cells-item组件
列表视图集合,属性说明如下:
Cell-item Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
title | 列表标题 | string | — | — |
4.Col组件
栅格布局组件,属性说明如下:
Col Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
span | 栅格占据的列数 | number | — | - |
5.Form-cell组件
由输入框、选择器、单选框、多选框等控件组成,用以收集、校验和提交数据。属性说明如下:
Form Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
inline | 是否在同一行 | boolean | — | true |
align | 排列方式 | string | — | left |
label | 标签 | string | — | — |
width | 用于计算标签宽度 | number | — | — |
last | 是否为最后一列 | boolean | — | false |
6.Gallery组件
Gallery Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
index | 图片标志 | string | — | — |
galleryImgSrc | 图片路径 | string | — | — |
7.Icon组件
图标更新步骤:
1.登录http://www.iconfont.cn/plus
2.找到想添加的图标添加至项目vue-com
3.更新Unicode的在线链接
4.将icon.vue文件中的url('//at.alicdn.com/t/***.ttf')替换掉
5.在icon.data.js中添加图标的名称和对应的code,搞定!
Icon Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
name | 图标名称 | string | — | — |
8.input组件
Input Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
type | 类型 | string | text/password/url/email/tel | text |
value | 绑定值 | string, number | — | — |
maxlength | 最大输入长度 | number | — | — |
placeholder | 输入框占位文本 | string | — | — |
disabled | 禁用 | boolean | — | false |
autofocus | 原生属性,自动获取焦点 | boolean | true, false | false |
Input Events
事件名称 | 说明 | 回调参数 |
---|
blur | 在 Input 失去焦点时触发 | (event: Event) |
focus | 在 Input 获得焦点时触发 | (event: Event) |
change | 在 Input 值改变时触发 | (value: string | number) |
9.Line组件
宽度为1的白色分隔线
10.List组件
分为纯文字无序列列表、图文混排列表、有序列表、节点列表。属性说明如下:
List Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
hasseq | 是否有序列 | boolean | — | false |
hasnode | 是否有节点 | boolean | — | false |
imgSrc | 图片路径 | string | — | — |
itemTitle | 列表名称 | string | - | - |
itemContent | 列表内容 | string | - | - |
inline | 名称时间状态是否在一行上 | boolean | - | - |
itemName | 名字 | string | - | - |
nameColor | 名字颜色 | string | - | - |
itemSize | 名字字体大小 | number | - | - |
itemTime | 时间 | string | - | - |
timeColor | 时间颜色 | string | - | - |
timeSize | 时间字体大小 | number | - | - |
itemStatus | 状态 | string | - | - |
starusColor | 状态颜色 | string | - | - |
starusSize | 状态字体大小 | number | - | - |
11.Picker 组件
Picker Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
type | picker 的类型 | string | date,time | date |
placeholder | 占位文本 | string | — | 请选择 |
value | 绑定值 | string | date 类型时格式为 yyyy-mm-dd ; time 类型时格式为 hh:mm | — |
Picker Events
事件名称 | 说明 | 回调参数 |
---|
select | 点击data选择器触发的事件 | 选中的data值 |
12.Row 组件
Row Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
gutter | 栅格间隔 | number | — | 0 |
justify | flex 布局下的水平排列方式 | string | start/end/center/space-around/space-between | start |
align | flex 布局下的垂直排列方式 | string | top/middle/bottom | top |
13.Search组件
搜索框组件
Search Attributes
14.Select 组件
Select Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
selectStyle | 选中样式 | string | borderStyle/iconStyle | - |
selectOne | 是否为单选 | boolean | — | true |
radioList | 选项数组 | array | — | — |
isRow | 选项是否排列在一行 | boolean | — | true |
isRadio | 选项是否为圆形 | boolean | — | true |
maxLimit | 最多选中个数 | number | - | - |
radioList.index | 选项标志 | string | — | — |
radioList.checked | 是否选中 | boolean | — | false |
radioList.value | 选项对应的值 | string | — | — |
radioList.label | 选项标签 | string | — | — |
Select Events
事件名称 | 说明 | 回调参数 |
---|
select | 点击select触发的事件 | index,value |
15.Slider 轮播组件
Select Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
interval | 切换时间(ms) | number | - | - |
autoPlay | 是否自动播放 | boolean | — | true |
imageList | 图片列表 | array | — | — |
indicatorColor | 导航颜色 | string | — | - |
indicatorLeft | 导航距左侧距离 | number | — | - |
16.Switch 组件
Switch Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
checked | 是否选中 | boolean | — | false |
disabled | 是否禁用 | boolean | — | false |
Events
事件名称 | 说明 | 回调参数 |
---|
change | switch 状态发生变化时的回调函数 | 新状态的值 |
17.Tab组件
由横向和垂直tab组成, 属性说明如下:
Tab Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
inline | 是否在同一行 | boolean | — | true |
tabWidth | 纵向tab的宽度设置 | number | — | - |
selectedColor | 选中颜色 | string | - | - |
tabList | 标签内容 | array | — | - |
18.Tabbar组件
底部导航栏, 属性说明如下:
Tab Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
tabitem | tab参数 | array | — | — |
tabitem[].title | tab名称 | string | — | — |
tabitem[].icon | icon名称 | string | — | — |
tabitem[].visibility | tab是否被选择 | boolean | — | — |
itemstyle | 样式参数 | object | — | — |
itemstyle.titleColor | 名称颜色 | string | — | — |
itemstyle.selectedTitleColor | 被选中后名称颜色 | string | — | — |
itemstyle.iconColor | 图标颜色 | string | — | — |
itemstyle.selectedIconColor | 被选中后图标颜色 | string | — | — |
19.Textarea
Textarea Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
value | 绑定值 | string, number | — | — |
maxlength | 最大输入长度 | number | — | — |
placeholder | 输入框占位文本 | string | — | — |
disabled | 禁用 | boolean | — | false |
rows | 输入框行数 | number | — | 2 |
autofocus | 原生属性,自动获取焦点 | boolean | true, false | false |
Textarea Events
事件名称 | 说明 | 回调参数 |
---|
blur | 在 Textarea 失去焦点时触发 | (event: Event) |
focus | 在 Textarea 获得焦点时触发 | (event: Event) |
change | 在 Textarea 值改变时触发 | (value: string | number) |
20.Upload组件
通过点击上传图片,属性说明如下:
Upload Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
index | 图片标志 | string | — | — |
title | 上传标题 | string | — | — |
limit | 是否有数量上限 | boolean | — | false |
uploadLimit | 上传数量上限 | number | — | 9 |
desc | 上传解释详情 | string | — | 9 |
uploadList | 照片路径列表 | array | — | - |
enabled | 是否还能再上传 | boolean | — | true |