새로운 기능: Web Components Tile Manager

새로운 기능: Web Components Tile Manager

사용하는 구성 요소로 궁극적인 앱 개발, 유연성 및 민첩성을 보장하는 것이 중요합니다. 그래서 Ignite UI for Web Components 도구 상자에 새로운 구성 요소인 Tile Manager를 추가했습니다. 속성을 확인하고 사용 방법을 확인하십시오.

5min read

이 Ignite UI for Web Components 5.3 릴리스에는 민첩성과 최적의 사용자 경험을 보장하는 기능을 갖춘 새로운 시간 절약 구성 요소인 Tile Manager가 도입되었습니다. 이 블로그 게시물에서는 작동 방식을 설명하고 크기 조정, 재정렬, 직렬화 등과 같은 기능을 살펴봅니다.

Web Components Tile Manager 컴포넌트

​Web Components 타일 관리자 컴포넌트는 개별 타일에 콘텐츠를 표시하는 UI를 제공합니다. 이를 통해 사용자는 타일을 재정렬하고 크기를 조정하여 타일과 상호 작용할 수 있습니다. 기본 설정에 따라 콘텐츠의 레이아웃과 모양을 사용자 지정할 수 있는 자유는 Dock Manager 구성 요소 에서만 일치할 수 있습니다. 이러한 유연성은 콘텐츠를 보다 개인화되고 효율적인 방식으로 보고 관리할 수 있도록 하여 사용자 환경을 향상시킵니다.

타일 매니저의 속성

열과 행

As a user, you can define the number of grid columns for Web Components Tile Manager. To do this, simply set the column-count property to the desired number of columns.

Gap

The Gap property defines the space between tiles. The value of the gap property must be a number followed by a length unit (e.g., px, rem, em, …). This value will apply to both the horizontal gap (width) and the vertical gap (height) between tiles.

최소 너비 및 높이

Are properties for setting the minimum width of the columns (min-column-width) and the minimum height of the rows (min-row-height) in the Tile Manager. Similar to the gap property, the values for these properties must be a number followed by a length unit.

크기 조정

타일 관리자의 크기 조정은 세 가지 다른 크기 조정 표시기를 사용하여 타일 크기를 조정할 수 있는 기능입니다.

  • Side Adorner: 열 범위를 수정하여 너비를 조정합니다.
  • 아래쪽 표시기: 행 범위를 수정하여 높이를 조정합니다.
  • 모서리 표시기: 너비와 높이를 동시에 조정합니다.

재주문

You can reorder tiles in the Tile Manager using the drag-and-drop feature. By default, tiles are not draggable. To enable this functionality, set the drag-mode property on the Tile Manager to either tile or tile-header.

  • With the tile option, you can click and hold anywhere on an individual tile to start dragging it.
  • With the tile-header option, you can only click and hold in the tile’s header section to start the dragging process.

직렬화

Web Components Tile Manager는 타일 레이아웃을 관리하는 데 도움이 되는 메서드를 제공합니다.

  • The saveLayout method allows you to save the current arrangement of tiles in the Tile Manager. It captures the current order, size, and position of all tiles so you can restore them to this exact configuration later.
  • The loadLayout method enables you to load a previously saved layout. When called, it restores the tiles to the exact state they were in when the layout was saved, including their order, size, and position.

스타일링

You can also customize the appearance of the two components – Tile Manager and Tile. The Tile Manager exposes only one CSS property – base which can be used for styling the base wrapper of the Tile Manager. The Tile component exposes several CSS properties that you can use.

Tile 구성 요소의 속성

Web Components Tile 구성 요소에는 각 타일에 대해 개별적으로 설정할 수 있는 속성이 있습니다. 이러한 속성 중 일부는 다음과 같습니다.

  • The col-span property specifies how many columns the tile will span across in the layout, allowing you to control its horizontal size.
  • The row-span property determines how many rows the tile will span vertically, adjusting the tile’s height within the layout.
  • The col-start property specifies the starting column where the tile is placed.
  • The row-start property specifies the starting row where the tile is placed.
  • The disable-fullscreen property hides the default fullscreen action button.
  • The disable-maximize property hides the default maximize toggle action button.
  • The disable-resize property prevents the tile from being resized by the user.

Ignite UI for Web Components 5.3.0 변경 내역

​여기에서 모든 세부 정보를 살펴보세요.

Added

  • 타일 관리자 구성 요소 #1402
  • List
    • The igc-list-item component exposes a new selected property. When set on a list item, the item will become visually highlighted #1590

변경

  • Progressbar
    • Use theme schemas #1582

Fixed

  • Calendar
    • Fluent 및 Bootstrap 테마의 일 행 높이 #1597
    • Material 및 Indigo 테마에 대한 범위 미리보기에서 날짜 텍스트 색상을 사용할 수 없습니다.#1595
  • Chip
    • 향상된 반응형 레이아웃 스타일 #1588
  • Combo
    • 토글 단추의 시각적 상태가 개선되었습니다.#1580

요약하자면...

호환성을 위해 매끄럽게 제작된 Ignite UI for Angular는 최신 기술과 주요 릴리스의 기능을 활용할 수 있도록 지원하는 라이브러리입니다. 최고의 Angular UI 툴킷 및 관련 인사이트를 제공하기 위해 최선을 다하고 있으며, 더 많은 노하우, 새로운 기능, 향상된 성능 및 향상된 안정성을 제공하는 것이 목표입니다. Ignite UI for Web Components GitHub 리포지토리를 통해 여러분과 같은 사용자의 요청 덕분에 일부 개선 사항이 추가되었습니다. 이를 염두에 두고 우리는 항상 제안과 피드백에 열려 있습니다 – 이를 통해 우리는 성장하고 귀하의 개발 요구에 더 잘 대응할 수 있습니다.

자세한 내용이 필요한 경우 다음을 확인하는 것이 좋습니다.

또한

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

Web Components
데모 요청