技术文章

Ignite UI for Angular 不断发展以改善开发人员的体验。通过Ignite UI for Angular 16.1.0 版本，我们做到了这一点——提供更好的应用程序构建流程，同时标准化所有现代 UI 组件框架的 UX，包括Ignite UI for Angular、Ignite UI for Web Components和Ignite UI对于布拉佐尔。 

新的 Ignite UI 组件大小调整（预览版）——现在做什么...

Ignite UI for Angular 16.1.0 引入了一种调整组件大小的新方法，其目标是替换现有的 DisplayDensityToken 和 displayDensity 输入属性。正式版本计划在 Ignite UI for Angular 17.0.0 中发布，这些 属性将在 Ignite UI for Angular 18.0.0 中删除。设置组件的显示密度或大小的方法是利用单个自定义 CSS 属性 - --ig-size。

为什么这一切都是必要的？

这一更改不仅使我们能够消除散布在 Angular 组件中的一堆 CSS 类绑定，而且使我们能够简化 CSS 样式表中组件大小调整的实现。我们现在拥有的是一种通用方法，可以在所有现代 UI 组件框架中更改应用程序中所有组件的大小。

我们用来在 Ignite UI for Angular 16.1.0 中实现组件大小调整的工具现在公开为公共 Sass API，它允许您的组件和布局响应 --ig-size 中的更改，就像 Ignite UI for Angular 组件一样。

如何确定组件的尺寸

1. 从清理开始

删除提供 DisplayDensityToken 的所有声明：

全屏

1

2

3

4

// *.component.ts

// 删除 `DisplayDensityToken` 的提供者声明

提供者： [{ 提供：DisplayDensityToken ， useValue ： { displayDensity：DisplayDensity.compact } }]

删除对 displayDensity 输入属性的所有绑定或编程分配：

全屏

1

2

<!-- 删除 ` [displayDensity]="'compact'" ` -->

< igx-grid [ displayDensity ] = "'紧凑'" > ... </ igx-grid >

2. 然后将您的应用程序移至基于 CSS 的大小调整

相反，请使用自定义 CSS 属性 --ig-size 来实现与 displayDensity 相同的结果。除了 --ig-size 之外，我们还包括允许的组件大小的 CSS 属性：

• --ig-size-small - 它将组件的大小调整为紧凑的大小；

• --ig-size-medium - 它将组件的大小调整为与 cosy 相当；

• --ig-size-large - 它将组件的大小调整为相当于舒适的大小；

这是一个实际的例子：

全屏

1

2

3

4

/* 将 --ig-size 添加到组件或全局文件。*/

igx -网格 {

--ig - size : var ( -- ig - size - small ) ; _

}

或者，如果您希望应用程序中的所有组件都很小，请执行以下操作：

全屏

1

2

3

4

身体 {

--ig - size : var ( -- ig - size - small ) ; _

}

3. 构建响应尺寸变化的自定义布局

如前所述，Angular 16.1.0 的 Ignite UI 公开了一个新的且易于使用的 Sass API 作为我们主题库的一部分，允许您创建相当大的布局和组件。假设我们想要创建一个 div 元素，它根据 --ig-size 的值更改其大小。我们可以通过以下方式实现这一目标：

全屏

1

< div class = " square " > </div>

全屏

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17 号

18

19

@使用 “igniteui-Angular/theming” 作为 * ；

%相当大的-元素 {

@包括 相当大的( ) ;

}

。正方形 {

/* 调整元素大小 */

@extend % sizetable- 元素；_ _

/*

* 定义元素的默认大小

* 将其绑定到 `--ig-size` 自定义属性

*/

--组件大小: var ( -- ig - size , var ( -- ig - size - large ) ) ;

/* 定义小 (10px)、中 (20px) 和大 (30px) 尺寸 */

--大小: # {大小( 10像素, 20像素, 30像素)} ;

宽度：var ( --尺寸) ；

高度：var ( --尺寸) ；

容器：方形；

}

正如您从上面的示例中看到的，通过仅使用一个 Sass mixin 和一个函数，我们已经使元素变得相当大。每次将 --ig-size 的值更改为允许的选项之一时，.square 元素都会调整大小。

奖金

将来，当对容器查询的支持在浏览器中得到更广泛的采用时，我们将能够从 --ig-size 中获得更多好处。

全屏

1

2

3

4

5

6

/* 当方形容器较小时设置背景为红色 */

@容器 方形 样式（--组件-大小：1 ） {

。正方形 {

背景：红色；

}

}

包起来

我们致力于为您提供最好的 Angular UI 工具包和相关见解，我们的目标是为您提供更多专业知识、新功能、增强的性能和更高的稳定性。除了至关重要的最新 Pivot Grid 之外，我们知道其他组件（例如Angular Data Grid）也非常重要。这就是为什么我们发布了有用的 Angular UI 数据网格教程来帮助您学习如何从头开始创建功能齐全的 Angular UI 网格。

除此之外，我们的目标是进一步加速整个设计到代码流程，我们继续开发最好的基于云的低代码平台——App Builder (TM)。它将Sketch或Figma 设计文件映射 到真实的 UI 组件，在 Angular 、Blazor 或 Web 组件中创建可用于生产的代码。

由于像您这样的用户通过我们的Ignite UI for Angular GitHub存储库提出请求，因此添加了一些增强功能。考虑到这一点，我们始终乐于接受建议和反馈——这使我们成长并更好地响应您的发展需求。

最后，我们知道我们下一个目标的透明度和可见性也是至关重要的。这就是为什么我们始终保持路线图最新的原因。

此外

在 Medium 上关注Ignite UI for Angular， 了解最新动态并了解我们正在进行的最新 Angular 相关项目。在 GitHub 上给我们一颗星，并通过解决问题部分中的任何疑虑、问题或功能请求来帮助我们继续改进我们的产品。