Awesome
<p align="center"> <img width="200" src="http://images.kaishiba.com/kai-ui.png"> </p>快速上手
使用之前
使用 kai-ui 前,务必要先阅读wepy自定义组件开发。
预览小程序
<p> <img width="150" src="http://images.kaishiba.com/kai.jpg"/> </p>如何使用
安装
方式一. 通过 npm 安装 (推荐)
# npm
npm i kai-ui -S --production
方式二. 下载代码
直接下载GitHub或者通过 git
命令下载并把minparogram文件夹拷贝到自己项目中
git clone https://github.com/Chaunjie/kai-ui.git
使用组件
以按钮组件为例,只需要在 json 文件中引入按钮对应的自定义组件即可
import Panel from 'kai-ui/Panel'
components = {
'k-panel': Panel
}
接着就可以在 wxml 中直接使用组件
<k-panel>使用kai-ui组件库开始</k-panel>
在开发者工具中预览
# 拉取代码
git clone https://github.com/Chaunjie/kai-ui.git
# 安装项目依赖
npm install
# 执行组件编译
npm run dev
打开开发者工具,把dist
目录添加进去就可以预览示例了。
贡献者
感谢下面这些小朋友的贡献
组件列表
- cell 列表
- button 按钮
- icon 图标
- popup 弹出层
- tag 标记
- tab 标签
- select 选择
- toptips 顶部提示
- toast 轻提示组件
- numberpicker 数字输入框
- switch 开关
- actionsheet 操作盘
- dialog 对话框
- uploader 上传
- grid 宫格
- loadmore 更多
- loading 加载中
- panel 面板
- layout 布局
- checkbox 复选框
- radio 单选框
- noticebar 通知栏
- searchbar 搜索框
- input 输入框
- step 步骤条
- slider 滑块
- rate 星级评分
- folder 折叠面板
- calander 日期选择
- swipeout 滑动菜单
- scrollviewrefresh 下拉刷新