Web Components Tile Manager 개요

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

Web Components Tile Manager Example

다음 Ignite UI for Web Components Tile Manager Example은 작동 중인 컴포넌트를 보여줍니다.

[!Warning] Due to the iframe permissions policy, the fullscreen button in this example will only work when the example is opened in standalone mode by clicking the 'Expand to fullscreen' button in the top-right corner.

Usage

기본 IgcTileManagerComponent 타일 레이아웃 동작을 제공하여 최대화 또는 일반 상태의 타일 배치를 관리합니다. 타일은 서로 독립적으로 크기를 조정할 수 있으며 복잡한 레이아웃을 형성하는 데 사용할 수 있습니다. 최종 사용자는 타일을 끌어다 놓아 순서를 변경할 수 있으므로 유연하고 직관적인 환경을 제공할 수 있습니다.

타일 매니저는 사용할 수 있는 두 가지 컴포넌트를 제공합니다.

• IgcTileComponent- 이 컴포넌트는 타일 매니저 내에 표시되는 개별 타일을 나타냅니다.
• IgcTileManagerComponent- 모든 타일 구성 요소를 포함하는 기본 구성 요소로, 전체 타일 레이아웃의 컨테이너 역할을 합니다.

시작하기

Tile Manager를 사용하려면 먼저 다음 명령을 실행하여 Ignite UI for Web Components 설치해야 합니다.

npm install igniteui-webcomponents

타일 매니저를 사용하기 전에 다음과 같이 가져와야 합니다.

import { defineComponents, IgcTileManagerComponent } from 'igniteui-webcomponents';

defineComponents(IgcTileManagerComponent);

이제 Web Components Tile Manager의 기본 구성부터 시작할 수 있습니다.

<igc-tile-manager>
  <igc-tile>
    <p>Tile 1</p>
  </igc-tile>
  <igc-tile>
    <p>Tile 2</p>
  </igc-tile>
  <igc-tile>
    <p>Tile 3</p>
  </igc-tile>
</igc-tile-manager>

Ignite UI for Web Components에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

Layout

Columns and Rows

Tile Manager의 그리드 열 수를 지정할 수 있습니다. 이렇게 하려면 속성을 원하는 열 수로 설정 columnCount 하기만 하면 됩니다. 숫자가 1보다 작거나 속성이 설정되지 않은 경우 타일 관리자는 각 열의 너비가 200px 이상이고 사용 가능한 공간을 균등하게 공유하도록 확장되는 가능한 한 많은 열을 만듭니다. 뷰포트 치수가 변경되면 공간 사용을 최대화하기 위해 타일도 재정렬됩니다.

<igc-tile-manager column-count="2">
  <igc-tile>
    <span slot="title">Tile 1 header</span>
    <p>Tile 1 Content</p>
  </igc-tile>
  <igc-tile>
    <span slot="title">Tile 2 header</span>
    <p>Tile 2 Content</p>
  </igc-tile>
  <igc-tile>
    <span slot="title">Tile 3 header</span>
    <p>Tile 3 Content</p>
  </igc-tile>
  ...
</igc-tile-manager>

이 코드 스니펫에서 타일 관리자의 3개 타일은 2개의 행과 2개의 열로 정렬됩니다.

Gap

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

<igc-tile-manager gap="20px">
  <igc-tile>
    <span slot="title">Tile 1 header</span>
    <p>Tile 1 Content</p>
  </igc-tile>
  <igc-tile>
    <span slot="title">Tile 2 header</span>
    <p>Tile 2 Content</p>
  </igc-tile>
  ...
</igc-tile-manager>

Minimum width and height

또한 Tile Manager에서 열()의 최소 너비와 minColumnWidth 행(minRowHeight)의 최소 높이를 설정하는 속성도 있습니다. gap 속성과 마찬가지로 이러한 속성의 값은 숫자 뒤에 길이 단위가 와야 합니다. 이 값은 Tile Manager에서 모든 열의 최소 너비와 모든 행의 최소 높이를 정의합니다.

<igc-tile-manager min-column-width="200px" min-row-height="150px">
  <igc-tile>
    <span slot="title">Tile 1 header</span>
    <p>Tile 1 Content</p>
  </igc-tile>
  <igc-tile>
    <span slot="title">Tile 2 header</span>
    <p>Tile 2 Content</p>
  </igc-tile>
  ...
</igc-tile-manager>

Example

Tile component

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

