很高兴地宣布，今天我们将通过最新的 Ignite UI 22.2 版本发布大量 UI/UX 升级。扩展您最喜欢的 UI 库，我们现在添加更多组件和功能、更好的控件、跨 Blazor、Angular 和 Web 组件的全新数据网格、改进的 App Builder 代码生成功能、™ Figma 设计工具支持等等.
无论您是想设计和构建现代 Web 应用程序，用更好的 WYSIWYG 低代码应用程序构建体验替换遗留应用程序，还是只想从功能更全的开发堆栈开始，Ignite UI 22.2 产品版本现已推出。
首先，我想先睹为快，先睹为快，了解我们今天为您带来的重大新闻。在过去的几个月里，我们成功地解锁了从设计到代码解决方案的三个主要步骤！
Blazor Web Assembly & Blazor 服务器代码生成
Web 组件代码生成
Figma UI 套件和 Figma Design-to-Code 故事
让我们深入了解最新的调整，这些调整可以加速您的整体开发过程，并使您能够在项目中提供强大、一致且可访问的 UI。
Ignite UI 应用程序生成器
代码生成
Web 组件代码生成
App Builder 支持的框架系列已经发展得更多。最新成员——Web Components。现在您可以下载或上传 您的 Web 组件应用程序到GitHub 。
Blazor WebAssembly (WASM) 和 Blazor 服务器代码生成
App Builder 现在公开了一种下载 Blazor WASM 和服务器应用程序的方法。如果您是 Blazor 新手，请查看这篇5 分钟内开始使用 Blazor 文章。
我们还包含 3 篇详细的文章，探讨了 Blazor 与 Angular、 Blazor 与 React以及 Blazor Server 与 Web Assembly之间的差异。如果好奇，您可以查看它们以获取更多信息。
许可代码导出
现在可以生成两种类型的代码：
1. 如果您是 许可用户，则在生成应用程序时将使用Ignite UI Angular 的许可包 。这适用于 应用程序下载 和 发布到 GitHub 。
当应用程序发布到 GitHub 时，我们会添加一个 CI，它将构建您的项目并运行基本测试。我们还发布了 GitHub CI 所需的 NPM_AUTH_TOKEN，以便能够使用许可包。
2. 如果您是 试用用户，则在生成应用程序时将使用Ignite UI Angular 的免费试用包 。这适用于 应用程序下载 和 发布到 GitHub。
如果项目使用的是试用版的 Ignite UI Angular，以及如何设置您的环境和 CI 以使用我们的许可 npm 提要，请参阅 许可常见问题解答和安装文档，了解如何升级到完整许可包的信息。
或者运行 “npm run infragistics-login ”以引导登录到我们的许可提要。
用户界面套件
Figma 设计工具支持
随着对 Sketch 和 Adobe XD 的支持以及 Figma 被添加为最新 App Builder 22.2 版本的一部分，我们标志着我们从设计到代码故事的一个新里程碑，涵盖了用于 UX 和 UI 设计的所有主要工具。
全新的 Figma Indigo.Design UI Kit for Material 映射到我们的 Ignite UI for Angular、Blazor 和 Web Components UI 工具集，以完全重新定义设计开发流程。您现在可以获得一组强大的组件、模式、样式和自定义选项，使您能够导入原型或在 Figma 中设计的任何类型的屏幕，并将其转换为干净的代码。最好的部分是所有静态设计都变成具有真实 UI 组件、品牌和样式的交互式、响应式应用程序——只需单击一下。
以下是今天添加的 Figma UI 工具包带来的全新控件、组件和质量改进：
Accordion
Avatar
Badge
Banner
Button
Button Group
Calendar
Card
Carousel
Charts - Category and Pie Chart
Checkbox
Chip and Chips Area
Combo
Date Picker
Dialog
Divider
Drop Down
Expansion Panel
Gauges - Linear and Radial Gauge
Grids - Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid
Hyperlink
Icon
Input
List
Navigation Drawer
Progress Bar
Radio Group
Select
Slider
Snackbar
Splitter
Stepper
Switch
Tabs
Text Area
Time Picker
Toast
Tree
Tooltip
AppBuilder 工具箱中的新组件
树网格组件
Ignite UI Angular Tree Grid 用于轻松显示和操作平面数据。您现在可以使用很少的代码快速绑定您的数据，或使用各种事件来自定义不同的行为。该组件提供了一组丰富的功能，如数据选择、excel 样式过滤、排序、分页、模板和列移动。
由于 Tree Grid 的第一个版本仅支持平面数据绑定，因此数据对象应包含一个主键和一个外键。主键是当前数据对象的唯一标识，外键是其父对象的唯一标识。在这种情况下 data ，包含原始数据源的树状网格的属性将是一个平面集合。
Accordion 组件
在此版本中，我们还添加了一个 Accordion 组件。它是一个 GUI 组件，用于构建带有可点击标题和相关内容部分的垂直可扩展面板，显示在单个容器中。Accordion通常用于减少在单个页面上滚动多个内容部分的需要。 您可以在此处的 App Builder 中测试 Accordion 组件 - https://appbuilder.indigo.design/app/syoalfkoviqp/preview
扩展面板组件
Ignite UI 扩展面板是一个轻量级的手风琴组件，可以在两种状态下呈现——折叠或展开。可以使用鼠标单击或键盘交互来切换扩展面板。官方扩展面板文档。您可以在此处的 App Builder 中测试扩展面板组件 - https://appbuilder.indigo.design/app/57rzzu3jaybd/preview
Rating 组件
Ignite UI Rating 组件是一个简单但非常有用的组件。Rating 组件允许您的最终用户从一组视觉符号（如星星）中选择一个评级值。评级组件通常用于提供有关用户对他们可能使用或购买的产品和服务的意见和体验的见解。 您可以 在此处的 App Builder中测试评级组件 - https://appbuilder.indigo.design/app/sdhduwdghier/preview
选项卡布局组件
Ignite UI Tabs 组件用于组织 或切换相似的数据集。 您可以在此处测试 App Builder 中的选项卡布局组件 - https://appbuilder.indigo.design/app/jrlsezuwhf74/preview
树组件
我们现在有一个树组件作为工具箱的一部分，您可以使用它在分层数据结构中进行可视化和导航。Ignite UI 树组件还通过 内置复选框、内置键盘导航等提供项目激活、双态和级联项目选择。Tree 的当前版本不支持数据绑定。您可以在此处的 App Builder 中测试树组件 - https://appbuilder.indigo.design/app/a3w5ubpbycfz/preview
导航抽屉
Navigation Drawer 现在有一个可放置区域，您可以添加像树这样的组件。您可以在此处的 App Builder 中测试 Navigation Drawer 组件 - https://appbuilder.indigo.design/app/2d7wdqid75ld/preview
新的网格功能
基于网格列的功能和配置
网格现在将每个列公开为子组件，使最终用户能够与所有列进行交互并公开以下功能：
每列都带有推断的列类型，而不是纯字符串，这在代码导出时很明显。
使用键盘箭头键和通过大纲面板重新排列列。
选择列标题并更改其标题或数据字段。
添加一个新的（空）列，该列可以在代码导出时进行模板化或绑定到现有数据字段。
使用“del”键或通过大纲面板删除列。
通过大纲面板隐藏一列。
能够从设计表面调整列的大小。
新的 AppBuilder 功能
OpenAPI 改进
引用对象支持 - AB 现在支持对象以允许在内部和外部引用规范中的其他组件。
Reference Object 由 JSON Reference定义， 并遵循相同的结构、行为和规则。
添加了对已解析表模式大小的限制（文档）
“无法从数据推断架构” - 当数据源的已解析表架构的大小太大（超过 5mb）时，将显示此错误消息。它可以在以下情况下触发：
- 添加常规 REST 端点。
- 检查 swagger 数据源的端点时。
- 或者当数据源更新时。
请记住，这不是对数据的限制。例如，它可以包含超过 50MB 的行，但只要模式（数据的形状）可以在 5MB 以下表示，App Builder 就会加载它。
过滤 OpenAPI 端点
配置 OpenAPI 数据源时添加了端点过滤。
将设计表面的缩放设置重新定位到应用程序工具栏
视觉增强释放了更多的设计区域空间。
AppBuilder 浏览器支持
完整的 Safari 浏览器支持
App Builder 现在支持 MacOS Safari 和 Mobile Safari。
支持行列布局中的网格间隙 (Flexbox)
在 AppBuilder 中共享和预览应用程序
与他人共享应用程序从未如此简单。在此版本中，我们为各种情况添加了共享和预览功能。您现在可以单击预览模式旁边的“共享”图标，复制应用程序 URL 以及描述、共享功能许可或 Twitter 直接共享等设置。 通过应用程序的“更多操作”图标，共享按钮也将出现在工作区视图中。您可以通过切换“允许任何人使用此链接预览”来自定义共享体验，您还会看到一个警告图标，其中提供了其他信息，如果要禁用该链接，您应该关闭该开关。
预览行为：
如果应用程序链接与工作区的登录用户部分共享，则后者将有权使用其真正的远程数据源（如果已配置）预览应用程序，而不是模拟数据。将使用加密令牌发出数据请求，并获取真实数据。
如果应用程序链接与不属于工作区的登录用户共享，则后者将有权预览应用程序，但会看到带有模拟数据的应用程序。
从“共享对话框”禁用链接预览。与登录用户共享的应用程序。
从“共享对话框”禁用链接预览。与匿名用户共享的应用程序。
编辑应用行为和限制
已与登录用户共享应用程序链接，但它是其他人的个人工作区。用户将没有编辑权限。
与非工作区成员的已登录用户共享应用程序链接。只有受邀成员才能编辑。
有关共享、预览和编辑应用程序功能的更多信息，请参阅官方文档。
新示例应用程序
人力资源仪表板示例
添加了一个新的示例应用程序，其中包括网格和图表组件。该应用程序还展示了其他组件的用法，如列表、卡片、对话框和漂亮的布局。您可以在此处的 App Builder 中测试 HR Dashboard 示例 - https://appbuilder.indigo.design/app/yplynzm54zwz/preview
关于 Infragistics
Infragistics 于 1989 年在美国成立。该公司提供面向开发人员和 UX 专业人员的 Infragistics UI 控件和工具，来支持和加速他们的应用程序开发。
渝公网安备50010702505508