账户中心 退出系统
普通版本 weex版本
快速开始
更新日志
快速部署框架
组件调用说明
代码块功能
data 重要说明
APP端关闭回弹
视频教程
组件库 ( 40个 )
01. 头部信息组件
02. Flex布局 + 通用样式
03. 常用文本
04. 滚动区域
05. 可移动区域
06. 徽章组件
07. 滚动公告
08. 通用列表
09. 图文列表
10. 新闻列表
11. 卡片视图
12. 多格图标
13. 局部选项卡
14. 全屏选项卡
15. 星级图标
16. 折叠面板
17. 按钮组件
18. Loading 组件
19. 全屏 Loading
20. 标题、更多、换一批
21. 横向公告
22. 底部导航
23. 表单组件
24. 数字输入框
25. 可选标签
26. 弹出层
27. 图标
28. 步骤
29. 倒计时(step)
30. 轮播组件
31. 滑动操作
32. 日历组件
33. 区间滑块
34. 顶部提示
35. 进度条、圆环进度条
36. 弹出式菜单
37. 多功能菜单
38. 数字键盘
39. 富文本加强
40. 浮层引导
界面库 ( 27个 )
01. 评论界面
02. 搜索界面
03. 登录、注册
04. 城市选择
05. echarts 【第三方】
06. 图片选择及预览
07. 设置界面
08. 下拉刷新
09. 上拉加载
10. 普通表格
11. 数据表格
12. 时间轴
13. 商品分类展示
14. 购物车
15. 条件筛选
16. 瀑布流
17. 图片剪裁
18. 商品详情 + 属性选择
19. 图片懒加载
20. 地区联动
21. IM 即时通讯
22. 骨架屏
23. 分段切换
24. 抽奖活动
25. 问卷界面
26. 地址管理界面
27. 身份证上传
表单、验证
1. 表单组件
2. 表单、数据验证
css 动画
animate.css 动画库
js 工具库
常用工具库介绍
日期时间转换
网络请求工具
随机数及字符
MD5 转换
app版本检查及更新

GraceUI 更新日志

1564977959297853.png
2019-09-09 更新

1. 优化购物车界面 [ 添加 全选功能 ]
2. 优化图片选择组件、添加默认值及演示
3. 可选标签组件添加 api 数据演示
4. 链接组件 app 展示标题信息

2019-09-05 更新

GraceUI Weex 版本 [ uni-app ] 模式正式发布 ( 替换原来的 weex 模式 ) ! 
此次更新,GraceUI Weex 版本与普通版本基本对齐,组件、布局同步率 90% 以上;

graceUI 进入高频更新阶段,更新日志 :2019-08-01 至 2019-08-15 更新
graceUI 精细化、组件化、丰富化升级已经进入代码更新阶段,我们将逐步更新每一个细节每一个组件及页面;
graceUI 进入高频更新阶段,更新日志 :

# 2019-08-14 升级内容
### 1.49 [ 优化 ~ ] 登录注册界面 美化
### 1.50 [ 新增 ~ ] 图片选择及预览组件
### 1.51 [ 优化 ~ ] 小幅度调整 个人中心 界面
### 1.52 [ 添加 ~ ] 点选按钮组件
### 1.53 [ 添加 ~ ] 新版本购物车,支持选择对应商品进行支付

# 2019-08-13 更新内容
### 1.46 [ 优化 ~ ] 表单元素添加图标、小幅度样式优化
### 1.47 [ 优化 ~ ] 图标全面(全部组件及 icons.css)使用阿里图标远程库(更好的兼容低端机)
### 1.48 [ 优化 ~ ] GraceUI 编辑器小幅度优化;

# 2019-08-12 升级内容
### 1.41 [ 优化 ~ ] 倒计时组件添加属性实现更高的定制化
### 1.42 [ 优化 ~ ] 小幅度调整日历组件
### 1.43 [ 优化 ~ ] 小幅度调整优惠券组件样式
### 1.44 [ 优化 ~ ] 展开阅读组件添加 btnColor 属性用于设置文本颜色
### 1.45 [ 优化 ~ ] 26个常用组件演示代码的优化

# 2019-08-09 升级内容
### 1.27 [ 优化 ~ 按钮组件 ] 修正大小,更精致、解决小程序 primary 按钮样色不同步问题;
### 1.28 [ 优化 ~ 星级组件 ] 修正间距过大问题、优化颜色
### 1.30 [ 优化 ~ ] 重构 头部信息框(更漂亮、兼容性更好)
### 1.40 [ 优化 ~ ] 组件演示代码至通用标题