• 이 속성은 colSpan 타일이 레이아웃에서 가로지르는 열 수를 지정하여 가로 크기를 제어할 수 있습니다.
• 이 속성은 rowSpan 타일이 세로로 확장되는 행 수를 결정하여 레이아웃 내에서 타일의 높이를 조정합니다.
• 이 속성은 colStart 타일이 배치되는 시작 열을 지정합니다.
• 이 속성은 rowStart 타일이 배치되는 시작 행을 지정합니다.
• 이 속성은 disableFullscreen 기본 전체 화면 작업 단추를 숨깁니다.
• 이 속성은 disableMaximize 기본 최대화 토글 작업 단추를 숨깁니다.
• 이 속성은 disableResize 사용자가 타일의 크기를 조정하지 못하도록 합니다.

<igc-tile-manager>
  <igc-tile col-span="2" disable-resize>
    <span slot="title">Tile 1 header</span>
    <p>Tile 1 Content</p>
  </igc-tile>
  <igc-tile>
    <span slot="title">Tile 2 header</span>
    <p>Tile 2 Content</p>
  </igc-tile>
  ...
</igc-tile-manager>

Tile 컴포넌트는 또한 사용할 수 있는 여러 슬롯을 노출합니다.

슬롯 이름	설명
title	타일 헤더에 대한 콘텐츠입니다.
fullscreen-action	기본 전체 화면 작업 내용을 덮어씁니다.
maximize-action	Overwrite the default maximize action content.
actions	기본 작업 후에 렌더링된 사용자 지정 콘텐츠.
side-adorner	Overwrite the default horizontal resize adorner.
corner-adorner	Overwrite the default diagonal resize adorner.
bottom-adorner	Overwrite the default vertical resize adorner.

Header section actions

기본적으로 헤더 섹션에는 두 개의 작업 버튼이 포함되어 있습니다.

• 이 단추는 maximize 타일의 콘텐츠를 확대하여 타일 관리자의 전체 너비를 채우므로 콘텐츠를 더 넓게 볼 수 있습니다.
• 이 fullscreen 단추를 사용하면 타일을 사용자의 브라우저에서 전체 화면 모드로 열 수 있습니다.

두 버튼 중 하나만 표시하려면 또는 disableFullscreen 속성을 설정할 disableMaximize 수 있습니다. 모양을 사용자 지정하려면 최대화 단추 fullscreen-action에 슬롯을 사용하거나 전체 화면 단추에 슬롯을 사용할 maximize-action 수 있습니다.

<igc-tile-manager>
  <igc-tile disable-fullscreen>
    <igc-icon-button slot="maximize-actions" name="north_east" collection="material">
    </igc-icon-button>
    <p>Tile 1 Content</p>
  </igc-tile>
</igc-tile-manager>

또한 두 작업 버튼을 모두 비활성화하고 기본 설정에 따라 사용자 지정 버튼을 만들 수 있는 옵션도 있습니다.

이 예에서는 Ignite UI Icon Button 구성 요소를 사용하여 사용자 지정 작업 버튼을 만들었습니다.

Resizing

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

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

부드러운 크기 조정을 위해 타일의 크기를 직접 수정하는 대신 고스트 요소가 사용됩니다. 이 요소는 원래 타일 위에 나타나 크기 조정이 시작될 때 현재 크기를 표시하며 사용자가 크기 조정 핸들을 드래그하면 실시간으로 업데이트됩니다.

[!Note] If the ghost element exceeds the available grid space, it will automatically adjust to the largest possible span within the grid's limits.

Tile Manager는 타일의 크기가 변경될 때 자동으로 재정렬되어 빈 공간이 최소화되도록 합니다. 그렇기 때문에 타일을 확장하면 인접한 타일이 새로운 위치로 밀려날 수 있고, 축소하면 다른 타일이 동적으로 채울 수 있는 틈이 생깁니다. 이렇게 하면 Tile Manager가 겹치는 타일 없이 가능한 한 컴팩트하게 유지되고 모든 이동이 정의된 그리드 구조 내에서 유지됩니다.

이 resizeMode 속성을 사용하여 Tile Manager에서 크기 조정이 적용되는 방식을 제어할 수 있습니다. or로 none 설정할 수 있으며, hover​ ​always 이는 크기 조정 표시기가 표시되는 시기를 결정합니다. 기본값은 none 타일의 크기를 조정할 수 없습니다.

<igc-tile-manager resize-mode='hover'>
  <igc-tile>
    <p>Tile 1</p>
  </igc-tile>
  <igc-tile>
    <p>Tile 2</p>
  </igc-tile>
