Cain UI - 面向未来的原生 web components UI组件库
- 💪 通用的Web Components API
- 🔥 TypeScript编写
- 😍 适用于Vue、React、Angular 等任何框架
- 💎 基于Element-Plus(2.1.9)设计
# Using npm
npm i @cain-group/cain-ui
# Using yarn
yarn add @cain-group/cain-ui
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@cain-group/cain-ui/dist/cain-ui/cain-ui.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@cain-group/cain-ui/dist/cain-ui/cain-ui.esm.js"></script>
</head>
<body>
<ca-button type="primary">Future</ca-button>
</body>
</html>完整Demo 可前往这里查看
- 引入Css内容
import '@cain-group/cain-ui/dist/cain-ui/cain-ui.css';- 安装 React依赖
# Using npm
npm i @cain-group/cain-ui-react
# Using yarn
yarn add @cain-group/cain-ui-react- 使用
import { CaButton } from '@cain-group/cain-ui-react';完整Demo 可前往这里查看
- 引入Css内容
import '@cain-group/cain-ui/dist/cain-ui/cain-ui.css';- 安装 Angular依赖
# Using npm
npm i @cain-group/cain-ui-angular
# Using yarn
yarn add @cain-group/cain-ui-angular- 使用
import { CainUIModule } from '@cain-group/cain-ui-angular/dist';
...
imports: [
CainUIModule
],
...完整Demo 可前往这里查看
- 引入Css内容
import '@cain-group/cain-ui/dist/cain-ui/cain-ui.css';- 引入
main.js
import '@cain-group/cain-ui/dist/cain-ui/cain-ui.css';
import { applyPolyfills, defineCustomElements } from '@cain-group/cain-ui/loader';
applyPolyfills().then(() => {
defineCustomElements();
});
- 使用
<ca-button type="success">This is Future</ca-button>完整Demo 可前往这里查看
待实现
- ✔ 完成
- ❌ 暂不实现
- ⏳ 实现中
- 💤 等待实现中
- Button 按钮 ✔
- Border 边框 ❌
- Color 颜色 ✔
- Container 布局容器 ✔
- Icon 图标 ❌
- Layout 布局 ✔
- Link 链接 ✔
- Scrollbar 滚动条 ❌
- Space 间距 💤
- Typography 排版 💤
- Config Provider 全局配置 💤
- Cascader 级联选择器 💤
- Checkbox 多选框 💤
- Color Picker 取色器 💤
- Date Picker 日期选择器 💤
- DateTime Picker 日期时间选择器 💤
- Form 表单 💤
- Input 输入框 💤
- Input Number 数字输入框 💤
- Radio 单选框 💤
- Rate 评分 💤
- Select 选择器 💤
- Virtualized Select 虚拟化选择器 💤
- Slider 滑块 💤
- Switch 开关 💤
- Time Picker 时间选择器 💤
- Time Select 时间选择 💤
- Transfer 穿梭框 💤
- Upload 上传 💤
- Avatar 头像 💤
- Badge 徽章 💤
- Calendar 日历 💤
- Card 卡片 💤
- Carousel 走马灯 💤
- Collapse 折叠面板 💤
- Descriptions 描述列表 💤
- Empty 空状态 💤
- Image 图片 💤
- Infinite Scroll 无限滚动 💤
- Pagination 分页 💤
- Progress 进度条 💤
- Result 结果 💤
- Skeleton 骨架屏 💤
- Table 表格 💤
- Timeline 时间线 💤
- Tag 标签 💤
- Tree 树形控件 💤
- TreeSelect 树选择 💤
- Tree V2 虚拟化树形控件 💤
- Affix 固钉 💤
- Backtop 回到顶部 💤
- Dropdown 下拉菜单 💤
- Menu 菜单 💤
- Page Header 页头 💤
- Steps 步骤条 💤
- Tabs 标签页 💤
- Alert 提示 💤
- Dialog 对话框 💤
- Drawer 抽屉 💤
- Loading 加载 💤
- Message 消息提示 💤
- Message Box 消息弹出框 💤
- Notification 通知 💤
- Pop Confirm 弹出确认框 💤
- Popover 弹出框 💤
- Tooltip 文字提示 💤
- Divider 分割线 💤