开源 UI 组件库和开发工具库概览 | 开源专题 No.59

news2024/9/25 15:22:07

picture

ant-design/ant-design

Stars: 87.9k License: MIT

picture

Ant Design 是一个企业级 UI 设计语言和 React UI 库。

  • 为 Web 应用程序设计的企业级 UI。
  • 提供一套高质量的开箱即用的 React 组件。
  • 使用可预测静态类型编写 TypeScript 代码。
  • 包含完整的设计资源和开发工具包。
  • 支持数十种语言国际化支持
  • 基于 CSS-in-JS 实现强大主题定制功能。

microsoft/fluentui

Stars: 16.7k License: NOASSERTION

Fluent UI Web 是一个用于构建 Web 应用程序的实用工具、React 组件和 Web 组件集合。

主要特点:

  • 提供了一套全新、面向未来并富有前瞻性的 React 组件
  • 支持渐进式迁移至最新版 (FluentUI V9)
  • 包含对老版本 (如 V8) 已经广泛使用过程中积累下来的较为完善且稳定可靠等的功能

vuetifyjs/vuetify

Stars: 38.1k License: MIT

picture

Vuetify 是一个无需设计技能的 UI 库,具有精美手工制作的 Vue 组件。它具有以下核心优势和主要功能:

  • 可定制性:使用 SASS/SCSS 进行广泛自定义,并提供默认配置和蓝图。
  • 响应式布局:Vuetify 组件的默认配置是响应式的,可以适应不同屏幕尺寸。
  • 主题系统:强大的颜色系统使得轻松为您的应用程序设置一致且漂亮的风格。
  • Vite 支持:通过自动摇树算法实现更小体积打包
  • 长期支持 (18 个月) 重大版本更新
  • 国际化:支持 42+ 种语言

此外,该项目还提供了企业级支持、Discord 社区交流平台以及其他相关资源和软件包。

penpot/penpot

Stars: 23.8k License: MPL-2.0

picture

Penpot 是第一个面向跨领域团队的开源设计和原型平台。它不依赖于操作系统,基于 Web,并使用开放标准 (SVG)。

  • 为跨领域团队而生:专注于设计和代码团队,提供无需频繁交接工作的愉快体验。
  • 多平台支持:基于 Web,在任何现代浏览器中运行,不受操作系统或本地安装限制。
  • 开放标准:与大多数矢量工具兼容,并易用性极高。

shadcn-ui/ui

Stars: 27.1k License: MIT

picture

shadcn/ui 是一个使用 Radix UI 和 Tailwind CSS 构建的精美设计组件库。这个开源项目提供了一系列易于访问和可定制的组件,您可以直接复制并粘贴到自己的应用程序中使用。

以下是 shadcn/ui 的核心优势和关键特性:

  • 易于访问:所有组件都经过良好设计,以确保无障碍性,并为残疾人士提供友好体验。
  • 可定制化:每个组件都可以根据需求进行灵活调整和修改,使其适应不同风格或品牌要求。
  • 组件文档详尽:通过查看完善而清晰明了的文档,您将轻松掌握如何正确地使用这些功能强大又漂亮实用的 UI 部分。

tonsky/FiraCode

Stars: 72.7k License: OFL-1.1

Fira Code 是一种免费的等宽字体,具有编程连字符。

  • Fira Code 提供了丰富多样的箭头和标点符号调整功能。
  • Fira Code 支持各种不同的字符变体、风格集和其他字体特性,以满足用户个性化需求。
  • Fira Code 对 ASCII/框绘制、powerline 和其他形式的控制台 UI 具有出色支持。
  • 该项目适用于许多编辑器和终端应用程序。

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

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

相关文章

【Databend】行列转化:数据透视和逆透视

