Angular UI 库大比较 📚

市面上有很多适用于 Angular 的 UI 库。有些库提供基础知识；有些则提供了一整套组件。我浏览了最常用的 Angular UI 库，并比较了它们提供的组件。我比较的库包括：

• Ng-bootstrap（MIT 许可证）
• PrimeNG（MIT许可证）
• Kendo UI for Angular（订阅）
• Ngx-bootstrap（MIT 许可证）
• Angular Material（MIT 许可证）
• Syncfusion Angular UI（订阅）
• Devextreme Angular（订阅）
• Ng-zorro（MIT 许可证）
• Nebular（MIT 许可证）
• Clarity（MIT 许可证）
• Ignite UI for Angular（订阅）

如您所见，其中四个是基于订阅的；其余的则采用 MIT 许可证。您可以访问tl;drLegal网站来了解许可证的用途。MIT 许可证概述如下：

现在开始比较！为了方便您比较，我创建了一个 StackBlitz，您可以在其中轻松切换不同的 UI 库。您甚至可以搜索组件。如果下面的 StackBlitz 不起作用，我在博客末尾也添加了完整的工作表。

StackBlitz 下面有更多关于各个组件及其含义的信息。

组件列表

手风琴

手风琴组件允许用户显示和隐藏页面上相关内容的章节。最常见的情况是，当你展开某个章节时，前一个章节会折叠起来。

警报

警报组件向用户提供上下文反馈。通常，您可以选择info、warning、error、success或颜色主题（例如primary）。

自动完成（预先输入）

自动完成（或预输入）是一种特殊的输入方式，用户可以开始输入，在输入过程中，系统会显示一些结果作为建议，以自动完成当前输入。这些结果可以是本地数据，也可以是来自服务器的数据。

一些库允许对自动完成的结果进行分组。

阿凡达

头像组件用于显示用户的头像。根据 UI 库的不同，头像可以是圆形、方形或圆角方形。

徽章

徽章组件直观地显示某些元素的状态或计数，例如通知数量。徽章纯粹是视觉元素，请勿与标签混淆。您可以与标签进行交互，但不能与徽章进行交互。

条形码

该组件不仅可以显示或生成条形码，有时还可以显示或生成二维码（例如，Ng-zorro 使用二维码）。

块用户界面

一个会在页面上添加一个覆盖层，使用户无法与其进行交互的组件。它通常在加载或提交内容时使用，以阻止任何用户交互。

面包屑

面包屑组件向用户显示其在 Web 应用程序层次结构中的位置。它允许用户向上导航。

按钮

按钮组件的作用无需赘述，它本身就说明了一切。之所以使用组件来代替常规的 HTML 按钮，是因为它能够提供更强大的控制力和可扩展性。按钮组件通常支持多种颜色主题。

一些库为其按钮组件提供了额外的选项，例如加载行为、涟漪等。

按钮组

有时你希望将相关的按钮分组。这可以用于在不同状态之间切换，甚至可以纯粹通过视觉来向用户展示这些按钮实际上是相关的。

一些库允许按钮组表现为单选按钮组（单选）或多选。

日历

日历组件向用户显示完整的日历。该库通常将日历作为日期选择器弹出窗口中显示的内联版本提供。

根据库的不同，您可以选择诸如一周的开始日期、选择“今天”的按钮、更改全球化等选项。

卡片

卡片组件以卡片形式显示一些数据。卡片内容始终是必需的。此外，您还可以（根据库的功能）添加标题、图片、头像、行动号召等。

卡片组件通常通过在卡片周围显示阴影来显示某种形式的深度，从而彰显其特色。

旋转木马

轮播组件（或幻灯片组件）用于循环显示多个元素。这些元素可以是图片，也可以是内容。根据库的不同，一些选项包括自动播放、左右箭头样式、添加分页项目符号等。

图表

一些 Angular UI 库提供不同类型的图表；其他库的功能则比较有限。图表组件用于以可视化的方式显示数据。

聊天

聊天组件用于可视化整个聊天。

复选框

复选框组件用于显示真值或假值。一些库甚至提供三态支持（即真、假或空）。复选框组件优先于常规 HTML 输入框（type checkbox）使用，以提供自定义样式或附加选项。

薯片

芯片是一种特殊的输入方式，用户的每个输入都会在列表中显示为一个“芯片”。它允许用户输入多个输入项，并清晰地显示每个输入项。图书馆通常允许通过添加移除图标（例如一个“箱子”或“x”）来移除每个芯片。芯片还可以与另一个图标一起使用，以描述其用途。 

有时，该库允许与芯片直接交互，甚至不需要任何输入字段。

坍塌

折叠组件允许某些内容由其他元素触发展开或折叠。手风琴折叠面板是一种特殊的折叠方式，因为每个标题都会折叠或展开其下方的内容。折叠组件可以是任何内容，通常也可以由任何元素触发（尽管良好的可访问性建议使用按钮）。

