N 年沉淀,腾讯这套系统终于开源!

大家好,我是鱼皮,前段时间给大家介绍了字节跳动开源的两套设计系统,分别是 Arco Design 和抖音 Semi Design。

而就在几天前,腾讯终于也开源了自家的设计系统 TDesgin !这次,终于能介绍自己公司的项目了。

ecfe9f669124faca55ea5bab723f11c9.png

如官方描述,TDesign 是一套拥有完整的 设计价值观视觉风格指南 的企业级设计体系,并且在此基础上,提供了基于 Vue、React、小程序等业界主流技术栈的组件库解决方案,主要用于构建设计统一、多端覆盖、跨技术栈的企业级前端应用。

GitHub:https://github.com/Tencent/tdesign

68e8acba2ec07e14eb8ace9eed7b9f89.png
TDesign 官网

听上去非常高大上,但其实用人话来描述就是:定了一套设计风格(字体大小、颜色、动效等),并提供了不同框架(Vue、React)、各终端(PC、移动端、小程序)的 组件库 ,可以帮助开发者轻松完成风格一致的前端项目,尤其适合开发中后台系统。

a59ac0fbca8634f9437c9090b8dc7ab2.png

如果你是一名前端开发者,进入 TDesign 官方文档,按照快速开始引入 TDesign 就能直接使用组件库了:

63f5da8f4cc2482d8de4b192c41d2c2a.png

每个组件除了示例代码、效果演示和 API 介绍外,还包含使用指南,帮助你正确高效地使用组件:

65bc2a4e8da1b41737060c0d067a79f5.png

此外,TDesign 还提供了开箱即用的脚手架 TDesign Starter,只需输入几行命令,就能快速搭建出一个多端适配的中后台管理系统,效果如下图:

32ace7623e0b784c2ee34f55ef3ad870.png

如果你之前使用过蚂蚁金服的 Ant Design 的话,会发现其实 TDesign 与它的模式几乎是一致的,毕竟 Ant Design 做的真心不错,有很多值得参考的地方。

但 TDesign 的诞生可不是照搬 Ant Design 那么简单。它是由整个腾讯各大 BG 的同学内部共建而成,整合了过去腾讯各种设计体系和组件库的优点,经过了 5000 多次代码提交,才终于推出了一套有腾讯产品风格的设计体系。比如下图的 Tencent Blue 蓝色调,相信你在腾讯的很多产品(腾讯官网、腾讯文档、腾讯会议等)都见到过:

f185ac6ca758248b1d300407af2679cb.png

总之,对开发者来说,多一个组件库的选择不是坏事;而多一个大厂的开源项目,也就给我们多了一份学习的空间。

期待 TDesign 的后续发展,也希望更多的大厂团队和开发者能拥抱开源,让国内的技术生态越来越好。

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

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

相关文章

在php中使用sockets:从新闻组中获取文章

PHP能打开远程或本地主机上的Socket端口。本文是一个使用Socket的小例子:连 接到一个Usenet新闻组服务器,同服务器对话,从新闻组中下载一些文章。在php中打开一个socket 使用fsockopen()打开一个socket.这个函数在php3和php4种都可以使用。函…

Android之Launcher分析和修改3——Launcher启动和初始化

前面两篇文章都是写有关Launcher配置文件的修改,代码方面涉及不多,今天开始进入Launcher代码分析。 我们开机启动Launcher,Launcher是由Activity Manager启动的,而Activity Manager是由system server启动。 原创博文&#xff0c…

史上最强物理科普!

全世界只有3.14 % 的人关注了爆炸吧知识一沙见世界 一花窥天堂手心握无限 须臾纳永恒杨振宁曾说读上面的四句诗可以感受到物理的美但物理的美不止于此物理还有一种庄严美一种神秘美一种初窥宇宙奥秘的畏惧美物理就是如此的迷人任何语言在它的面前都很贫瘠数学让人摆脱了愚昧而…

mysql 怎么实现随机查询并分页,不重复查询

2019独角兽企业重金招聘Python工程师标准>>> 需求: 企业应用中,一般数据量不是很特别多,同时大多在局域网内,性能不会有问题,一般不会分页处理,随机排序数据一般不会有问题 web网站中&#xf…

评分卡模型剖析之一(woe、IV、ROC、信息熵)

信用评分卡模型在国外是一种成熟的预测方法,尤其在信用风险评估以及金融风险控制领域更是得到了比较广泛的使用,其原理是将模型变量WOE编码方式离散化之后运用logistic回归模型进行的一种二分类变量的广义线性模型。 本文重点介绍模型变量WOE以及IV原理&…

