Angular Tile Manager 개요

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

    Angular 타일 관리자 예제

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

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

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

    Ignite UI for Angular Tile Manager 시작하기

    Ignite UI Tile Manager는 표준 웹 구성 요소 이므로 Angular 애플리케이션에서 사용할 수 있습니다.

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

    npm install igniteui-webcomponents --save
cmd

    다음으로, 파일 또는 사용 IgcTileManager 중인 구성 요소.ts 파일에서 인수를 main.ts 사용하여 IgcTileManagerComponent 함수를 호출 defineCustomElements() 해야 합니다.

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

defineComponents(IgcTileManagerComponent);
ts

    또한 구성 요소의 구성에 스키마를 포함해야 CUSTOM_ELEMENTS_SCHEMA 합니다

    import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppComponent {
typescript

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

    용법

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

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

    • IgcTileComponent- 이 컴포넌트는 타일 매니저 내에 표시되는 개별 타일을 나타냅니다.
    • IgcTileManagerComponent- 모든 타일 구성 요소를 포함하는 기본 구성 요소로, 전체 타일 레이아웃의 컨테이너 역할을 합니다.
    <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 Angular에 대한 전체 소개는 시작 항목을 참조하십시오.

    Tile Manager 컴포넌트 사용에 대한 자세한 내용은이 주제를 참조하세요.