Gerente de muelle
El componente Ignite UI Dock Manager proporciona medios para administrar el diseño de su aplicación a través de paneles, lo que permite a sus usuarios finales personalizarla aún más fijando, cambiando el tamaño, moviendo y ocultando paneles.
Angular Dock Manager Example
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { DockManagerComponent } from "./dock-manager-sample/dock-manager.component" ;
import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core" ;
import { defineCustomElements } from 'igniteui-dockmanager/loader' ;
defineCustomElements();
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
DockManagerComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule
],
providers : [],
schemas : [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}
ts コピー import { Component} from '@angular/core' ;
import { IgcDockManagerLayout,
IgcDockManagerPaneType,
IgcSplitPaneOrientation } from 'igniteui-dockmanager' ;
@Component ({
selector : 'app-dock-manager' ,
styleUrls : ['./dock-manager.component.scss' ],
templateUrl : './dock-manager.component.html'
})
export class DockManagerComponent {
public layout: IgcDockManagerLayout = {
rootPane : {
type : IgcDockManagerPaneType.splitPane,
orientation : IgcSplitPaneOrientation.horizontal,
panes : [
{
type : IgcDockManagerPaneType.splitPane,
orientation : IgcSplitPaneOrientation.vertical,
panes : [
{
type : IgcDockManagerPaneType.contentPane,
contentId : 'content1' ,
header : 'Content Pane 1'
},
{
type : IgcDockManagerPaneType.contentPane,
contentId : 'content2' ,
header : 'Unpinned Pane 1' ,
isPinned : false
}
]
},
{
type : IgcDockManagerPaneType.splitPane,
orientation : IgcSplitPaneOrientation.vertical,
size : 200 ,
panes : [
{
type : IgcDockManagerPaneType.documentHost,
size : 200 ,
rootPane : {
type : IgcDockManagerPaneType.splitPane,
orientation : IgcSplitPaneOrientation.horizontal,
allowEmpty : true ,
panes : [
{
type : IgcDockManagerPaneType.tabGroupPane,
panes : [
{
type : IgcDockManagerPaneType.contentPane,
header : 'Document 1' ,
contentId : 'content3' ,
documentOnly : true
},
{
type : IgcDockManagerPaneType.contentPane,
header : 'Document 2' ,
contentId : 'content4' ,
documentOnly : true
}
]
}
]
}
},
{
type : IgcDockManagerPaneType.contentPane,
contentId : 'content5' ,
header : 'Unpinned Pane 2' ,
isPinned : false
}
]
},
{
type : IgcDockManagerPaneType.splitPane,
orientation : IgcSplitPaneOrientation.vertical,
panes : [
{
type : IgcDockManagerPaneType.tabGroupPane,
size : 200 ,
panes : [
{
type : IgcDockManagerPaneType.contentPane,
contentId : 'content6' ,
header : 'Tab 1'
},
{
type : IgcDockManagerPaneType.contentPane,
contentId : 'content7' ,
header : 'Tab 2'
},
{
type : IgcDockManagerPaneType.contentPane,
contentId : 'content8' ,
header : 'Tab 3'
},
{
type : IgcDockManagerPaneType.contentPane,
contentId : 'content9' ,
header : 'Tab 4'
},
{
type : IgcDockManagerPaneType.contentPane,
contentId : 'content10' ,
header : 'Tab 5'
}
]
},
{
type : IgcDockManagerPaneType.contentPane,
contentId : 'content11' ,
header : 'Content Pane 2'
}
]
}
]
},
floatingPanes : [
{
type : IgcDockManagerPaneType.splitPane,
orientation : IgcSplitPaneOrientation.horizontal,
floatingHeight : 150 ,
floatingWidth : 250 ,
floatingLocation : { x : 300 , y : 200 },
panes : [
{
type : IgcDockManagerPaneType.contentPane,
contentId : 'content12' ,
header : 'Floating Pane'
}
]
}
]
};
}
ts コピー <igc-dockmanager [layout ]=layout style ="height: 600px;" >
<div slot ="content1" class ="dockManagerContent" > Content 1</div >
<div slot ="content2" class ="dockManagerContent" > Content 2</div >
<div slot ="content3" class ="dockManagerContent" > Content 3</div >
<div slot ="content4" class ="dockManagerContent" > Content 4</div >
<div slot ="content5" class ="dockManagerContent" > Content 5</div >
<div slot ="content6" class ="dockManagerContent" > Content 6</div >
<div slot ="content7" class ="dockManagerContent" > Content 7</div >
<div slot ="content8" class ="dockManagerContent" > Content 8</div >
<div slot ="content9" class ="dockManagerContent" > Content 9</div >
<div slot ="content10" class ="dockManagerContent" > Content 10</div >
<div slot ="content11" class ="dockManagerContent" > Content 11</div >
<div slot ="content12" class ="dockManagerContent" > Content 12</div >
</igc-dockmanager >
html コピー .dockManagerContent {
padding : 0.5rem ;
}
scss コピー
Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.
Usage
Dock Manager es un componente web estándar y, como tal, se puede utilizar en una aplicación Angular.
Siga los pasos a continuación para agregar el paquete Dock Manager a su proyecto Angular y configurarlo para usar el componente.
Primero, instale el paquete igniteui-dockmanager
npm install igniteui-dockmanager
cmd
Luego, incluya el esquema CUSTOM_ELEMENTS_SCHEMA
en AppModule
:
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core' ;
@NgModule ({
...
schemas : [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}
typescript
A continuación, se debe llamar a la función defineCustomElements()
en el archivo 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();
typescript
Eso es todo, ahora está listo para usar el componente Dock Manager en una plantilla de componente Angular. Para hacerlo simplemente use su nombre de etiqueta:
<igc-dockmanager >
</igc-dockmanager >
html
Para obtener más información sobre el uso del componente Dock Manager, puede consultar este tema .
Para ver un ejemplo más avanzado del uso del componente Dock Manager con paneles que alojan varios componentes Ignite UI for Angular, consulte esta versión del ejemplo de análisis de datos .