Wheel UI ,一个基于 Vue 3 开发的组件库

587 阅读2分钟

Wheel UI 是一个基于 Vue3 开发的桌面端组件库。

screely-1645187167156.png

官网做了响应式

screely-1643120354089.png

screely-1643120366912.png


官网:romank.gitee.io/wheel-ui
npm地址:www.npmjs.com/package/gul…

项目特点

  1. 使用 Vue 3 的 Composition API
  2. 提供完善的文档和组件示例
  3. 组件设计简洁直观,提供友好的 API,可灵活的使用组件

最新版本

浏览器支持

与 Vue 3 一致,不再支持IE浏览器

谷歌图标火狐图标Edge图标Safari图标
Chrome ≥ 64Firefox ≥ 78Edge ≥ 79Safari ≥ 12

有哪些轮子

目前的组件列表 ( 46个 )

Basic 基础组件

  1. Icon 图标
  2. Button 按钮
  3. Layout 布局
  4. Grid 栅格

Form 表单组件

  1. Radio 单选按钮
  2. Checkbox 多选框
  3. Switch 开关
  4. Input 输入框
  5. InputNumber 计数器
  6. Rate 评分
  7. Slider 滑块
  8. Select 下拉选择
  9. TimeSelect 时间选择

Data 数据展示

  1. Avatar 头像
  2. Badge 标记
  3. Carousel 轮播图
  4. Card 卡片
  5. Collapse 折叠面板
  6. Tag 标签
  7. Timeline 时间线
  8. Progress 进度条
  9. Image 图片
  10. InfiniteScroll 无限滚动
  11. Empty 空状态
  12. Result 结果
  13. Descriptions 描述列表
  14. Pagination 分页
  15. Statistic 数值显示

Navigation 导航

  1. Affix 图钉
  2. Dropdown 下拉菜单
  3. Breadcrumb 面包屑
  4. PageHeader 页头
  5. Tabs 标签页
  6. Steps 步骤条
  7. Skeleton 骨架屏

Feedback 反馈组件

  1. Alert 警告
  2. Dialog 抽屉
  3. Drawer 弹窗
  4. Tooltip 文字提示
  5. Loading 加载
  6. Message 消息提示

Others 其他

  1. BackTop 返回顶部
  2. Divider 分割线
  3. GitHubCorner 角标
  4. Transition 过渡动画
  5. Split 面板分割

注意:这些是目前已完成的组件,如有其他组件,后续会补充。

视觉稿

本 UI 框架借鉴了一些成熟的 UI 框架(如 iView、Element UI 和 Ant Design)的外观。

结语

Wheel UI 尚未完工,组件和文档都在不断的完善中,个别组件可能会存在一些问题或体验不友好,请不要在生产环境中使用本 UI 框架

为什要选择造组件库呢?对我来说是一个机遇与挑战,其实更多的是抽离业务组件,实现复用,提高以及总结自己的前端技术

但是往往现实是残酷的,一个优秀的组件库是非常庞大具有难度的,过程中会出现各种难以琢磨的问题,但我会尽自己努力,一步一个脚印,尽可能把本组件库给完善好

如使用本组件库遇到疑问或者发现 Bug,可以通过 Gitee Issue 进行反映。

PS:走过路过,点个赞 评个论,感谢您还花宝贵的时间来看我的作品 🙂