Svelte UI 库和组件概述

多年来，Web 开发者的开发栈几乎都包含 JavaScript 三大框架之一——React、Angular 和 Vue。这些框架至今仍广受欢迎且不断发展，但对于程序员来说，拥有更多可供选择的框架是大有裨益的。最新的JS 现状调查结果显示，JavaScript 领域正在涌现一颗冉冉升起的新星——Svelte。

目前，我正在开发一个基于 Svelte 的演示项目管理应用。考虑到 Svelte 在短短几年内就吸引了开发社区的广泛关注，我原本以为所有代码部分都必须从头开始。但幸运的是，我找到了许多 UI 库，甚至还有一个甘特图组件，它们可以帮助我更高效、更省时的首次 Svelte 编程体验。在本文中，我想与大家分享我的一些发现。

但首先，我们应该熟悉这个有前途的框架。

什么是 Svelte 以及为什么要使用它

Svelte是一个相对较新的基于组件的 JavaScript 框架，其核心是强大的响应式系统。它提供了一种构建超高速 Web 应用程序的全新方法。与 React 和 Vue.js 在用户浏览器中运行时解释应用程序代码不同，Svelte 以编译器的形式运行，并在构建阶段将声明式代码转换为纯 JavaScript。当应用程序状态发生变化时，Svelte 会自动更新 DOM，而无需依赖虚拟 DOM 差异。因此，Svelte 允许以更少的代码创建性能卓越的应用程序。

IBM、飞利浦、GoDaddy、纽约时报以及许多其他不同规模的公司都已开始使用 Svelte。它也是一个适合初学者的框架，只需具备基本的 Web 技术（HTML、CSS、JS）知识即可开始使用 Svelte。

现在让我们继续概述可用于加速基于 Svelte 的应用程序开发的现成的 UI 工具。

Svelte 的 DHTMLX 甘特图

如果您正在寻找一种基于甘特图功能的项目管理应用程序的简便方法，那么DHTMLX Svelte Gantt正是您所需要的。实际上，它是我的演示项目的关键组件。这个全新的库纯用 Svelte 编写，使您能够构建甘特图，以便在任何规模的项目中方便地规划、管理和监控任务。

这款原生 Svelte Gantt 的主要特点是其响应性。它确保任何编辑操作或图表时间轴操作都能无延迟地显示。该组件还以其卓越的性能而闻名。即使包含 10000 多个任务的项目也能在几毫秒内渲染完成，而不会给最终用户带来任何不便。

Svelte 甘特图具备一系列用于组织工作流程的关键功能。例如，可以设置不同类型的任务（项目、任务、里程碑）并指定它们之间的依赖关系。您还可以通过添加任务工具提示和垂直标记来增强甘特图时间线的信息量。直观的拖放式用户界面让用户能够轻松与图表交互。每个项目任务的所有相关数据都可以通过编辑表单随时更改。

此甘特图组件拥有丰富的 API，提供丰富的自定义选项，让您能够根据项目需求调整所有甘特图元素。您还可以自由地添加自定义 HTML 内容来补充任务，启用只读模式，甚至可以在同一页面上放置多个甘特图。

如果您决定在项目中尝试 DHTMLX Svelte Gantt，只需从 npm 下载评估版本即可使用。多个演示版本将帮助您更快地充分利用此甘特图组件。

包大小： 185 kB
许可证：商业
NPM： https://www.npmjs.com/package/@dhtmlx/trial-svelte-gantt

Svelte Material UI

Svelte Material UI (SMUI) 是一个包含 20 多个 Svelte 3 UI 组件的库，其设计针对触屏/移动设备进行了优化，旨在生成各种界面元素。它基于 Web 端的 Material Design 组件 (MDC)，有助于实现 Material Design。

如果给定的组件列表无法满足您的需求，SMUI 提供了用于创建自定义 UI 组件的辅助实用程序。所有组件均可使用任意属性和操作进行丰富。每个组件的所有事件都会被转发。这里我们讨论的是 DOM、MDC 和自定义事件。此外，SMUI 还支持各种事件修饰符。

SMUI 组件完全可主题化，这意味着您可以借助 Sass 变量或纯 CSS 定义其外观的各个方面。所有组件均可调整，以适应使用 RTL 语言编写的文本内容。SMUI 默认也支持残障人士访问。

我们可以得出结论，该库在 Web 开发人员中正在迅速普及，因为它已经在500 多个项目中得到应用。

软件包大小： 45.6 kB
许可证： Apache 2.0
GitHub 星数： 1.6k

