도크 관리자

    Ignite UI Dock Manager 구성 요소는 창을 통해 애플리케이션의 레이아웃을 관리하는 수단을 제공하며, 최종 사용자는 창을 고정, 크기 조정, 이동 및 숨기는 등 애플리케이션을 추가로 사용자 정의할 수 있습니다.

    Angular Dock 관리자 예제

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

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

    용법

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

    아래 단계에 따라 Angular 프로젝트에 Dock Manager 패키지를 추가하고 해당 구성 요소를 사용하도록 설정하세요.

    먼저 igniteui-dockmanager 패키지를 설치합니다.

    npm install igniteui-dockmanager
cmd

    그런 다음 AppModule에 CUSTOM_ELEMENTS_SCHEMA 스키마를 포함합니다.

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

@NgModule({
    ...
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}
typescript

    다음으로, main.ts 파일에서 defineCustomElements() 함수를 호출해야 합니다:

    import { AppModule } from './app/app.module';
import { defineCustomElements } from 'igniteui-dockmanager/loader';
import { enableProdMode } from '@angular/core';
import { environment } from '.environments/environment';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

if (environment.production) {
    enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.log(err));

defineCustomElements();
typescript

    이제 Angular 구성 요소 템플릿에서 Dock Manager 구성 요소를 사용할 준비가 되었습니다. 그렇게 하려면 태그 이름을 사용하면 됩니다.

    <igc-dockmanager>
</igc-dockmanager>
html

    Dock Manager 구성 요소 사용에 대한 자세한 내용은이 항목을 확인하세요.

    다양한 Ignite UI for Angular 구성 요소를 호스팅하는 창에서 Dock Manager 구성 요소를 사용하는 고급 예제는이 버전의 데이터 분석 샘플을 참조하세요.