새로운 기능: 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 구성 요소 에서만 일치할 수 있습니다. 이러한 유연성은 콘텐츠를 보다 개인화되고 효율적인 방식으로 보고 관리할 수 있도록 하여 사용자 환경을 향상시킵니다.

타일 매니저의 속성

열과 행

사용자는 Tile Manager에 대한 그리드 열의 수를 정의할 Web Components. 이렇게 하려면 속성을 원하는 열 수로 설정 column-count 하기만 하면 됩니다.

Gap

Gap 속성은 타일 사이의 공간을 정의합니다. 속성의 값은 gap 숫자 뒤에 길이 단위가 오는 것이어야 합니다(예: px, rem, em, ...). 이 값은 타일 사이의 수평 간격(너비)과 수직 간격(높이) 모두에 적용됩니다.

최소 너비 및 높이

Tile Manager에서 열()의 최소 너비와 min-column-width 행(min-row-height)의 최소 높이를 설정하기 위한 속성입니다. gap 속성과 마찬가지로 이러한 속성의 값은 숫자 뒤에 길이 단위가 와야 합니다.

크기 조정

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

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

재주문

드래그 앤 드롭 기능을 사용하여 Tile Manager에서 타일을 재정렬할 수 있습니다. 기본적으로 타일은 드래그할 수 없습니다. 이 기능을 활성화하려면 Tile Manager의 속성을 or tile-header 중 하나로 tile 설정합니다 drag-mode.

  • 이 tile 옵션을 사용하면 개별 타일의 아무 곳이나 길게 클릭하여 드래그를 시작할 수 있습니다.
  • 이 tile-header 옵션을 사용하면 타일의 헤더 섹션을 길게 클릭하여 드래그 프로세스를 시작할 수 있습니다.

직렬화

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

  • 이 saveLayout 방법을 사용하면 Tile Manager에서 타일의 현재 배열을 저장할 수 있습니다. 모든 타일의 현재 순서, 크기 및 위치를 캡처하므로 나중에 이 정확한 구성으로 복원할 수 있습니다.
  • 이 loadLayout 방법을 사용하면 이전에 저장된 레이아웃을 로드할 수 있습니다. 호출되면 타일을 순서, 크기 및 위치를 포함하여 레이아웃이 저장되었을 때의 정확한 상태로 복원합니다.

스타일링

또한 두 구성 요소의 Tile Manager 모양을 사용자 지정할 수 있습니다 Tile. Tile Tile Manager Manager의 기본 래퍼 스타일을 지정하는 데 사용할 수 있는 CSS 속성을 base 하나만 노출합니다. Tile 구성 요소는 사용할 수 있는 여러 CSS 속성을 노출합니다.

Tile 구성 요소의 속성

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

  • 이 col-span 속성은 타일이 레이아웃에서 가로지르는 열 수를 지정하여 가로 크기를 제어할 수 있도록 합니다.
  • 이 row-span 속성은 타일이 세로로 확장되는 행 수를 결정하여 레이아웃 내에서 타일의 높이를 조정합니다.
  • 이 col-start 속성은 타일이 배치되는 시작 열을 지정합니다.
  • 이 row-start 속성은 타일이 배치되는 시작 행을 지정합니다.
  • 이 disable-fullscreen 속성은 기본 전체 화면 작업 버튼을 숨깁니다.
  • 이 disable-maximize 속성은 기본 최대화 토글 작업 단추를 숨깁니다.
  • 이 disable-resize 속성은 사용자가 타일의 크기를 조정하지 못하도록 합니다.

Ignite UI for Web Components 5.3.0 변경 내역

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

Added

  • 타일 관리자 구성 요소 #1402
  • List
    • 구성 요소가 igc-list-item 새 selected 속성을 노출합니다. 목록 항목에 설정하면 항목이 시각적으로 강조 표시됩니다.#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
데모 요청