冶炼

Smelte是一个基于 Svelte 和 Tailwind CSS 组合的 UI 组件库。它提供了一系列 Material Design 组件（超过 20 个），旨在帮助开发者创建美观且响应迅速的布局。Tailwind 的实用类是构建 Smelte 组件的主要工具，而 Svelte 则负责性能和包大小。

该库提供了很多实用功能。例如，它有一个 PurgeCSS 工具，可以自动检测并移除 CSS 中所有未使用的类，从而减少项目中 CSS 文件的大小。图片延迟加载功能允许在应用中显示高质量图片，而不会造成任何性能损失。其他实用功能包括 JS/CSS 波纹动画、SSR 部署、自定义主题、Material 图标、暗黑模式等等。

软件包大小： 948 kB
许可证： MIT
GitHub 星号： 911

Carbon Components Svelte

Carbon 是 IBM 推出的一款知名设计系统，旨在简化设计和开发流程。该系统的核心部分也由 IBM 团队实现，旨在通过流行的 JavaScript 库实现原生编码体验。Carbon Components Svelte就是其中一种解决方案。

该库包含一组可复用的 Svelte UI 组件（超过 50 个），用于解决特定的 UI 问题。采用该库可让您在 Svelte 项目中受益于一致的标记、样式和行为。Carbon Components Svelte 还利用sveld库自动生成 TypeScript 定义和 API 元数据。

Carbon Svelte 产品组合还包含三个适用于 Svelte 应用程序的实用库：Carbon Icons（6000+）、Carbon Pictograms（700+）和Carbon Charts（16）。这些库可以独立使用，也可以与 Carbon Components Svelte 结合使用。

软件包大小： 2.14 MB
许可证： Apache 2.0
GitHub 星数： 773

Svelte Materialify

Svelte Materialify是一个 UI 库，旨在加速 Svelte 的开发流程。它为 Web 开发者提供精心设计的 Material 组件，帮助他们构建丰富且引人入胜的用户界面。目前，该库包含 50 多个组件，用于实现关键的 UI 元素，例如网格、表单、菜单、按钮、工具提示等等。

所有组件均可定制，因此可以根据各种用例进行修改。如果您有自己想要的 Materialify 组件样式，可以创建自定义组件。支持服务器端渲染有助于提升性能。该库还以其完全可访问性而著称。

该库仍在开发中，但在未来，它可能会开始为 Svelte 扮演与 Vuetify 为 Vue.js 扮演的相同角色。

软件包大小： 2.38 MB
许可证： MIT
GitHub 星号： 437

斯维尔特斯特拉普

当谈到 Svelte 应用的网页设计问题时，一些开发者可能会选择使用一些知名的 Bootstrap 组件。这是可行的，但问题在于，许多此类组件应该自带 jQuery，这会增加应用的包大小。这时，Sveltestrap库就派上用场了。

这个库可以帮助你将 Bootstrap 组件重新实现为 Svelte 组件。它让你无需直接应用 Bootstrap 组件类或包含 Bootstrap 的 JS 代码。Sveltestrap 组件在使用上不会造成任何困难，因为它们所需的标记更少。该组件的创建者借鉴了React 的Reactstrap库中的一些概念。

同时需要注意的是，Sveltestrap 没有 Bootstrap 样式，因此需要在你的项目中添加 Bootstrap 4 样式表的链接。

软件包大小： 1.14 MB
许可证： MIT
GitHub 星号： 574

景点

Attractions是一个强大的 UI 组件包，旨在加速在 Svelte 应用中实现各种界面元素的过程。目前，它包含 46 个可自定义的组件和一系列实用函数，可提高您的编码效率。得益于 Svelte 的编译特性，该库可以应用于任何使用 JS API 的框架。

Attractions 组件中的所有样式更改均通过类和 Sass 变量进行。通过使用自定义元素 API，您还可以将 Attractions 组件用作 Web 组件。当您想快速创建原型而不使用任何框架或打包工具时，这会非常有帮助。

软件包大小： 875 kB
许可证： MIT
GitHub 星号： 203

斯维尔特乔塔

较小的包大小是激励 Web 开发者使用 Svelte 开发 Web 项目的关键优势之一。SvelteChota 的核心理念正是源于此。SvelteChota是一套基于 Chota CSS 框架的 UI 组件。该框架主要以轻量级著称，打包后仅添加约 3kb 的 gzip 压缩代码。SvelteChota 包含一系列基础组件（超过 10 个），可使用 CSS 变量进行自定义。此外，SvelteChota 还提供了一些实用的 CSS 类，可用于修改任何元素的样式。此演示页面展示了标准 HTML 元素在 Chota 中的显示效果。