</igc-tile-manager>

아래 예에서 세 가지 상태의 차이점을 볼 수 있습니다.

Snapping

타일은 전체 그리드 단위로 크기가 조정되므로 전체 열 또는 행에 의해서만 확장되거나 축소될 수 있습니다. 고스트 요소는 중간 지점을 지나 확장될 때 다음 열 또는 행으로 스냅되고 중간 지점을 지나 축소될 때 이전 열 또는 행으로 스냅됩니다. 이는 모든 표시기(아래쪽, 측면 및 모서리)에 적용되어 타일이 항상 그리드에 정렬된 상태로 유지되도록 합니다.

그리드 간격도 고려하여 크기를 조정하는 동안 레이아웃을 일관되게 유지합니다.

Limitations

크기 조정 프로세스에는 몇 가지 제약 조건과 제한 사항이 있습니다.

• 바둑판식 배열은 정의된 최소 너비 또는 높이(minColumnWidth,) minRowHeight 보다 작게 크기를 조정할 수 없습니다.
• 바둑판식 배열은 그리드에서 사용 가능한 최대 가로 공간을 초과할 수 없습니다.

Reorder

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

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

[!Note] While the tile is in maximized or fullscreen state, the tile cannot be dragged.

크기 조정과 유사하게, 드래그 앤 드롭 프로세스를 시작하면 잡은 타일 아래에 고스트 요소가 나타납니다. 타일을 드래그하면 고스트 요소가 함께 이동하여 다른 타일의 순서를 실시간으로 동적으로 변경합니다. 이렇게 하면 타일을 놓을 때 타일 그리드가 어떻게 보이는지 미리 볼 수 있습니다.

<igc-tile-manager drag-mode="tile-header">
  <igc-tile>
    <span slot="title">Tile 1 header</span>
    <p>Tile 1 Content</p>
  </igc-tile>
  <igc-tile>
    <span slot="title">Tile 2 header</span>
    <p>Tile 2 Content</p>
  </igc-tile>
</igc-tile-manager>

Serialization

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

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

Styling

두 구성 요소의 IgcTileManagerComponent 모양을 사용자 지정할 수도 있습니다 IgcTileComponent. IgcTileManagerComponent Tile Manager의 기본 래퍼 스타일을 지정하는 데 사용할 수 있는 CSS 속성이 base 하나만 노출됩니다. 사용할 수 있는 몇 가지 CSS 속성을 노출합니다 IgcTileComponent.

부품명	설명
base	타일 구성 요소의 래핑 컨테이너입니다.
header	title 및 actions 부분을 포함하는 타일의 헤더 컨테이너입니다.
title	제목 컨테이너입니다.
actions	actions 컨테이너입니다.
content-container	타일 기본 슬롯을 래핑하는 컨테이너입니다.
trigger-side	The horizontal adorner.
trigger	The diagonal adorner
trigger-bottom	The vertical adorner.

이러한 CSS 부분을 사용하여 다음과 같이 두 구성 요소의 모양을 사용자 지정할 수 있습니다.

igc-tile-manager::part(base) {
  background-color: var(--ig-surface-900);
}

igc-tile::part(content-container) {
  color: var(--ig-secondary-200);
}

igc-tile::part(header) {
  background-color: var(--ig-gray-300);
}

igc-tile::part(title) {
  color: var(--ig-primary-400);
}

igc-tile:nth-child(n+2)::part(trigger-side), 
igc-tile:nth-child(n+2)::part(trigger-bottom) {
  background-color: var(--ig-success-500);
}

igc-tile:nth-child(n+2)::part(trigger) {
  background-color: var(--ig-error-500);
}

표시기의 아이콘을 , corner-adorner, 및 bottom-adorner slots를 사용하여 side-adorner 사용자 지정 아이콘으로 변경할 수도 있습니다. 예컨대:

<igc-tile>
  <igc-icon slot="side-adorner" class="side" name="indicator"></igc-icon>
  <igc-icon slot="corner-adorner" class="corner" name="indicator"></igc-icon>
  <igc-icon slot="bottom-adorner" class="bottom" name="indicator"></igc-icon>
  <span slot="title">Tile header</span>
</igc-tile>

API Reference

• IgcTileManagerComponent
• IgcTileComponent
• Styling & Themes

Additional Resources

• IgcTileComponent
• IgcTileManagerComponent
• Ignite UI for Web Components 포럼
• ​GitHub Ignite UI for Web Components