焕然一新!TinyVue 组件库 UI 大升级,更符合现代的审美!

news/2024/11/14 11:36:20/文章来源:https://www.cnblogs.com/kagol/p/18536386

你好,我是 Kagol,个人公众号:前端开源星球

自从 TinyVue 组件库去年开源以来,一直有小伙伴反馈我们的 UI 不够美观,风格陈旧,不太满足现阶段审美。

“TinyVue 给我的感觉就是一个没啥审美能力、但是很努力的老程序员开发的”

看到这个评价,我是哭笑不得,一方面对小伙伴们真诚、友好的反馈充满感激,另一方面也为我们没有做好 UI 感到惭愧。

于是我们和设计师同事携手一起,对 TinyVue 组件做了全面的 UI 升级,适配了一套更符合现代审美的设计规范:OpenTiny Design,这套全新的设计规范,是我们的设计师同事结合华为云的业务特点和最新的设计趋势打磨出来的,目前 TinyVue 所有组件均已支持 OpenTiny Design 设计规范。

当然这套设计规范也不是静止不变的,后续还是会不断迭代和优化,也欢迎广大的开发和设计师朋友给我们提出宝贵的意见。

访问 TinyVue 组件库官网即可进行体验:

https://opentiny.design/tiny-vue

整体组件效果

整体视觉风格以黑蓝为主,稳重又现代,并且更加圆润,看着非常舒服。

新旧效果对比

我们再来看下新旧效果对比。

按钮、表单类组件

除了颜色上的变化,按钮的变化比较明显,变成了全圆角,其他组件也更加圆润。

复选框按钮组件变化比较大,在右上角增加了对勾效果,勾选效果更明显,不容易和按钮混淆。

数字输入框组件的优化效果也很明显,原先细长细长的,感觉不太协调,优化之后更符合现代风格。

输入、下拉类组件

所有的输入框类的组件边框颜色都比之前淡一些,不会太突兀,并且也更圆润。

日期选择框是一个很复杂的组件,我们花了很多精力进行优化,很多都是细节上的打磨,虽然每个细节的优化都不起眼,但是所有细节优化合起来,整体给人的感觉就有很大的不同,大家可以体验下日期选择框这个组件。

https://opentiny.design/tiny-vue/zh-CN/os-theme/components/date-picker

弹窗组件

弹窗组件主要是整体宽度、圆角、阴影的调整,看起来调整的东西不多,但每一处调整都起了画龙点睛的效果。

警告组件

警告组件比较明显的变化是颜色和图标,颜色的层次更加分明,图标的表意也更加准确,比如警告图标,之前是圆形的,现在改成三角形,就更加符合大家的共识。

表格组件

表格组件看起来变化不大,但细看也有很多优化,比如整体线条颜色更浅,更能突出单元格中的核心内容,表头颜色和高度也有一定的调整。

其他组件

滑块组件的优化也非常明显,之前的滑块手柄给人一种很古老的感觉,难怪大家都说风格陈旧,现在改成圆形效果好多了,看起来就像是现代的风格。

大家觉得这次 TinyVue 的视觉升级效果怎么样呢?欢迎在评论区留言。

联系我们

GitHub:https://github.com/opentiny/tiny-vue(欢迎 Star ⭐)

官网:https://opentiny.design/tiny-vue

B站:https://space.bilibili.com/15284299

个人博客:https://kagol.github.io/blogs

小助手微信:opentiny-official

公众号:OpenTiny

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/829193.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IDEA2023应用第一部分 环境配置(摘自CSDN 作者:生活需要淡定)

第一部分 环境配置 1.1 语言设置 1.打开IntelliJ IDEA,‌进入菜单栏的File -> Settings。‌ 2.在弹出的设置窗口中,‌点击Plugins,‌然后在搜索框输入Chinese。‌ 3.找到Chinese (Simplified) Language插件,‌点击Install进行安装。‌ 4.安装完成后,‌重启IntelliJ IDE…

QT:控制台数据新增、删除、查询、更新

基于控制台的程序,使用SQLite数据库完成大批量数据的增加、删除、更新和查询操作并输出。效果图: CH1301.pro 详细代码QT -= gui QT += sqlCONFIG += c++11 console CONFIG -= app_bundle# The following define makes your compiler emit warnings if you use # any Qt feat…

