easy-component-ui

v3.0.5

Published

4 days ago

使用 WebComponent 编写的原生组件库

Easy Component UI

npm npm

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 基础组件

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

Form 表单组件

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

Data 数据展示

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

Navigation 导航

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

Feedback 反馈组件

[x] Alert 提示
[x] Dialog 对话框
[x] Drawer 抽屉
[x] Loading 加载
[x] Message 消息提示
[x] Message Box 消息弹出框
[x] Notification 通知
[x] Popconfirm 气泡确认框
[x] Popover 弹出框
[x] 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！

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Easy Component UI

安装

快速开始

完整引入

按需引入

在 HTML 中使用

组件列表

Basic 基础组件

Form 表单组件

Data 数据展示

Navigation 导航

Feedback 反馈组件

开发

贡献

许可证