软件包大小： 110 kB
许可证： MIT
GitHub 星号： 177

Notus Svelte

Notus Svelte是一款免费的 UI 工具包和管理工具，由 Creative Tim 基于 Tailwind CSS 和 Svelte 构建。选择 Notus Svelte，您可以访问 120 个完全编码的 CSS 元素和 18 个动态组件，从而快速启动您的 UI 开发。这些组件可以混合搭配，帮助您更轻松地完成从原型设计到功能齐全的代码编写的各个阶段。所有组件的外观都可以借助 Tailwind CSS 类和自定义类进行调整，以满足您的需求。您还可以使用现成的示例页面来开始使用 Notus Svelte。

软件包大小： 6.65 MB
许可证： MIT
GitHub 星号： 168

斯韦尔斯里

Three.js 是一个广泛使用的 JavaScript 库，用于在浏览器中创建和显示 3D 内容。如果您想在 Svelte 项目中实现同样的功能，请关注Svelthree。该组件库的主要目标是为 Svelte 开发者提供类似于 three.js 的 API。利用这个库，您可以以声明式的方式构建响应式、可复用的 three.js 场景图。

所有组件的代码均使用 TypeScript 编写。开发团队还准备了一些实用的示例，以更详细地介绍该库的 API。需要指出的是，该库仍处于开发阶段，许多功能尚待添加。

软件包大小： 2.24 MB
许可证： MIT
GitHub 星号： 158

费尔特

当需要从最终用户获取重要信息时，表单是关键的界面元素。因此，我花了一些时间寻找一个好的库来实现 Svelte 的这一功能，并偶然发现了Felte。它是一个基于 Svelte 存储和操作的用户友好且可扩展的表单库，允许您按照自己的需求构建表单。

验证是任何表单组件的重要组成部分，因此 Felte 允许您应用常用的验证库（例如 Yup、Zod 或 Superstruct）或创建自定义验证策略。它还提供了各种内置的错误报告功能。在样式选项方面，Felte 依赖于纯 HTML 标签而非 CSS 变量，从而简化了样式调整工作。

软件包大小： 243 kB
许可证： MIT
GitHub 星号： 74

Svelte Mapbox

如果您需要为 Svelte 项目构建支持服务器端渲染的交互式地图，Svelte Mapbox可以成为您完成此类任务的得力助手。这款轻量级地图工具基于流行的 Mapbox 库，提供地图和地点地理编码（地点自动完成）组件。您还可以向地图添加自定义 Svelte 组件，并使用自定义 CSS 修改任何地图元素。但需要强调的是，地点自动完成组件依赖于客户端，因为如果打包，它会增加包大小（约 0.5 MB）并延长构建时间。

包大小： 52.4 kB
许可证： MIT
GitHub 星号： 120

Svelte 日历

Svelte Calendar是一款便捷的跨浏览器日期选择器组件，拥有简洁的动画效果，方便终端用户查看和选择日期。它在各种尺寸的移动设备上都能呈现良好的显示效果，并且可以通过拇指或键盘轻松导航。Svelte Calendar 允许您通过指定开始和结束日期来限制选择范围，并可设置日期选择器的主题。您可以将其作为 Svelte 组件使用，配合原生 JavaScript 使用，也可以将其编译为原生 Web 组件。

软件包大小： 1.51 MB
许可证： MIT
GitHub 星号： 292

Svelte-Grid

Svelte-Grid是一个便捷的网格布局系统，具有响应式断点，可让您以结构化的方式排列网页上的所有内容。它是一个纯粹的 Svelte 组件，不依赖 jQuery 或第三方工具。它提供静态、可拖动和可调整大小的小部件，可更快地实现页面设计。该组件还附带一些辅助函数，可帮助您更高效地管理网格元素。由于与 Sapper 框架兼容，它还可以在服务器端渲染。

软件包大小： 179 kB
许可证： MIT
GitHub 星号： 490

最后的话

唯一可能阻碍你尝试 Svelte 的原因是，与主流框架相比，它显得有些不成熟。诚然，Svelte 是一个年轻的框架，但正如你所见，市面上已有各种 UI 工具可以帮助你快速上手。我相信，在未来几年，这个卓越框架的生态系统将持续发展，变得更加友好。如果你还有其他构建 Svelte 应用的 UI 解决方案，欢迎在下面的评论区分享。