Easy-ui
Easy-ui 是一个轻量级的 UI 框架,基于 Web Components 构建。文档地址
如果是看源码, 请移步到这里
1. 前言
前几个月看到很多大佬在介绍 WebComponent. 我毕竟还是小白, 看到新奇的就会想试试😂. 于是就有了这个组件库. 主要是之前没有规模性的封装过原生的组件, 手很痒
如果有人不幸看到, 还请指点一二~🤞🤞
2. 简介
该框架参考了Element-ui , 所以不能说是很像吧, 可以说是除了技术栈和核心代码, 其他的一模一样 😂(打算有时间把所有的都模仿一遍)。
因为 浏览器厂家逐步适配 + edge转用WebComponent来开发界面. 相对而言, 至少在部分场景下, 还是可以用来开发. 特别是用来应付学业, 只要在我电脑跑得起来就是好代码😋
WebComponent的好处就是一次编写, 到处运行在现在的主流框架中也可以使用. 不过同样的, 这样做也会影响框架原本的性能.
3. 组件概述
因为没有实习和工作经历, 一些组件没想到有什么场景会用到, 另一些是不知道什么功能比较需要, 所以总体功能不算很丰富.
-
基础组件
- Container 布局容器
- Container 外层容器
- Header 顶栏容器
- Main 主体容器
- Footer 底栏容器
- Aside 侧边栏容器
- Icon 图标
- Button 按钮
- ButtonGroup 按钮组
- Link 文字链接
- Container 布局容器
-
表单组件
- Radio 单选框
- RadioGroup 单选框组
- Checkbox 多选框
- CheckboxGroup 多选框组
- Input 输入框
- Select 选择器
- Option
- OptionGroup
- Textarea 文本域
- InputNumber 计数器
- Switch 开关
- Rate 评分
- TimePicker 时间选择器
- DatePicker 日期选择器
- Form 表单
- FormItem
- Radio 单选框
-
Data
- Tag 标签
- Progress 进度条
- Pagination 分页
- Badge 标记
- Avatar 头像
- Skeleton 骨架屏
- SkeletonItem
- Empty 空状态
- Descriptions 描述列表
- DescriptionsItem
- Result 结果
- Table 表格
-
Notice
- Alert 警告
- Loading 加载
- Message 消息提示
- MessageBox 弹框
-
Others
- Card 卡片
- Carousel 走马灯
- CarouselItem
- TimeLine 时间线
- Backtop 回到顶部
- Collapse 折叠面板
- CollapseItem
- Calendar 日历
- Image 图片
- InfiniteScroll 无限滚动
- InfiniteScrollItem
-
Navigation
- NavMenu 导航菜单
- NavMenuItem
- NavMenuItemGroup
- NavSubMenu
- Tabs 标签页
- Pane
- Tab
- Breadcrumb 面包屑
- BreadcrumbItem
- PageHeader 页头
- Steps 步骤条
- StepItem
- Drawer 抽屉
- NavMenu 导航菜单