Gerenciador de docas

O componente Ignite UI Dock Manager fornece meios para gerenciar o layout do seu aplicativo por meio de painéis, permitindo que seus usuários finais o personalizem ainda mais fixando, redimensionando, movendo e ocultando painéis.

Angular Dock Manager Example

Usage

O Dock Manager é um componente web padrão e, como tal, pode ser usado em um aplicativo Angular.

Siga as etapas abaixo para adicionar o pacote Dock Manager ao seu projeto Angular e configurá-lo para usar o componente.

Primeiro, instale o pacote igniteui-dockmanager​

npm install igniteui-dockmanager

Em seguida, inclua o esquema CUSTOM_ELEMENTS_SCHEMA no AppModule:

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

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

Em seguida, deve-se chamar a função defineCustomElements() no arquivo main.ts:

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();

É isso, agora você está pronto para usar o componente Dock Manager em um template de componente Angular. Para fazer isso, basta usar seu nome de tag:

<igc-dockmanager>
</igc-dockmanager>

Para mais informações sobre o uso do componente Dock Manager, você pode conferir este tópico.

Para um exemplo mais avançado do uso do componente Dock Manager com painéis que hospedam vários componentes Ignite UI for Angular, consulte esta versão do exemplo de análise de dados.