一、开源项目简介

Kingcloud Design设计系统

同时支持Intact/Vue/React框架的前端组件库。

全局提升团队协作，高效输出行业设计解决方案。

二、开源协议

使用MIT开源协议

三、界面展示

四、功能概述

特性

• 支持多框架 Intact / Vue / React
• 支持TypeScript
• 动态主题切换
• 声明式表单验证
• 完善的文档和精心的设计
• 90%单元测试覆盖率

组件

• Affix 图钉
• Badge 徽标
• Breadcrumb 面包屑
• Button 按钮
• Card 卡片
• Carousel 走马灯
• Cascader 级联选择
• Checkbox 复选框
• Code 代码编辑器
• Collapse 折叠面板
• Colorpicker 拾色器
• Datepicker 日期选择
• Diagram 绘图
• Dialog 弹窗
• Drawer 抽屉
• Dropdown 下拉菜单
• Editable 可编辑文本
• Form 表单
• Grid 栅格
• Icon 字体图标
• Input 输入框
• Layout 布局
• Menu 菜单
• Message 全局提示
• Pagination 分页
• Progress 进度条
• Radio 单选框
• Rate 评分
• ScrollSelect 滚动选择框
• Select 选择框
• Skeleton 骨架屏
• Slider 滑块
• Spin 加载中
• Spinner 数字输入框
• Split 分割面板
• Steps 步骤条
• Switch 开关
• Table 表格
• Tabs 选项卡
• Tag 标签
• Timeline 时间轴
• Timepicker 时间选择
• Tip 警告提示
• Tooltip 提示弹层
• Transfer 穿梭框
• Tree 树形控件
• TreeSelect 下拉树选择
• Upload 上传

浏览器支持

IE / Edge

Firefox

Chrome

Safari

Opera

IE10, IE11, Edge

last 2 versions

last 2 versions

last 2 versions

last 2 versions

五、技术选型

Vue

安装

# Vue3
npm install @king-design/vue --save

# Vue2
npm install @king-desing/vue-legacy --save

使用

<template>
    <Button>Hello</Button>
</template>
<script>
import {Button} from 'kpc-vue';

export default {
    components: {
        Button
    }
}
</script>

React

安装

npm install @king-design/react--save

使用

import {Button} from '@king-design/react';

function App() {
    return <Button>Hello</Button>
}

开发

需要node@10以及npm@6.9以上

访问一飞开源：https://code.exmay.com/ 下载
cd kpc
npm install
npm run dev:doc

# 测试
npm run test
# 更新测试快照
npm run snapshot
# 部署文档
npm run deploy:doc
# 发版
npm run release