主机远程唤醒配置

配置:win10戴尔主机F2进biosbios设置2.系统设置3.以太网设置4.电源管理设置以上设置完成后关机,就可以在远程电脑上打开WakeMeOnLan,然后添加或者搜索需要唤醒的电脑的ip,mac和主机名称,然后就可以唤醒远程主机了查看m…

Java字节序,java整型数与网络字节序 byte[] 数组转换关系

Java字节序 http://origin100.iteye.com/blog/267165 /*** 通信格式转换** Java和一些windows编程语言如c、c、delphi所写的网络程序进行通讯时,需要进行相应的转换* 高、低字节之间的转换* windows的字节序为低字节开头* linux,unix的字节序为高字节开头* java则无…

python dict.fromkeys()研究

def unique(seq): #return [x for x in my_list if x not in locals()[_[1]]] return {}.fromkeys(seq).keys() dict.fromkeys(seq,valNone) #创建并返回一个新字典,以序列seq中元素做字典的键,val为字典所有键对应的初始值(默认为None) 例子&#xff…

unix高级编程apue.h问题

2019独角兽企业重金招聘Python工程师标准>>> apue.h头文件为作者自己编写而非系统自带,故需要自行添加!第一:打开网站 http://www.apuebook.com/第二:选择合适的版本(一共有三个版本,根据书的版…

Vim文本编辑器 常用指令大全 提升编程效率必备法宝之一

经常处理文本以及经常需要写代码的人,都会有自己比较常用的编辑器,本人喜欢用Vim,理由就是Vim编辑器灵活,并且可以达到纯键盘操作,使用纯熟情况下,根本不需要鼠标操作,听起来是不是很酷的&#…

IT与业务之间的鸿沟根源

目前世界经济进入到数字经济时期,IT与业务的融合已经不是什么新鲜的话题,其实从计算机的诞生的那一天开始,IT与业务融合的问题就已经开始了。1、经常听到一种观点:IT与业务之间的鸿沟这归结于谁领导谁的问题。(1&#…

Java里面Unreachable code

今天写了一段Java代码,不小心出了“Unreachable code”错误,开始的时候MyEclipse一直提示我要我重命名一个对象,但我重命名了也不好用,最后才看到这个“Unreachable code”错误,在网上调查了一下,这个错误翻…

EIGRP stub SIA

转载于:https://blog.51cto.com/liushuo890/1202399

C++Vector使用方法

C内置的数组支持容器的机制&#xff0c;可是它不支持容器抽象的语义。要解决此问题我们自己实现这种类。在标准C中&#xff0c;用容器向量&#xff08;vector&#xff09;实现。容器向量也是一个类模板。标准库vector类型使用须要的头文件&#xff1a;#include <vector>。…

岛国人气美少女竟然每晚跟 3 个人通宵打麻将?

1 桥本怕不是四川人?▼2 借口总比困难多▼3 突然觉得自己是大厨▼4 连自己都不放过▼5 这就是纹身的烦恼▼6 这又是什么黑暗料理&#xff08;via.坏蛋王师傅&#xff09;▼7 哦吼&#xff0c;是在下输了▼7 哦吼&#xff0c;是在下输了▼你点的每个赞&#xff0c;我都认…

java获取ResultSet长度

2019独角兽企业重金招聘Python工程师标准>>> public class Test { public static void main(String[] args) throws SQLException { Connection conn WLMGlobal.connMgr_stat_instance().getConnection(); Statement stmt conn.createStatement(Result…

浅谈协同过滤推荐算法

在现今的推荐技术和算法中&#xff0c;最被大家广泛认可和采用的就是基于协同过滤的推荐方法。本文将带你深入了解协同过滤的秘密。 1 什么是协同过滤 协同过滤是利用集体智慧的一个典型方法。要理解什么是协同过滤 (Collaborative Filtering, 简称 CF)&#xff0c;首先想一个简…

C# wpf编程CM框架快速入门项目实例

01—事件连接这会自动将控件上的事件关联到ViewModel上的方法。常规约定&#xff1a;<Button x:Name"Save">这将导致按钮的单击事件调用ViewModel上的“Save”方法。简短语法&#xff1a;<Button cal:Message.Attach"Save">这将再次导致按钮的…

Android之两个应用之间的通信与调用

Android 里面的两个APK通信的方式有哪些&#xff1f; 自己网上查了查&#xff0c;总结了一下&#xff1a; 1. 广播&#xff0c;最简单的方法&#xff0c;这个实现起来比较简单 2. AIDL&#xff0c;功能强大&#xff0c;支持一对多并发通信&#xff0c;支持实时通信。 3. 网…