Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Chaunjie/kai-ui
高颜值组件库，简单易用，同时支持原生和wepy框架
https://github.com/Chaunjie/kai-ui
Last synced: 5 days ago
JSON representation
高颜值组件库，简单易用，同时支持原生和wepy框架
- Host: GitHub
- URL: https://github.com/Chaunjie/kai-ui
- Owner: Chaunjie
- Created: 2018-07-19T01:46:26.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-11-23T01:46:59.000Z (almost 6 years ago)
- Last Synced: 2024-10-28T08:30:29.282Z (17 days ago)
- Language: JavaScript
- Homepage: https://chaunjie.github.io/kui/dist
- Size: 560 KB
- Stars: 214
- Watchers: 16
- Forks: 31
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-wepy - kai-ui：基于WePY框架的高颜值、高效率组件库
README
## 快速上手
### 使用之前
使用 kai-ui 前，务必要先阅读[wepy自定义组件开发](https://tencent.github.io/wepy/)。
#### 预览小程序
### 如何使用
#### 安装
##### 方式一. 通过 npm 安装 (推荐)
```bash
# npm
npm i kai-ui -S --production
```
##### 方式二. 下载代码
直接下载[GitHub](https://github.com/Chaunjie/kai-ui)或者通过 `git` 命令下载并把minparogram文件夹拷贝到自己项目中
```bash
git clone https://github.com/Chaunjie/kai-ui.git
```
### 使用组件
以按钮组件为例，只需要在 json 文件中引入按钮对应的自定义组件即可
```javascript
import Panel from 'kai-ui/Panel'
components = {
'k-panel': Panel
}
```
接着就可以在 wxml 中直接使用组件
```html
使用kai-ui组件库开始
```
### 在开发者工具中预览
```bash
# 拉取代码
git clone https://github.com/Chaunjie/kai-ui.git
# 安装项目依赖
npm install
# 执行组件编译
npm run dev
```
打开开发者工具，把`dist`目录添加进去就可以预览示例了。
### 贡献者
感谢下面这些小朋友的贡献
[stardew](https://github.com/stardew516) [wppeng](https://github.com/wppeng)
### 组件列表
- [x] cell 列表
- [x] button 按钮
- [x] icon 图标
- [x] popup 弹出层
- [x] tag 标记
- [x] tab 标签
- [x] select 选择
- [x] toptips 顶部提示
- [x] toast 轻提示组件
- [x] numberpicker 数字输入框
- [x] switch 开关
- [x] actionsheet 操作盘
- [x] dialog 对话框
- [x] uploader 上传
- [x] grid 宫格
- [x] loadmore 更多
- [x] loading 加载中
- [x] panel 面板
- [x] layout 布局
- [x] checkbox 复选框
- [x] radio 单选框
- [x] noticebar 通知栏
- [x] searchbar 搜索框
- [x] input 输入框
- [x] step 步骤条
- [x] slider 滑块
- [x] rate 星级评分
- [x] folder 折叠面板
- [ ] calander 日期选择
- [x] swipeout 滑动菜单
- [ ] scrollviewrefresh 下拉刷新