iq-scm / kai-ui Goto Github PK

快速上手

使用之前

使用 kai-ui 前，务必要先阅读wepy自定义组件开发。

预览小程序

如何使用

安装

方式一. 通过 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目录添加进去就可以预览示例了。

贡献者

感谢下面这些小朋友的贡献

stardew wppeng

组件列表

• 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 下拉刷新