通过一些额外的样式，你可以使用手风琴组件作为折叠面板。这样，手风琴组件就只能容纳一个面板了。

颜色选择器

颜色选择器组件允许用户选择颜色。一些库倾向于创建自己的颜色选择器，而不是常规的 HTML 输入框 (type color)，以提供额外的样式或额外选项，例如内联变体。它还允许返回不同的格式（rgba、hex、rgb 等）。

上下文菜单

当用户右键单击页面的某个部分并且您想要提供具有不同操作的不同菜单时，将使用上下文菜单组件。

数据视图

数据视图是一个组件，您可以在其中提供表格数据，并通过模板以特定方式将其显示给用户。

日期选择器

使用日期选择器组件，您可以从输入字段旁边弹出的日历中选择日期，并将其填充到输入字段中。库可以提供自己的日期选择器来替代 HTML 输入框 (type date)，这样就可以自定义样式和更多选项，例如不同的视图（年、月、日、时间）或日期格式。

一些库也允许选择日期范围。

图表

图表组件可以显示图表，例如活动图或序列图。

分隔线

分隔符组件用于清晰地划分列表项或部分。通常，分隔符为一行，但也可以附带文本。

码头

停靠组件是一种用于导航的特殊菜单，它停靠在页面的四个侧面之一：顶部、底部、左侧或右侧。

拖放

拖放组件支持拖放功能。它可用于排序，允许用户按顺序设置首选项等。

下拉列表（选择）

下拉组件（或选择组件）用于从列表中进行选择。选择完成后，所选项目将显示在框中。某些库允许使用复选框进行多项选择。

该库倾向于提供自己的下拉组件，而不是常规的 HTML 选择，以获得自定义样式和/或额外的选项。

下拉按钮

下拉按钮允许用户在一个按钮上显示多个操作。它与常规下拉菜单非常相似，但不是先显示选择，而是执行具体的操作。

有些库有“拆分按钮”，不仅可以在下拉菜单中设置多个操作，而且主按钮也有一个操作。所以，使用拆分按钮，你可以设置一个主操作或一个侧边操作。

编辑

有些库提供基本的编辑器组件；有些则提供完整的 WYSIWYG（所见即所得）功能。用户可以编辑内容并应用基本或高级样式。通常，组件还支持导出或预览。

文件上传

使用文件上传组件，用户可以上传一个或多个文件。有些库每次只允许上传一个文件；有些则允许上传多个文件。您可以使用常规的 HTML 输入框（输入file），但文件上传组件提供了更多选项。

筛选

过滤器组件用于创建高级过滤器。通常用于创建复杂的查询。

浮动按钮

浮动按钮组件（也称为 FAB，即浮动操作按钮）是浮动在页面特定位置的按钮。当您向下滚动时，浮动按钮始终停留在该位置。它最常用于执行页面的主要操作。

浮动标签

浮动标签组件与文本字段一起使用。当用户将焦点放在该文本字段上时，标签（看起来像占位符）将浮动在文本字段上方，使用户仍然知道该文本字段的内容。

动图

测量

仪表组件用于显示仪表中的数据。一些库允许高度自定义并支持精美的动画。

图标

有些库自带图标库。您可以使用图标组件来显示图标。通常，您可以选择颜色和大小等选项。

图像编辑器

图像编辑器组件允许编辑图像并保存或导出。

图像预览

图像预览组件显示一个图像，用户可以对其进行交互，以便以更大的视图（预览）显示该图像。

动图

输入

输入组件允许用户输入。您通常可以选择不同的颜色、大小和其他选项，例如清除按钮。一些库在输入组件中包含标签。

输入组

输入组组件用于显示单个输入框内的相关内容。这可以是输入框旁边的按钮，也可以是前缀图标。

输入掩码

输入掩码组件为用户提供必须遵守的掩码。例如，电话号码或信用卡号。

标签

标签组件通常是常规标签的包装组件，但提供额外的样式和选项，例如图标或所需的标记。

列表视图

列表视图组件以列表形式显示数据。数据提供给列表视图组件，并使用特定的项目模板按所需方式显示。

列表框

列表框组件用于显示多个选项，并允许用户选择其中的多个。列表框中的选项会立即显示在面板中，这与下拉菜单不同。

地图

地图组件用于向用户显示地图。

菜单

菜单组件是一种导航形式。它通常显示为菜单栏。

模态框（对话框）

模态框（或对话框）组件用于在其他内容上方显示内容。库通常提供关闭选项，例如点击背景、关闭按钮或退出键。

多选

多选组件类似于下拉（选择）组件，但允许多项选择，这通常通过使用复选框来完成。

分页器

分页组件用于显示某些内容（例如列表或表格）的分页。它通常包含一些选项，例如跳转到第一页或最后一页、跳转到上一页或下一页，或者在页面较多时显示分隔符。

PDF阅读器

pdf 查看器组件用于在页面内显示 pdf 文档。

数据透视表