# 2019-08-08 升级内容
### 1.23 [ 优化 ~ ]  分类展示界面样式及搜索算法
### 1.24 [ 优化 ~ ]  弹出菜单组件及演示代码
### 1.25 [ 优化 ~ ]  时间轴样式优化
### 1.26 [ 优化 ~ ]  横向日期样式优化

# 2019-08-07 升级内容
### 1.18 [ 优化 ~ ]  小幅度调整评论列表样式
### 1.19 [ 优化 ~  受影响 ):] 遮罩层样式及布局
### 1.20 [ 添加 + ] 切换导航组件 [可配置出多种模式]
### 1.21 [ 添加 + ] 局部导航演示 [新版本]
### 1.22 [ 优化 ~  受影响 ): ] 全屏选项卡 新闻列表结构调整
### 1.22 [ 优化 ~  受影响 ): ] 分段切换 布局调整


# 2019-08-05 升级内容
# 统一优化 逐步将 upx 替换成 rpx
# 演示代码尽量使用已有演示 [ 实践并提高样式复用性 ]
##  1. graceUI.css 调整
### 1.1 [ 删除 - ] 删除全局样式 view 的 line-height 属性;
~~~
view{font-size:28upx; line-height:2em; color:#0E151D;}
view{font-size:28upx; color:#333333;} 颜色更新为 333333
~~~
### 1.2 [ 优化 ~ ] grace-wrap、grace-nowrap、grace-space-between, 使用时不必依赖 grace-rows 样式;
### 1.3 [ 添加 + ] .grace-no-scale 样式 [ 元素不缩放 ]
~~~
.grace-no-scale{flex-shrink:0;}
~~~
### 1.4 [ 优化 ~ ] 间距改为 25rpx 
###     [ 添加 + ] .grace-body 用于页面主结构 
~~~
.grace-padding{padding:0 25rpx;}
.grace-margin{margin:0 25rpx;}
.grace-body{width:700rpx; margin:0 25px;}
.grace-margin-top{margin-top:30rpx;}
~~~
### 1.5 [ 优化 ~ ] 文字颜色 主色改为 #333333
###     [ 添加 + ] 
~~~
.grace-black6{color:#666666;}
.grace-black9{color:#999999;}
~~~
### 1.6 [ 优化 ~ ] 纯色背景颜色 去掉提权样式
### 1.7 [ 优化 ~ ] 小圆角 20rpx 改为 10rpx
### 1.8 [ 优化 ~ ] 渐变背景色角度改为 左右
### 1.9 [ 优化 ~ ] 去除 h1 - h6 的行高样式
### 1.10 [ 优化 ~ ] text 文字大小调整至 26rpx 添加 描述文本 desc 24rpx、 优化行高
~~~
.grace-text{font-size:26rpx; line-height:50rpx;}
.grace-desc{font-size:24rpx; line-height:44rpx;}
.grace-text-small{font-size:22rpx; line-height:40rpx;}
~~~
### 1.11 宫格布局调整为默认一行4列,字体、图片尺寸优化;
### 1.12 [ 优化 ~ ] 头部导航演示代码 [ 更方便更稳定、简化dom结构,多种演示方案,详见手册 布局-导航]
### 1.13 [ 优化 ~  受影响 ):] 搜索样式 [受影响的界面 "搜索界面" 更新见手册]
### 1.14 [ 优化 ~ ] 普通列表样式
### 1.15 [ 优化 ~ ] 滑动列表样式及布局
### 1.16 [ 优化 ~ ] 图文卡片样式
### 1.17 [ 优化 ~ 调整 + ] 新闻列表样式[ 布局有小幅度变化旧项目请更新布局 ]

2019-07-22 更新

1. 新增 排行榜界面【界面库】
2. 新增 横向日期【布局】

2019-07-18 更新

1. 优化商品详情页面布局( 还将通过套装使用时再次优化 );
2. 添加 空数据展示 组件;
3. weex 版本 css 警告 全面修正;
4. weex 版本全面优化 【跟随 uni-app 将 div 全部替换为 view】

2019-07-16 更新

1. graceLoading 组件添加图标、文本颜色属性;
2. 优化顶部弹出框动画效果;
3. 优化间距样式,去除上下间距,避免产生滚动条;
4. 可选标签组件化 (使用更方便);
5. 调整数字键盘点击延迟时间 ( 默认时间太长感觉卡顿 );
6. 优化筛选界面,弹出层弹出后禁止滑动,优化价格排序图标;

2019-07-15 更新

1. 底层更新双向滑块组件;
2. 添加无缝滚动组件;

2019-07-05 更新

[ 手册更新 ] - 代表 只看一下手册更新即可不需要下载核心源码包 ~

[ 内核更新 ] - 代表 要下载核心源码包 ~

1. 优化全屏选项卡、分段器界面及api [ 手册更新 ]
2. 为分类展示添加搜索商品功能 [ 手册更新 ]
3. 手册小错误调整 [ 手册更新 ]
4. 评论布局页面添加动态数据绑定;、 添加图片预览效果 [ 手册更新 ]
5. 城市选择组件添加默认城市、热门城市 [ 手册更新 ]

2019-07-02

[ 无需下载更新 ] - 代表只看一下手册更新即可 ~
1. 更新 promise 演示 [ 无需下载更新 ]
    1.1 使用箭头函数演示
    1.2 增加并发请求演示  
2. 更新动画库调用演示  [ 无需下载更新 ]
3. 小幅度优化局部选项卡演示代码 [ 无需下载更新 ]
4. 优化全屏选项卡 [ 数据来自 api 请求、完整动态演示刷新、加载 ] [ css 小幅度更新 ]
5. 修正 jsTools/request.js 上个版本更新时的bug;

2019-07-01

1. 优化表单元素添加 快速清除、密码可视功能;
2. 添加 "使用 promise 顺序执行异步函数" 说明及演示代码;

2019-06-28

graceUI 发布 weex 版本,为app端带来顺畅的运行体验 ^_^

2019-05-16

1. 添加“链接”组件 自动分析运行环境;
2. 发布 原创 "富文本" 编辑器 及“富文本编辑器内容解析器“ 对编辑器收集的数据进行解析;
支持类型 : 文本、居中标题、图片、引用、加粗、链接、分割线;

2019-05-13

1. 添加图标分类组件[ 手册在布局 颜值高 使用场景较多]
2. 修正双滑块 ios 12.x 版本下 bug;
3. 添加视频列表界面 [ 滚动到屏幕中间的视频自动播放 ]

2019-05-08

1. 添加头部导航组件 [布局] [ 兼容刘海屏及各大平台 ]2. 优化弹出菜单组件 [ 阻止事件冒泡 ]
3. 小幅度优化内置图标
4. 商城套装优化 [ 兼容刘海屏、循环变量名优化、图片地址api优化 ]
5. 优化日历组件 [ 添加取消选择功能, 时间垂直居中显示 ]

2019-05-07

1. uni-app版本IM整体更新 [ 接入IM服务,优化基础组件,演示完整功能 ]
2. 表单验证小数识别BUG修正
3. js 工具-时间转换工具添加 [ 过去时间格式转换 ] 功能

2019-04-24

1. 返回顶部组件添加颜色属性;
2. 数值框组件添加 datas 属性用于携带其他数据;
3. 优化购物车界面;
  3.1 购物车数据来自api 
  3.2 以店铺为基础模式展示购物数据
  3.3 购物车为空提示
4. 优化分段界面 api 及 页面加载模式;
5. 优化内置图标样式优化兼容性;

===== 发布 2.0 版本 graceMall uni-app 版本 ========
一个基础的商城布局演示,您可以在其基础上进行二次开发;

2019-04-22

1. 添加模态对话框(插槽模式 可灵活配置出多种模式)【组件】
2. 添加底部对话框(插槽模式 可灵活配置出多种模式)【组件】
3. 添加 侧边抽屉组件 (可配置 左右模式) 【布局】

2019-04-15 graceUI 2.0 版本发布

2019年4月15日 graceUI2.0 uni-app版本正式发布,微信小程序版本预计 2019年5月1日前发布;
变化 ( 视频教程第一节有完整演示 ):
1. graceUI 2.0 仔细检查了1.1版本的全部组件,从结构上进行了优化,同时增加了很多新的样式及组件;
2. 下载新版本需要验证您的手机号(graceUI 软著已经申请完成 绑定版权识别 侵权必究);
3. 新版本下载源码不再包含示例源码(演示 :  视频教程第一节有完整演示 或者 手册截图),示例源码统一放到了手册上(直接复制手册内容即可)!uni-app 最新版本支持 vue doc,我们后期将同步支持(开发更方便)
4. 2.0 只是开始,有了好的基础我们会持续更新更多、更好的组件及界面;
5. 2.0 版本需要创建项目后再将graceUI部署到项目内, 详情见部署教程(视频);

2019-03-21

1. 添加卡片视图

2019-03-20

1. 添加身份证上传界面( 包含 : 预览、上传功能 );
2. 添加 rich-text(富文本)加强js工具;

2019-03-15

1. 改进数据表格界面, 标签固定在顶部;
2. 优化分类商品界面, 解决 uni-app 页面切换引发的错误;
3. 在宫格演示界面添加图片宽高样式解决图片抖动问题(其他情况的图片抖动使用此种方式也可解决);
4. 添加 浮层引导 解决方案;

2019-03-12

1. 优化搜索框,解决输入框高度匹配问题;
2. 优化IM界面及组件、添加发送按钮;

2019-03-05

新增地址管理界面,功能介绍 :
1. 提供联系人地址列表
2. 提供新增联系人界面并完成表单检查、表单数据收集功能

2019-03-04

新增 js 工具库,为大家提供日常开发过程中常用的 js 函数工具并保持更新 !
目前已添加工具 : 
日期时间转换 、网络请求 、随机数及字符串生成、MD5 转换、app 端版本检查及更新工具

2019-02-22

1、添加数字键盘组件;
2、修正轮播组件使用固定高度并提供计算方法;
3、修正 echarts 兼容 h5 端运行;
4、重写城市选择界面(城市更全、带有 code)

2019-02-15

添加 animate.css 动画库;

2019-01-28

添加多功能菜单 ( 非组件模式 );

2019-01-25

1、添加弹出式菜单组件;
2、登录界面添加短信发送前的手机号码验证功能;

2019-01-16

1、全新的、智能的分类界面(适合外卖、零售等场景)
2、优化选项卡头部(自动滚动)
3、日期组件添加年切换功能

2019-01-14

更新登录界面 : 调整页面样式、完善短信发送按钮功能、完善表单验证功能;

2019-01-11

1、添加圆环进度条组件
2、全面修正弹出层(添加了2种模式的演示)
3、倒计时组件倒计时结束后可以执行自定义函数
4、一些小的细节调整

2019.01.06

1. 调整普通列表结构及样式;
2. 全面调整演示图标及演示页面;
3. 增加 grace-header 组件;
4. 优化步骤组件;
5. 优化 swiper 组件(添加openType 属性);
6. 调整过滤器页面兼容 H5 端;
graceUI 演示界面视觉优化,更漂亮 (:

2019.01.03

添加刮刮卡抽奖界面、添加问卷界面系统(基于swiper可滑动切换);

2018.12.29

添加抽奖活动界面,包含奖品设置、抽奖过程动画、等相关的一套完善的抽奖界面;

2018.12.28

日期组件添加选择时间功能 【根据配置条件选择】、下载包改成文件夹形式 避免项目中文命名出现问题;

2018.12.26

添加 graceMall 商城界面套装;

2018.12.25

1、添加分段切换界面 [ 界面库 ]
2、添加分段切换新闻列表应用演示 [ 界面库 ]
3、选择图片添加点击图片预览功能 [ 界面库 ]

2018.12.18

添加骨架屏加载组件

2018.12.14

发布 IM 组件,功能概况:
1、支持文字、图片、语音三种模式
2、语音连续播放、暂停
3、历史消息加载
4、录音
5、图片选择、图片预览

2018.12.09

1. 改进滚动操作组件【屏蔽上下滑动】
2. 改进登录界面 [ 添加 input 样式,完善表单提交 ]
3. 小幅度修改数值输入框演示
4. 修正 star 组件兼容 h5 端
5. 修正折叠面板BUG
6. 调整日期组件解决原生宽度单位解析错误
7. 优化登录界面,添加提交事件

2018.11.30

1. 修正小程序端数组输入框最小值判断bug;
2. 修正底部导航布局;
3. 商品展示界面添加属性选择功能;

2018.11.28

1. 修正表单元素, input 标签选择器改为 .input ( 使用input 标签时请添加 class="input" );
2. 底层优化数字输入框并组件化;
3. app及h5端添加自定义导航及透明度导航演示;

2018.11.22

1. 修正表单元素 bug;
2. 完成更新后手册同步工作;
3. 更新代码块与新版本同步;

2018.11.21

1. 添加第三方组件 - 地区联动;
2. 调整样式位置(小改动);
3. 添加表单元素view对应样式;

2018.11.20 底层级更新【旧版本页面布局影响率 < 5%】
从此版本开始兼容其他主流框架(如:可以完美并行于 hellouniapp框架)!