文章目录 数据准备数据透视数据逆透视总结 数据准备 学生学科得分等级测试数据如下: drop table if exists fact_suject_data; create table if not exists fact_suject_data (student_id int null comment 编号,subject_level varchar null comment …

web3d-three.js场景设计器-sprite广告牌

three.js使用Sprite精灵实现文字或者图片广告牌1.将文字绘制到Canvas,调整对应宽高。2.作为Cavans材质绑定到Sprite3.加载到场景调整适当的scale function createLabel({ text, fontSize, textColor, color, imageUrl }) { return new Promise((resolve, reject) &…

5.3 Verilog 带参数例化

5.3 Verilog 带参数例化 分类 Verilog 教程 关键词: defparam,参数,例化,ram 当一个模块被另一个模块引用例化时,高层模块可以对低层模块的参数值进行改写。这样就允许在编译时将不同的参数传递给多个相同名字的模块…

腾讯云免费服务器怎么申请?腾讯云免费服务器申请难吗?

腾讯云免费服务器申请入口 https://curl.qcloud.com/FJhqoVDP 免费服务器可选轻量应用服务器和云服务器CVM,轻量配置可选2核2G3M、2核8G7M和4核8G12M,CVM云服务器可选2核2G3M和2核4G3M配置,腾讯云服务器网txyfwq.com分享2024年最新腾讯云免费…

Python中使用execfile实现R中的source功能,避免重复加载包导入函数

R中避免重复 在R中要加载多个包,进行全局的配置,定义全局变量,我们可以下一个config.R文件,在分析的代码开头source一下这个config.R文件即可避免每次都要加载包的冗余代码 using是之前定义的一个函数,作用是一次性加…

如何异地链接Pycharm服务器进行远程开发并实现与公司服务器资源同步

文章目录 一、前期准备1. 检查IDE版本是否支持2. 服务器需要开通SSH服务 二、Pycharm本地链接服务器测试1. 配置服务器python解释器 三、使用内网穿透实现异地链接服务器开发1. 服务器安装Cpolar2. 创建远程连接公网地址 四、使用固定TCP地址远程开发 本文主要介绍如何使用Pych…

【数据结构之树和二叉树】

数据结构学习笔记---007 数据结构之树和二叉树概念篇1、树的概念和结构1.1、树的相关概念1.2、树的存储结构 2、二叉树概念及结构2.1、二叉树概念2.2、满二叉树2.3、完全二叉树2.4、满二叉树或完全二叉树的存储形式 3、堆的概念及结构3.1、堆的性质3.2、堆的意义 4、二叉树的存…

考研复试复习-数据库原理(2关系数据库)

一、关系数据模型 1、关系数据结构 (1) 域、笛卡尔积、关系 笛卡尔积实际上可以看成是n个行向量,即(域),所组成的一个乘法算式,每一个行向量是一个Di,所有行向量逻辑上组合在一起就是D,就是一…

fisco-bcos部署pro生产版本

我这里使用的 Ubuntu20.4系统,linux系统把操作命令apt改为yum即可 升级安装包 apt-get update 安装jdk,我这里使用jdk17 apt -y install openjdk-17-jdk-headless 查看java版本 java -version 安装依赖 apt-get install -y curl docker.io docker-com…

数据库-数据结构

数据库-数据结构 一、B-树、B树、B*树1 B-树2 B树3 B*树 一、B-树、B树、B*树 搜索树&#xff1a;左子节点<节点<右子节点。 B-树&#xff1a;多路搜索树。 B树&#xff1a;B-树的变体&#xff0c;更适用于文件系统&#xff0c;如mysql数据库。具体的&#xff0c;适合通…

SAP SQVI制作报表及SE93创建事务代码

在平时的项目中&#xff0c;财务想查询所有的凭证明细&#xff0c;SAP的查询凭证FB03不能满足需求&#xff0c;所以用SQVI制作一个简易的查询报表。 1、打开SQVI&#xff0c;填写自开发报表的名称“ZFB03”&#xff0c;点击“创建”&#xff0c;输入自开发报表的名称“凭证明细…

腾讯云免费服务器-多规格高配服务器0元试用,开箱即用

腾讯云免费服务器申请入口 https://curl.qcloud.com/FJhqoVDP 免费服务器可选轻量应用服务器和云服务器CVM&#xff0c;轻量配置可选2核2G3M、2核8G7M和4核8G12M&#xff0c;CVM云服务器可选2核2G3M和2核4G3M配置&#xff0c;腾讯云百科txybk.com分享2024年最新腾讯云免费服务器…

小程序开发哪家公司好呢?

现在的小程序开发公司还是很多的&#xff0c;不同的开发公司的开发情况会有所不同 智创有术 国内定制开发行业的佼佼者&#xff0c;曾服务过众多知名企业&#xff0c;包括沃尔玛、富士康、百度、美的等多家五百强企业。他们提供移动应用开发、Web开发、云计算和UI/UX设计等服…

2024年百元到千元价位开放式耳机推荐,性价比最高的开放式耳机

一、前言 近年来&#xff0c;开放式耳机在人们对音频体验的追求中逐渐受到重视&#xff0c;成为越来越多人的选择。然而&#xff0c;随着网络上关于开放式耳机的讨论不断增加&#xff0c;相关的争议和观点层出不穷。很多人可能心生疑虑&#xff1a;开放式耳机究竟是提升音质还…

2.右值引用和移动语义

文章目录 右值引用和移动语义&&的特性右值引用优化性能&#xff0c;避免深拷贝移动(move )语义forward 完美转发emplace_back 减少内存拷贝和移动unordered container 无序容器map和unordered_map的差别内部实现机理不同优缺点以及适用处 小结优缺点以及适用处 小结 代…

激光雷达产品调研

Lidar产品调研 Lidar原理介绍

探索 C# 中的程序运行目录获取方法

探索 C# 中的程序运行目录获取方法 引言 在 C# 开发中&#xff0c;有时需要确定您的应用程序的运行目录。这可能是为了读取配置文件、存储日志&#xff0c;或者访问与应用程序位于同一目录的其他资源。C# 提供了几种方法来获取当前程序的运行目录。本文将探讨这些方法及其使用…

[Altium Designer] AD PCB相同模块的布局步骤

针对原理图完全相同的模块布局布线很有帮助&#xff1b;一定要对应模块相同操作才具有可行性。 1、原理图中选取一路模块的元器件&#xff0c;快捷键【T→S】即可在对应的PCB中选取对应的元器件&#xff1b;跳转到PCB&#xff0c;快接方式改变右边属性&#xff0c;【ctrla】 …

【InternLM 大模型实战】第四课

XTuner 大模型单卡低成本微调实战 FINETUNE简介指令跟随微调增量预训练微调LoRA & QLoRA XTuner简介功能亮点适配多种生态适配多种硬件 8GB 显卡玩转LLMFlash AttentionDeepSpeed ZeRO 动手实战环节环境配置微调准备配置文件模型下载数据集下载修改配置文件开始微调将得到的…

使用python连接elasticsearch

有一个困惑了好久的问题&#xff0c;那就是从python里面连接elasticsearch总是报错。大致长这样 一开始我是看网上把es的安全功能关闭&#xff0c;也就是下面的内容&#xff0c;这个要进入到es的docker中去改config/elasticsearch.yml配置文件&#xff0c;但是这样改了以后kib…