数据透视表组件用于分析一组数据。借助它，您可以创建强大的汇总或计算功能。例如，基于一组人们戴帽子或连帽衫的数据，提取出有多少人戴帽子、有多少人穿连帽衫等等。

弹出窗口

弹出框组件用于显示相关的附加内容。请勿将其与工具提示混淆。工具提示用于解释内容，而弹出框则显示相关的附加内容。通常，点击来源即可显示弹出框。它还支持多种形式的内容，例如图片或链接。

进度条

进度条组件用于向用户显示进度。通常您可以选择多种颜色。有些组件还支持无限长的进度条。

单选按钮

单选按钮组件与其他单选按钮一起使用，为用户提供选择。单选按钮组件优先于常规 HTML 输入框 (type radio) 使用，用于提供自定义样式或附加选项。

等级

评分组件是一种特殊的滑块组件。评分范围通常较小（例如，0 到 5，0 到 10），从某个数字开始，并用一组图标（通常是星形图标）表示。当您将鼠标悬停在评分组件上时，图标会填充到鼠标悬停的位置。一旦您点击，该评分就会保持不变（直到您选择新的评分）。

调度器

调度程序组件用于管理计划数据，并允许用户通过创建、更新或删除计划中的事件来管理这些数据。调度程序可以按不同的视图显示数据，例如按月、按日等。

侧边栏

侧边栏组件用于在页面侧面显示导航项。

签名

签名组件允许用户通过添加签名来签署内容。

骨骼

骨架组件是一种特殊的加载组件。它展示了正在加载内容的大致结构，例如，列表组件加载时会显示 4 个水平矩形。它让用户大致了解加载完成后会出现什么样的内容。

滑块

滑块组件用于显示两个数字之间的范围。您还可以更改滑块增加的步数。滑块组件的一个很好的例子是过滤器的价格范围。

迷你图

迷你图是一种特殊的图表，用于在小空间内显示数据（例如，内联使用）。

旋转器

旋转组件用作占位符或正在加载内容的叠加层。它通常是一个通过旋转来实现动画效果的图标。一些库提供可内联使用的旋转组件。

动图

分离器

拆分器组件会创建拆分成多个窗格的布局，这些窗格可以调整大小、展开和折叠。StackBlitz 上就是一个很好的拆分器组件示例，您可以在其中调整编辑器和预览面板的大小。

电子表格

电子表格组件用于显示类似 Excel 的电子表格。它们通常带有导出功能。

步骤

步骤组件（或向导组件）用于显示步骤。它引导用户完成某个过程。

桌子

表格组件用于显示表格数据。一些库提供基础表格组件来显示表格数据。另一些库则提供高级表格组件，其中包含排序、筛选甚至导出等选项。

标签

Tabs 是一个容器组件，用户可以通过标签页进行导航。一些库还提供其他选项，例如可滚动的标签页。

标签

标签组件用于对内容进行分类。它们包含简单的文本，并且可以交互。常见的标签示例包括状态、类别等。

终端

终端组件为用户提供完整的终端。

文本区域

Textarea 组件用于多行文本输入。有时，Textarea 组件比常规 HTML Textarea 更受欢迎，因为它允许添加额外的选项，例如辅助文本或浮动标签。

时间线

时间线组件用于显示一段时间内的事件列表。

时间选择器

日期选择器可以用于选择所有日期，而时间选择器则专门用于选择时间。它允许你选择一个时间。

吐司

Toast 是一种可关闭的消息。一些库允许 Toast 在一段时间后自动关闭。它们通常位于右下角，但也可以配置位置。

切换

切换器或开关用于以可视开关的形式显示真值或假值。

切换按钮

与普通的切换按钮类似，切换按钮用于显示真或假值。但它并非开关，而是一个按钮，状态为按下或未按下。

动图

工具栏

工具栏是一组按钮和/或操作，它们被组合在一个固定在内容面板特定位置（顶部、底部、左侧或右侧）的栏中。工具栏上的按钮和操作通常会影响内容面板的内容。例如，富文本编辑器的工具栏。

工具提示

工具提示会显示文本来解释您悬停在其上的内容。您通常可以更改其显示位置（顶部、右侧、底部或左侧）。某些库还允许您通过点击触发工具提示。

树

树形组件用于显示嵌套数据。有些库允许嵌套表格数据；有些则更基础，是嵌套列表。

Word（文档查看器）

用于显示 Word 文件或其他文档的查看器组件。类似 PDF 查看器，但适用于 Word 或其他文档。

结论

如您所见，Angular UI 库有很多，但您应该选择一个符合您需求的。另外，请考虑预算，因为并非所有库都是免费的。您可以随时选择免费的库，并使用其他开源库来处理更详细的内容，例如图表。请记住限制库的数量，因为使用的库越多，更新 Angular 版本时需要维护的内容就越多。

最后，为了结束这篇博文，我们以常规表格的形式呈现了完整的比较结果（以防 StackBlitz 加载失败）。希望你喜欢这篇文章！和往常一样，如果你有任何问题，请随时联系我！