【人脸伪造检测】Spatial-Phase Shallow Learning: Rethinking Face Forgery Detection in Frequency Domain

一、研究动机[!note]创新点:利用相位谱实现伪造检测,并且证明了卷积模型可以提取隐性特征。由于上采样是伪造模型的关键步骤,这篇论文通过相位信息检测上采样的伪影。对比之前的频率模型: F3-Net:通过离散余弦变换后的统计特征实现伪造检测二、检测模型可学习的知识点[!ti…

CF413

前言 我是小惰惰,所以我只写一套题,去seesee大家的题解 CF413A 扫一遍 如果他的最大值>max||最小值<min 不行 如果他不等于 max min 的数 >n-m 不行 CF314B 直接记录每个聊天室法了多少条消息,然后计算每个人的时候减去他法的就行了 CF314C 反正都是全部翻倍,所以…

全面开启双拼

简单说说各种设备怎么开启双拼简单说说各种设备怎么开启双拼 ‍‍ iOS 其实添加双拼键盘,和添加五笔键盘差不多,具体可以看《启用 iPhone 原生的五笔输入》,这里就不赘述了 你也可以安装流行输入法,然后切换为双拼。 ‍ Android 貌似没有原生的双拼,可以安装下主流的输入法…

终于搞全了:GPIO/ADC/LED/I2C/SPI/USB…

合宙低功耗4G模组经典型号Air780E,支持两种软件开发方式: 一种是传统的AT指令;一种是基于模组做Open开发。 传统AT指令的开发方式,合宙模组与行业内其它模组品牌在软件上区别不大,在硬件功耗上更有优势; 模组Open开发,合宙采用的是LuatOS方式,相对C-SDK入门更简单,开发…

20-数据库系统安全

20.1 概况 1)概念 数据库安全是指数据库的机密性、完整性、可用性能够得到保障,其主要涉及数据库管理安全、数据安全、数据库应用安全以及数据库运行安全。 2)威胁授权的误用 逻辑推断和汇聚:利用逻辑推理,把不太敏感的数据结合起来可以推断出敏感信息。进行逻辑推断也可能…

来了,超全MQTT实用示例

Air201快速入门之MQTT示例合宙Air201资产定位模组——是一个集成超低功耗4G通信、语音通话、超低功耗定位、计步、震动、Type-C、充电、放音、录音等功能的超小PCBA。 内部集成高效、简单、可靠的LuatOS语言,旨在帮助客户降低开发难度,降低研发成本,以及打造超小超低功耗的精…

Air780E软件指南:zlib解压示例

一、ZLIB解压工具简介Zlib解压工具是一个广泛使用的压缩和解压缩库,主要用于处理数据的压缩和解压缩任务。Zlib使用的是DEFLATE算法,这是一种通用的压缩算法。它被应用在很多场景中,比如压缩文件、网络传输中的数据压缩、以及各种应用程序中的数据存储和读取。 Zlib的代码库…

简单但实用,RTC时钟使用指南

合宙Air201快速入门-RTC实时时钟使用示例- 本教程教你通过使用脚本代码,实现Air201内置RTC实时时钟同步时间、获取时间、设置时间等功能,可根据实际需求灵活应用。 我们先了解一些相关基础知识: RTC——Real-Time Clock实时时钟,通常称为时钟芯片,可以提供精确的实时时间,…

Nexpose 6.6.278 发布下载,新增功能概览

Nexpose 6.6.278 for Linux & Windows - 漏洞扫描Nexpose 6.6.278 for Linux & Windows - 漏洞扫描 Rapid7 Vulnerability Management, released Nov 07, 2024 请访问原文链接:https://sysin.org/blog/nexpose-6/ 查看最新版。原创作品,转载请保留出处。 作者主页:s…

BuildCTF-sorin-wp(part)

BuildCTF部分题目wp队员:sorinEZ_ZIP010查找分析发现压缩包,使用foremost分离疑似套娃压缩包,使用开源软件extractnow或者脚本都可以批量压缩,这里使用extractnow得到flagHEX的秘密16进制每两位截取一次转10进制,对比Build的前几个字符的ascll码发现多了128,脚本如下:de…