https://github.com/cain-group/cain-ui
面向未来的原生 web components UI组件库 基于Element-Plus设计
https://github.com/cain-group/cain-ui
angular cain-ui custom-element element-ui html5 javascript react shadow-dom stencil stenciljs ui vue web-component web-components webcomponent webcomponents
Last synced: 4 months ago
JSON representation
面向未来的原生 web components UI组件库 基于Element-Plus设计
- Host: GitHub
- URL: https://github.com/cain-group/cain-ui
- Owner: cain-group
- License: mit
- Created: 2022-04-09T09:41:15.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-05-09T08:47:36.000Z (about 4 years ago)
- Last Synced: 2025-10-18T06:55:51.810Z (8 months ago)
- Topics: angular, cain-ui, custom-element, element-ui, html5, javascript, react, shadow-dom, stencil, stenciljs, ui, vue, web-component, web-components, webcomponent, webcomponents
- Language: SCSS
- Homepage: https://cain-group.github.io/cain-ui/
- Size: 4.18 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Cain UI - 面向未来的原生 web components UI组件库
- 💪 通用的Web Components API
- 🔥 TypeScript编写
- 😍 适用于Vue、React、Angular 等任何框架
- 💎 基于Element-Plus(2.1.9)设计
# 安装
```bash
# Using npm
npm i @cain-group/cain-ui
# Using yarn
yarn add @cain-group/cain-ui
```
# 使用
## HTML 环境
```html
Future
```
完整Demo 可前往[这里查看](./examples/html/)
## React 环境
1. 引入Css内容
```tsx
import '@cain-group/cain-ui/dist/cain-ui/cain-ui.css';
```
2. 安装 React依赖
```bash
# Using npm
npm i @cain-group/cain-ui-react
# Using yarn
yarn add @cain-group/cain-ui-react
```
3. 使用
```tsx
import { CaButton } from '@cain-group/cain-ui-react';
```
完整Demo 可前往[这里查看](./examples/react/)
## Angular 环境
1. 引入Css内容
```tsx
import '@cain-group/cain-ui/dist/cain-ui/cain-ui.css';
```
2. 安装 Angular依赖
```bash
# Using npm
npm i @cain-group/cain-ui-angular
# Using yarn
yarn add @cain-group/cain-ui-angular
```
3. 使用
```tsx
import { CainUIModule } from '@cain-group/cain-ui-angular/dist';
...
imports: [
CainUIModule
],
...
```
完整Demo 可前往[这里查看](./examples/angular/)
## Vue2 + Js 环境
1. 引入Css内容
```tsx
import '@cain-group/cain-ui/dist/cain-ui/cain-ui.css';
```
2. 引入
main.js
```js
import '@cain-group/cain-ui/dist/cain-ui/cain-ui.css';
import { applyPolyfills, defineCustomElements } from '@cain-group/cain-ui/loader';
applyPolyfills().then(() => {
defineCustomElements();
});
```
3. 使用
```tsx
This is Future
```
完整Demo 可前往[这里查看](./examples/vue-js/)
## Vue3 + Ts 环境
待实现
# TODO
## 状态说明
- ✔ 完成
- ❌ 暂不实现
- ⏳ 实现中
- 💤 等待实现中
## Basic 基础组件
- Button 按钮 ✔
- Border 边框 ❌
- Color 颜色 ✔
- Container 布局容器 ✔
- Icon 图标 ❌
- Layout 布局 ✔
- Link 链接 ✔
- Scrollbar 滚动条 ❌
- Space 间距 💤
- Typography 排版 💤
## 配置组件
- Config Provider 全局配置 💤
## Form 表单组件
- 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 上传 💤
## Data 数据展示
- Avatar 头像 💤
- Badge 徽章 💤
- Calendar 日历 💤
- Card 卡片 💤
- Carousel 走马灯 💤
- Collapse 折叠面板 💤
- Descriptions 描述列表 💤
- Empty 空状态 💤
- Image 图片 💤
- Infinite Scroll 无限滚动 💤
- Pagination 分页 💤
- Progress 进度条 💤
- Result 结果 💤
- Skeleton 骨架屏 💤
- Table 表格 💤
- Timeline 时间线 💤
- Tag 标签 💤
- Tree 树形控件 💤
- TreeSelect 树选择 💤
- Tree V2 虚拟化树形控件 💤
## Navigation 导航
- Affix 固钉 💤
- Backtop 回到顶部 💤
- Dropdown 下拉菜单 💤
- Menu 菜单 💤
- Page Header 页头 💤
- Steps 步骤条 💤
- Tabs 标签页 💤
## Feedback 反馈组件
- Alert 提示 💤
- Dialog 对话框 💤
- Drawer 抽屉 💤
- Loading 加载 💤
- Message 消息提示 💤
- Message Box 消息弹出框 💤
- Notification 通知 💤
- Pop Confirm 弹出确认框 💤
- Popover 弹出框 💤
- Tooltip 文字提示 💤
## Others 其他
- Divider 分割线 💤