Web Components Tile Manager 개요

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

    Web Components 타일 관리자 예제

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

    EXAMPLE
    TS
    HTML
    index.css
    layout.css
    Edit in:

    이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    iframe 권한 정책으로 인해 이 예제의 전체 화면 버튼은 오른쪽 상단 모서리에 있는 '전체 화면으로 확장' 버튼을 클릭하여 예제를 독립 실행형 모드로 열 때만 작동합니다.

    용법

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

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

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

    시작하기

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

    npm install igniteui-webcomponents
cmd

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

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

defineComponents(IgcTileManagerComponent);
ts

    이제 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>
html

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

    Ignite UI for Web Components | CTA 배너

    공들여 나열한 것

    열과 행

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

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

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

    간격

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

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

    최소 너비 및 높이

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

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

    예

    EXAMPLE
    TS
    HTML
    index.css
    layout.css
    Edit in:

    타일 구성 요소

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

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

    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.

    머리글 섹션 작업

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

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

    두 버튼 중 하나만 표시하려면 또는 disable-fullscreen 속성을 설정할 disable-maximize 수 있습니다. 모양을 사용자 지정하려면 최대화 단추 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>Content for Tile 1</p>
  </igc-tile>
</igc-tile-manager>
html

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

    EXAMPLE
    TS
    HTML
    index.css
    layout.css
    Edit in:

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

    크기 조정

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

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

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

    고스트 요소가 사용 가능한 그리드 공간을 초과하면 그리드 한계 내에서 가능한 가장 큰 스팬으로 자동 조정됩니다.

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

    이 resize-mode 속성을 사용하여 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>
html

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

    EXAMPLE
    TS
    HTML
    index.css
    layout.css
    Edit in:

    맞추기

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

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

    제한 사항

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

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

    재주문

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

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

    타일이 최대화 또는 전체 화면 상태일 때는 타일을 드래그할 수 없습니다.

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

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

    EXAMPLE
    TS
    HTML
    index.css
    layout.css
    Edit in:

    직렬화

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

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

    EXAMPLE
    TS
    HTML
    index.css
    layout.css
    Edit in:

    스타일링

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

    부품명 설명
    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);
}
css

    표시기의 아이콘을 , corner-adorner, 및 bottom-adorner slots를 사용하여 side-adorner 사용자 지정 아이콘으로 변경할 수도 있습니다. 이렇게 하려면 타일 요소 내에 요소를 만듭니다 igc-icon. 그런 다음 해당 슬롯을 세 개의 표시기 중 하나로 설정하고 사용할 아이콘의 이름을 지정합니다.

    <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>
html

    EXAMPLE
    TS
    HTML
    index.css
    layout.css
    styles.css
    Edit in:

    API 참조

    추가 리소스