easy-component-ui

Easy Component UI

Easy Component UI（简称 ea-ui）是一套使用原生 Web Components 规范开发的跨框架 UI 组件库。该框架参考了Element-ui，所以不能说是很像吧，但可以说是一模一样 😂(打算有时间把所有的都模仿一遍)。查看文档

GitHub 项目地址 | 在线文档 | NPM 包

安装

# npm
npm install easy-component-ui

# yarn
yarn add easy-component-ui

# pnpm
pnpm add easy-component-ui

快速开始

完整引入

import "easy-component-ui";

按需引入

import "easy-component-ui/ea-button";
import "easy-component-ui/ea-input";

在 HTML 中使用

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>Easy UI Demo</title>
    <script type="module">
      import "easy-component-ui/ea-button";
    </script>
  </head>
  <body>
    <ea-button type="primary">主要按钮</ea-button>
  </body>
</html>

组件列表

Basic 基础组件

• Button 按钮
• Container 布局容器
• Icon 图标
• Layout 布局
• Link 链接
• Text 文本
• Scrollbar 滚动条
• Space 间距
• Splitter 分隔面板

Form 表单组件

• Checkbox 多选框
• Input 输入框
• Input Number 数字输入框
• Radio 单选框
• Rate 评分
• Switch 开关
• Select 选择器
• Slider 滑块
• Form 表单组件
• Date Picker 日期选择器
• Time Picker 时间选择器
• Color Picker 颜色选择器

Data 数据展示

• Avatar 头像
• Badge 徽章
• Calendar 日历
• Card 卡片
• Carousel 走马灯
• Collapse 折叠面板
• Descriptions 描述列表
• Empty 空状态
• Image 图片
• Infinite Scroll 无限滚动
• Pagination 分页
• Progress 进度条
• Result 结果
• Skeleton 骨架屏
• Statistic 统计组件
• Segmented 分段控制器
• Tag 标签
• Timeline 时间线
• Tour 漫游式引导
• Table 表格
• Tree 树形控件

Navigation 导航

• Backtop 回到顶部
• Breadcrumb 面包屑
• Dropdown 下拉菜单
• Menu 菜单
• Page Header 页头
• Steps 步骤条
• Tabs 标签页

Feedback 反馈组件

• Alert 提示
• Dialog 对话框
• Drawer 抽屉
• Loading 加载
• Message 消息提示
• Message Box 消息弹出框
• Notification 通知
• Popconfirm 气泡确认框
• Popover 弹出框
• Tooltip 文字提示

开发

# 克隆项目
git clone https://github.com/LuminaQAQ/ea-ui-component.git

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建文档
npm run build:doc

# 预览文档
npm run preview:doc

贡献

欢迎提交 Issue 和 Pull Request！

许可证

MIT License © 2024 LuminaQAQ