Ignite UI for Angular 16.1.0: 새로운 기능

Ignite UI for Angular는 개발자 경험을 개선하기 위해 끊임없이 발전하고 있습니다. Ignite UI for Angular 16.1.0 릴리스를 통해 더 나은 앱 구축 프로세스를 제공할 뿐만 아니라 Ignite UI for Angular, Ignite UI for Web Components 및 Ignite UI for Blazor 포함한 모든 최신 UI 구성 요소 프레임워크에서 UX를 표준화합니다.

Try Ignite UI for Angular

새로운 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이 제공되는 모든 선언을 제거합니다.

// *.component.ts
// remove the provider declaration for `DisplayDensityToken`
providers: [{ provide: DisplayDensityToken, useValue: { displayDensity: DisplayDen

displayDensity 입력 속성에 대한 모든 바인딩 또는 프로그래밍 방식 할당을 제거합니다.

<!-- Remove `[displayDensity]="'compact'"` -->
<igx-grid [displayDensity]="'compact'">...</

2. 그런 다음 앱을 CSS 기반 크기 조정으로 이동 – 대신 사용자 지정 CSS 속성 –ig-size를 사용하여 displayDensity와 동일한 결과를 얻습니다. –ig-size 외에도 허용되는 구성 요소 크기에 대한 CSS 속성이 포함되어 있습니다.

• –ig-size-small – 구성 요소의 크기를 compact와 동일하게 조정합니다.
• –ig-size-medium – 구성 요소의 크기를 아늑한 것과 동일하게 조정합니다.
• –ig-size-large – 구성 요소의 크기를 편안함과 동일하게 조정합니다.

다음은 실제 예입니다.

/* Add --ig-size to a component or global file. */
igx-grid {
--ig-size: var(--ig-size-small);
}

또는 앱의 모든 구성 요소를 작게 만들려면 다음을 수행합니다.

body {
--ig-size: var(--ig-size-small);
}

3. 크기 변경에 응답하는 사용자 정의 레이아웃 구축 – 앞서 언급했듯이 Ignite UI for Angular 16.1.0은 새롭고 사용하기 쉬운 Sass API를 테마 라이브러리의 일부로 노출하여 상당한 크기의 레이아웃과 구성 요소를 만들 수 있습니다. –ig-size의 값에 따라 크기를 변경하는 div 요소를 만들고 싶다고 가정해 보겠습니다. 이를 달성하는 방법은 다음과 같습니다.

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

@use "igniteui-angular/theming" as *;
%sizable-element {
@include sizable();
}
.square {
/* Make the element sizable */
@extend %sizable-element;
/*
* Define the default size of the element and
* bind it to the `--ig-size` custom property
*/
--component-size: var(--ig-size, var(--ig-size-large));
/* Define small (10px), medium (20px), and large (30px) sizes */
--size: #{sizable(10px, 20px, 30px)};
width: var(--size);
height: var(--size);
container: square;
}

위의 예에서 볼 수 있듯이 하나의 Sass mixin과 하나의 함수만 사용하여 요소를 확장할 수 있게 되었습니다. –ig-size의 값을 허용되는 옵션 중 하나로 변경할 때마다 .square 요소의 크기가 조정됩니다.

Bonus

앞으로 컨테이너 쿼리에 대한 지원이 여러 브라우저에서 더 널리 채택되면 –ig-size를 통해 훨씬 더 많은 이점을 얻을 수 있을 것입니다.

/* Set the background to red when the square container is small */
@container square style(--component-size: 1) {
  .square {
    background: red;
  }
}

요약

최고의 Angular UI 툴킷 및 관련 인사이트를 제공하기 위해 최선을 다하고 있으며, 더 많은 노하우, 새로운 기능, 향상된 성능 및 향상된 안정성을 제공하는 것이 목표입니다. 매우 중요한 최신 Pivot Grid 외에도 Angular Data Grid와 같은 다른 구성 요소도 매우 중요하다는 것을 알고 있습니다. 그렇기 때문에 모든 기능을 갖춘 Angular UI 그리드를 처음부터 만드는 방법을 배우는 데 도움이 되는 유용한 Angular UI 데이터 그리드 자습서를 게시했습니다. 가서 시청하세요.

또한 전체 설계-코드 프로세스를 더욱 가속화하는 것을 목표로 최고의 클라우드 기반 로우 코드 플랫폼인 App Builder (TM)를 지속적으로 개발하고 있습니다. Sketch 또는 Figma 디자인 파일을 실제 UI 구성 요소에 매핑하여 Angular, Blazor 또는 Web Components 프로덕션 준비 코드를 생성합니다.

​Ignite UI for Angular GitHub 리포지토리를 통해 여러분과 같은 사용자의 요청 덕분에 일부 개선 사항이 추가되었습니다. 이를 염두에 두고 우리는 항상 제안과 피드백에 열려 있습니다 – 이를 통해 우리는 성장하고 귀하의 개발 요구에 더 잘 대응할 수 있습니다.

마지막으로, 다음 목표에 대한 투명성과 가시성 또한 매우 중요하다는 것을 알고 있습니다. 그렇기 때문에 로드맵을 항상 최신 상태로 유지합니다.

또한

​Medium의 Ignite UI for Angular 팔로우하여 최신 정보를 얻고 현재 진행 중인 최신 Angular 관련 프로젝트에 대해 알아보세요. GitHub에서 별을 제공하고 문제 섹션에서 우려 사항, 질문 또는 기능 요청을 해결하여 제품을 계속 개선할 수 있도록 도와주세요.