TinyVue 组件库官网焕然一新!

本文由体验技术团队Kagol原创~

之前有一些朋友吐槽我们 TinyVue 组件库的 UI 不够美观,于是我们请了设计师小姐姐给我们的组件和网站进行优化,经过设计师小姐姐和我们的开发兄弟们一个多月的努力,终于完成网站第一版的优化。

优化点

主要优化点:

  • 选项式和组合式写法、单示例和多示例这两个切换入口移到右下角,和主题切换放在一起,让页面整体上更加清爽
  • 组件示例和 API 通过页签分开,双排 Demo 改成单排居中,避免左右来回寻找 Demo 不聚焦,以及错乱感
  • 每个组件 Demo 最后增加贡献者区块(欢迎参与过 TinyVue 贡献的朋友们进行补充)
  • API 表格中组件 props 的自定义类型通过展开行方式呈现,避免来回跳转

以及大量细节优化点:

  • 优化左上角组件搜索输入框的样式,增加边框
  • 优化组件总览的图标样式,移除六边形外框
  • 左侧组件分类增加小图标
  • 优化右侧组件 Demo 锚点样式,使用小圆点风格
  • ...

一起来看看效果吧。

效果页面

组件概览页:

组件 Demo 页:

组件 API 表格:

不管是组件还是文档,我们都在持续进行优化,希望能给开发者带来更好的使用体验。

欢迎朋友们体验和反馈~

关于OpenTiny

OpenTiny 是一套企业级 Web 前端开发解决方案,提供跨端、跨框架、跨版本的 TinyVue 组件库,包含基于 Angular+TypeScript 的 TinyNG 组件库,拥有灵活扩展的低代码引擎 TinyEngine,具备主题配置系统TinyTheme / 中后台模板 TinyPro/ TinyCLI 命令行等丰富的效率提升工具,可帮助开发者高效开发 Web 应用。

欢迎加入 OpenTiny 开源社区。添加微信小助手:opentiny-official 一起参与交流前端技术~
OpenTiny 官网opentiny.design/
OpenTiny 代码仓库github.com/opentiny/
TinyVue 源码github.com/opentiny/ti...
TinyEngine 源码: github.com/opentiny/ti...

欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~ 如果你也想要共建,可以进入代码仓库,找到 good first issue标签,一起参与开源贡献~

相关推荐
小小小小宇2 分钟前
设计稿转代码:如何将生成代码与内部组件库关联
前端
七牛云行业应用2 分钟前
别每个 AI 工具单独配了!MCP 一次搭建,Claude、Cursor、TRAE 全能用
前端
_xaboy2 分钟前
FormCreate 设计器 v6.3 正式发布:AI 表单助理3.0登场!
前端·vue.js·低代码·开源·表单设计器
胡志辉4 分钟前
邮件中点击“加载图片”,你的IP地址已经被泄漏
前端·后端·安全
openKaka_15 分钟前
reconcileChildren 深入:React 如何根据 ReactElement 构建子 Fiber
前端·javascript·react.js
三翼鸟数字化技术团队31 分钟前
事件循环原来这么简单!
前端
gf132111132 分钟前
python_【更新已发送的消息卡片】
java·前端·python
一点一木42 分钟前
2026 终端 AI 编码 Agent 六大工具深度横评
前端·人工智能·claude
Highcharts.js1 小时前
Highcharts React v5升级三问|最大的升级方向是什么?需要注意什么?有什么优化?
前端·javascript·react.js·前端框架·highcharts·大数据渲染·前端性能
马玉霞1 小时前
vue web端页面组件展示
前端·vue.js