Descripción general de Web Components Dock Manager

El Infragistics Web Components Dock Manager proporciona un medio para administrar el diseño de su aplicación a través de paneles, lo que permite a sus usuarios finales personalizarlo aún más anclando, cambiando el tamaño, moviendo, maximizando y ocultando paneles.

Web Components Dock Manager Example

Este ejemplo muestra la mayoría de las funcionalidades y opcionesIgcDockManagerComponent de acoplamiento que puedes usar en tu aplicación.

Para instalar el paquete Dock Manager ejecute el siguiente comando:

npm install --save igniteui-dockmanager

Luego es necesario importar y llamar a la función defineCustomElements():

import { defineCustomElements } from 'igniteui-dockmanager/loader';

defineCustomElements();

Usage

Una vez importado el Dock Manager, puedes agregarlo en la página:

<igc-dockmanager id="dockManager">
</igc-dockmanager>

[!Note] Since the Dock Manager component uses ShadowDOM and slots it is not supported on older browsers like Internet Explorer 11 and Edge 18 and below (non-Chromium versions).

The Dock Manager has a layout property, which describes the layout of the panes. To start defining a layout, you should set the rootPane property and add child panes. Here is how you can define a layout with a single content pane:

import { IgcDockManagerPaneType, IgcSplitPaneOrientation, IgcDockManagerComponent } from 'igniteui-dockmanager';

// ...

this.dockManager = document.getElementById("dockManager") as IgcDockManagerComponent;
this.dockManager.layout = {
    rootPane: {
        type: IgcDockManagerPaneType.splitPane,
        orientation: IgcSplitPaneOrientation.horizontal,
        panes: [
            {
                type: IgcDockManagerPaneType.contentPane,
                contentId: 'content1',
                header: 'Pane 1'
            }
        ]
    }
};

To load the content of the panes, the Dock Manager uses slots. The slot attribute of the content element should match the contentId of the content pane in the layout configuration. It is highly recommended to set width and height of the content elements to 100% for predictable response when the end-user is resizing panes.

<igc-dockmanager id="dockManager">
    <div slot="content1" style="width: 100%; height: 100%;">Content 1</div>
</igc-dockmanager>

El Dock Manager define varios tipos de paneles:

Each type of pane has a size property. Depending on the parent orientation the size may affect either the width or the height of the pane. By default, the size of a pane is relative to the sizes of its sibling panes and defaults to 100. If you have two sibling panes, where the first one has its size set to 200 and the second one - size set to 100, the first will be twice the size of the second one and these two panes would fill up all the available space. If the absolute size of their parent is 900px, they will be sized to 600px and 300px respectively. If, for certain panes, you want to specify their sizes in pixels, instead of relying on the relative distribution of all the available space, you should set the useFixedSize of the parent split pane.

Para más información sobre esto, consulta el tema Modo de Tamaño Fijo de Paneles Divididos.

El usuario final puede realizar las siguientes acciones para personalizar el diseño en tiempo de ejecución:

Anclar/desanclar un panel
Cambiar el tamaño de un panel
Cerrar un panel
Arrastre un panel para hacerlo flotar
Mover un panel flotante
Acoplar un panel flotante
Maximizar un panel

All of these are reflected in the layout property of the Dock Manager.

Content Pane

The IgcContentPane represents a pane with header and content. It can be hosted inside a Split Pane or a Tab Group Pane. Here is how a content pane is defined:

const contentPane: IgcContentPane = {
    type: IgcDockManagerPaneType.contentPane,
    contentId: 'content1',
    header: 'Pane 1'
}

The header property is used to provide a text header for the content pane. This text is rendered at several places: the top content pane header, the tab header if the pane is in a tab group and the unpinned header if the pane is unpinned. You can provide a custom slot content for each of these places respectively using the headerId, tabHeaderId and unpinnedHeaderId properties. If any of these properties is not set, the header text is used. Here is how to provide a tab header slot content:

<igc-dockmanager id="dockManager">
    <div slot="content1" style="width: 100%; height: 100%;">Content 1</div>
    <span slot="tabHeader1">Pane 1 Tab</span>
</igc-dockmanager>

const contentPane: IgcContentPane = {
    type: IgcDockManagerPaneType.contentPane,
    contentId: 'content1',
    header: 'Pane 1',
    tabHeaderId: 'tabHeader1'
}

When a pane is unpinned, it appears as a tab header at one of the edges of the Dock Manager. If the end-user selects it, its content appears over the docked pinned panes. To unpin a content pane, set its isPinned property to false.

const contentPane = {
    type: IgcDockManagerPaneType.contentPane,
    contentId: 'content1',
    header: 'Pane 1',
    isPinned: false
}

The isPinned property affects only content panes that are docked outside a document host. Also, content panes hosted in a floating pane cannot be unpinned.

By default, the unpin destination for a content pane is calculated automatically based on the location of the pane relative to the document host. When more than one document host is defined, the nearest one in the parent hierarchy of the unpinned content pane will be used. If there is no document host defined, the default location is used - Left. It is also possible to set the desired destination of the unpinned pane by using the unpinnedLocation property.

You can configure which end-user operations are allowed for a content pane using its allowClose, allowPinning, allowDocking and allowFloating properties.

When defining a content pane, you can set the documentOnly property to true so the pane can be docked only in a document host.

To restrict the user interaction with the content pane and its content, you can set the disabled property to true. This will prevent all user interactions with the pane unless it is a single floating pane. The latter could be moved, maximized or closed (according to the pane's settings for maximizing and closing), so the user can have a look at the elements under it but will not be able to interact with its content.

By default, when you close a pane it gets removed from the layout object. However, in some cases you would want to temporary hide the pane and show it later again. In order to do that without changing the layout object you can use the hidden property of the content pane. Setting the property to true will hide it from the UI, but it will remain in the layout object. In order to override the default close behavior you can subscribe to the PaneClose event like this:

this.dockManager.addEventListener('paneClose', ev => {
    for (const pane of ev.detail.panes) {
        pane.hidden = true;
    }
    ev.preventDefault();
});

Split Pane

The IgcSplitPane is a container pane which stacks all of its child panes horizontally or vertically based on its orientation property. Here is how a horizontal split pane with two child content panes is defined:

const splitPane: IgcSplitPane = {
    type: IgcDockManagerPaneType.splitPane,
    orientation: IgcSplitPaneOrientation.horizontal,
    panes: [
        {
            type: IgcDockManagerPaneType.contentPane,
            contentId: 'content1',
            header: 'Pane 1'
        },
        {
            type: IgcDockManagerPaneType.contentPane,
            contentId: 'content2',
            header: 'Pane 2'
        }
    ]
}

El panel dividido puede contener paneles secundarios de todos los tipos de paneles, incluidos otros paneles divididos.

By default, if the split pane is empty it is not displayed. Yet if you would like to change that behavior you can set its allowEmpty property to true and the split pane will be presented in the UI even when there is no panes inside it.

Tab Group Pane

The IgcTabGroupPane displays its child content panes as the tabs of a tab component. Here is how a tab group pane with a content pane for each of its two tabs is defined:

const tabGroupPane: IgcTabGroupPane = {
    type: IgcDockManagerPaneType.tabGroupPane,
    panes: [
        {
            type: IgcDockManagerPaneType.contentPane,
            contentId: 'content1',
            header: 'Pane 1'
        },
        {
            type: IgcDockManagerPaneType.contentPane,
            contentId: 'content2',
            header: 'Pane 2'
        }
    ]
}

Si no hay suficiente espacio para mostrar todos los encabezados de pestañas, el grupo de pestañas muestra el menú Más pestañas, que contiene las pestañas no visibles. Si hace clic en un elemento de pestaña en ese menú, la pestaña se selecciona y se mueve a la primera posición.

Las pestañas también se pueden reordenar sin separarlas del grupo de pestañas en el que se encuentran. Puede hacer clic en una pestaña de su elección y arrastrarla hacia la izquierda o hacia la derecha hasta la posición que desee. Si arrastra la pestaña seleccionada fuera del área de pestañas, se separará en un panel flotante.

In case you would like the tab group pane to be displayed in the UI when it has no tabs, you can set the allowEmpty property to true.

Document Host

The IgcDocumentHost is an area of tabs for documents, similar to the one in Visual Studio for code editing and design view. Here is how to define a document host with two document tabs:

const docHost: IgcDocumentHost = {
    type: IgcDockManagerPaneType.documentHost,
    rootPane: {
        type: IgcDockManagerPaneType.splitPane,
        orientation: IgcSplitPaneOrientation.horizontal,
        panes: [
            {
                type: IgcDockManagerPaneType.tabGroupPane,
                panes: [
                    {
                        type: IgcDockManagerPaneType.contentPane,
                        contentId: 'content1',
                        header: 'Grid'
                    },
                    {
                        type: IgcDockManagerPaneType.contentPane,
                        contentId: 'content4',
                        header: "List"
                    }
                ]
            }
        ]
    }
}

Floating Pane

The floating pane is a split pane rendered above all other ones in a floating window. The floating pane definitions are stored in the floatingPanes property of the layout. Here is how to add a floating pane with a single content pane inside:

const layout: IgcDockManagerLayout = {
    rootPane: {
        // ...
    },
    floatingPanes: [
        {
            type: IgcDockManagerPaneType.splitPane,
            orientation: IgcSplitPaneOrientation.horizontal,
            floatingLocation: { x: 80, y: 80 },
            floatingWidth: 200,
            floatingHeight: 150,
            floatingResizable: true,
            panes: [
                {
                    type: IgcDockManagerPaneType.contentPane,
                    contentId: 'content1',
                    header: 'Floating Pane 1'
                }
            ]
        }
    ]
};

The floatingLocation, floatingWidth and floatingHeight properties represent absolute dimensions in pixels. Please note that these properties are applied only for the split panes in the floatingPanes array.

With the floatingResizable and allowFloatingPanesResize you can set whether resizing floating panes is allowed. The allowFloatingPanesResize is an IgcDockManagerComponent property, so if the value is set to false none of the floating panes can be resized. The floatingResizable property can be applied separately on each split pane in the floatingPanes array and if the property value is not set, it defaults to the value of the allowFloatingPanesResize property. If the floatingResizable property is set for a specific pane, its value takes precedence over the allowFloatingPanesResize property value.

Active Pane

The Dock Manager component highlights the content pane which contains the focus and exposes it in its activePane property. You can programmatically change the active pane by setting the property. You can also listen for changes of the activePane property by subscribing to the ActivePaneChanged event:

this.dockManager.addEventListener('activePaneChanged', ev => {
    console.log(ev.detail.oldPane);
    console.log(ev.detail.newPane);
});

Docking

Al empezar a arrastrar un panel flotante, aparecerán diferentes indicadores de acoplamiento en función de la posición del panel arrastrado. Hay cuatro tipos principales de acoplamiento: acoplamiento raíz, acoplamiento de paneles, acoplamiento de host de documentos y acoplamiento de divisores.

Acoplamiento de raíz

In this type of docking while dragging a pane, four arrow docking indicators will appear close to the four edges of the dock manager. Once released, the dragged pane will become a direct child of the Dock Manager's rootPane. Visually, the newly docked pane will snap into place at the respective edge and occupy up to half of the dock manager's width or height, shifting all the other content to the other half.

Acoplamiento de paneles

Los indicadores de acoplamiento aparecerán en el centro de un panel de contenido o en un panel de grupo de pestañas al arrastrar el panel flotante sobre él. Una vez soltado, el panel arrastrado se ajustará en su lugar en cualquier lado del panel de destino o se agrupará con el panel de destino para crear un diseño con pestañas. En función de la combinación del diseño inicial y la posición de acoplamiento, la operación de acoplamiento puede provocar la creación dinámica de un nuevo panel de división o grupo de pestañas que se convertiría en el nuevo elemento primario de los paneles arrastrado y de destino.

Acoplamiento de host de documentos

Si el panel arrastrado está sobre un host de documento, aparecerán indicadores de acoplamiento adicionales que permitirán el acoplamiento en relación con el panel de destino o con todo el host del documento.

Acoplamiento de divisor

While dragging a floating pane, if the cursor of the mouse is close to any splitter, a docking indicator will appear over it. If the dragged pane is docked it will become a child of the split pane that has the targeted splitter. Splitter docking can be disabled by setting the Dock Manager allowSplitterDock property to false.

Update Layout

En algunos escenarios, es posible que necesites personalizar el diseño del Dock Manager agregando o eliminando un panel, cambiando la orientación, etc., por ejemplo:

const splitPane = this.dockManager.layout.rootPane.panes[0] as IgcSplitPane;
const contentPane = splitPane.panes[0] as IgcContentPane;
this.dockManager.removePane(contentPane);

Esto solo actualizará el objeto de diseño. Para activar una actualización del Dock Manager para que los cambios se reflejen en la interfaz de usuario, se debe reasignar el objeto de diseño:

this.dockManager.layout = { ...this.dockManager.layout };

Save/Load Layout

To restore or persist a layout, you simply have to get/set the value of the layout property. Here is how to save the layout as a stringified JSON:

private savedLayout: string;

private saveLayout() {
    this.savedLayout = JSON.stringify(this.dockManager.layout);
}

private loadLayout() {
    this.dockManager.layout = JSON.parse(this.savedLayout);
}

Adding Panes At Runtime

Contents and panes can be added to the layout at runtime. In the example below, you can see how you can add content, document and floating panes.

Eventos

El componente Dock Manager genera eventos cuando se realizan interacciones específicas con el usuario final, por ejemplo cerrar, fijar, redimensionar y arrastrar un panel. Puedes encontrar la lista completa de eventos de Dock Manager en este tema.

Here is how to add an event listener for the PaneClose event:

this.dockManager.addEventListener('paneClose', ev => console.log(ev.detail));

Personalización

El componente Dock Manager ofrece la opción de personalizar todos los botones mediante ranuras y piezas. Para cambiar cualquiera de los botones simplemente tienes que definir tu propio elemento dentro del Dock Manager y establecer el atributo de ranura en el identificador correspondiente.

Utilicemos estas ranuras y piezas para crear un diseño personalizado del Dock Manager. Primero, proporcionaremos nuestros propios iconos, usando lascloseButtonmaximizeButtonminimizeButtonpinButton ranuras yunpinButton slot:

<igc-dockmanager id="dockManager">
    <div slot="content1" class="dockManagerContent">Content 1</div>
    <div slot="content2" class="dockManagerContent">Content 2</div>
    <div slot="content3" class="dockManagerContent">Content 3</div>
    <!-- ... -->

    <button slot="closeButton">x</button>

    <button slot="maximizeButton">
        <img src="https://www.svgrepo.com/show/419558/arrow-top-chevron-chevron-top.svg" alt="arrow-top-chevron-chevron-top" />
    </button>

    <button slot="minimizeButton">
        <img src="https://www.svgrepo.com/show/419557/bottom-chevron-chevron-down.svg" alt="bottom-chevron-chevron-down" />
    </button>

    <button slot="pinButton">
        <img src="https://www.svgrepo.com/show/154123/pin.svg" alt="pin" />
    </button>

    <button slot="unpinButton">
        <img src="https://www.svgrepo.com/show/154123/pin.svg" alt="pin" />
    </button>
</igc-dockmanager>

Luego, usaremos las partes expuestas en nuestra hoja de estilo. De esta manera tenemos control total del estilo del componente:

igc-dockmanager::part(unpinned-tab-area) {
    background: #bee9ec;
}

igc-dockmanager::part(unpinned-tab-area--left) {
    border-right: 1px dashed #004d7a;
}

igc-dockmanager::part(unpinned-tab-area--bottom) {
    border-top: 1px dashed #004d7a;
}

igc-dockmanager::part(tab-header-close-button),
igc-dockmanager::part(pane-header-close-button) {
    background-color: #e73c7e;
}

igc-dockmanager::part(pane-header-pin-button),
igc-dockmanager::part(pane-header-unpin-button) {
  background: rgb(218, 218, 218);
  border: none;
  width: 24px;
  height: 24px;
  color: #fff;
}

igc-dockmanager::part(tabs-maximize-button),
igc-dockmanager::part(tabs-minimize-button),
igc-dockmanager::part(pane-header-minimize-button),
igc-dockmanager::part(pane-header-maximize-button) {
  width: 24px;
  height: 24px;
  border: none;
  transition: opacity 250ms ease-in-out;
  opacity: 0.3;
  margin-right: 15px;
  margin-top: -5px;
  margin-left: 0px;
}

Si todo ha ido bien, ahora deberíamos tener un DockManager con iconos y área de pestañas personalizados. Echemos un vistazo:

A continuación puede encontrar una lista que contiene los nombres de las ranuras para todos los botones, así como el mango divisor:

Nombre de la ranura	Descripción
`closeButton`	Los botones de cierre.
`paneHeaderCloseButton`	Los botones de cierre de los encabezados del panel.
`tabHeaderCloseButton`	Los botones de cierre de los encabezados de las pestañas.
`moreTabsButton`	Cuantos más botones de pestañas.
`moreOptionsButton`	Los botones de más opciones.
`maximizeButton`	Los botones de maximizar.
`minimizeButton`	Los botones de minimizar.
`pinButton`	Los botones de alfiler.
`unpinButton`	Los botones para desanclar.
`splitterHandle`	El mango divisor.

Puede encontrar la parte correspondiente a cada ranura en las Partes CSS en la sección Estilo de esta página.

CSS Variables

La siguiente tabla describe todas las variables CSS utilizadas para diseñar el componente Dock-Manager:

variable CSS	Descripción
`--igc-background-color`	El color de fondo del encabezado dentro del componente del navegador del panel.
`--igc-accent-color`	El color de fondo de los botones dentro de la parte de acciones del encabezado del panel en foco.
`--igc-active-color`	El color del texto y de la sombra del cuadro utilizado para los componentes en estado activo.
`--igc-border-color`	El color inferior del borde del componente del encabezado del panel.
`--igc-font-family`	La familia de fuentes del componente Dock-Manager.
`--igc-dock-background`	El color de fondo de los componentes del administrador del muelle, de la pestaña y del panel flotante.
`--igc-dock-text`	El color del texto del administrador del muelle y de los componentes del panel flotante.
`--igc-pane-header-background`	El color de fondo del componente del encabezado del panel.
`--igc-pane-header-text`	El color del texto del componente del encabezado del panel.
`--igc-pane-content-background`	El color de fondo del contenido dentro del administrador del muelle y los componentes del panel de pestañas.
`--igc-pane-content-text`	El color del texto del contenido dentro del administrador del muelle y los componentes del panel de pestañas.
`--igc-tab-text`	El color del texto del componente del encabezado de la pestaña.
`--igc-tab-background`	El color de fondo del componente del encabezado de la pestaña.
`--igc-tab-border-color`	El color del borde del componente del encabezado de la pestaña.
`--igc-tab-text-active`	El color del texto del componente de encabezado de pestaña seleccionado.
`--igc-tab-background-active`	El color de fondo del componente de encabezado de pestaña seleccionado.
`--igc-tab-border-color-active`	El color del borde del componente de encabezado de pestaña seleccionado.
`--igc-pinned-header-background`	El color de fondo del componente de encabezado del panel no fijado.
`--igc-pinned-header-text`	El color del texto del componente de encabezado del panel no fijado.
`--igc-splitter-background`	El color de fondo del componente divisor.
`--igc-splitter-handle`	El color de fondo del controlador divisor.
`--igc-button-text`	El color de los botones dentro de la parte de acciones del encabezado del panel.
`--igc-flyout-shadow-color`	El color de la sombra del cuadro del componente del panel de contenido.
`--igc-joystick-background`	El color de fondo del joystick y los componentes del indicador de acoplamiento raíz.
`--igc-joystick-border-color`	El color del borde del joystick y los componentes del indicador de acoplamiento de raíz.
`--igc-joystick-icon-color`	El color del icono del joystick y los componentes del indicador de acoplamiento raíz.
`--igc-joystick-background-active`	El color de fondo al pasar el cursor sobre el joystick y los componentes del indicador de acoplamiento raíz.
`--igc-joystick-icon-color-active`	El color del icono de desplazamiento del joystick y los componentes del indicador de acoplamiento raíz.
`--igc-floating-pane-border-color`	El color del borde de los paneles flotantes.
`--igc-context-menu-background`	El color de fondo de los elementos del menú contextual.
`--igc-context-menu-background-active`	El color de fondo de los elementos del menú contextual al pasar el cursor y enfocar.
`--igc-context-menu-color`	El color del texto de los elementos del menú contextual.
`--igc-context-menu-color-active`	El color del texto de los elementos del menú contextual al pasar el cursor y enfocar.
`--igc-drop-shadow-background`	El color de fondo de la sombra paralela.
`--igc-disabled-color`	El color del texto de los componentes en estado deshabilitado.

La navegación con el teclado mejora la accesibilidad del Dock Manager y proporciona una rica variedad de interacciones para el usuario final, como navegar a través de todos los paneles, dividir la vista en múltiples direcciones acoplando el panel activo, etc.

Los atajos son los siguientes:

Docking

CMD/CTRL + SHIFT + ↑ Muelles a la cima mundial
CMD/CTRL + SHIFT + ↓ Atraca al fondo global
CMD/CTRL + SHIFT + → Atraca a la derecha global
CMD/CTRL + SHIFT + ← Se acopla a la izquierda global
SHIFT + ↑ Con varias pestañas en un grupo de pestañas, divide la vista y acopla la pestaña enfocada arriba
SHIFT + ↓ Con varias pestañas en un grupo de pestañas, divide la vista y acopla la pestaña enfocada a continuación
SHIFT + → Con varias pestañas en un grupo de pestañas, divide la vista y acopla la pestaña enfocada a la derecha
SHIFT + ← Con varias pestañas en un grupo de pestañas, divide la vista y acopla la pestaña enfocada a la izquierda

Navigating

CMD/CTRL + F6 o CMD/CTRL + → Enfoca la siguiente pestaña en el host del documento
CMD/CTRL + SHIFT + F6 CMD/CTRL o+ ← Enfoca la pestaña anterior en el host del documento
ALT + F6 Enfoca el siguiente panel de contenido
ALT + SHIFT + F6 Enfoca el panel de contenido anterior

Pane Navigator

Los siguientes atajos de teclado muestran un navegador desde el cual puede recorrer paneles y documentos.

CMD/CTRL + F7 o CMD/CTRL + F8 Comienza desde el primer documento en adelante
ALT + F7 o ALT + F8 Comienza desde el primer panel en adelante
CMD/CTRL + SHIFT +o CMD/CTRL F7 + SHIFT + F8 Comienza desde el último documento hacia atrás
ALT + SHIFT +o ALT F7 + SHIFT + F8 Comienza desde el último panel hacia atrás

Other

ALT + F3 Cierra el panel activo

Practique todas las acciones mencionadas anteriormente en la demostración de muestra.

Styling

Dock Manager utiliza un DOM oculto para encapsular sus estilos y comportamientos. Como resultado, no puedes simplemente apuntar a sus elementos internos con los selectores CSS habituales. Es por eso que exponemos partes de componentes a las que se puede apuntar con el selector CSS::part.

igc-dockmanager::part(content-pane) {
  border-radius: 10px;
}

En el siguiente ejemplo, demostramos la capacidad de personalizar Dock Manager a través de algunas de las partes CSS que hemos expuesto.

CSS Parts

Nombre de la pieza	Descripción
`content-pane`	El componente del panel de contenido.
`pane-header`	El componente de encabezado del panel de contenido.
`pane-header-content`	El área de contenido del encabezado del panel de contenido.
`pane-header-actions`	El área de acciones del encabezado del panel de contenido.
`active`	Indica un estado activo. Se aplica a`pane-header`,`pane-header-content`,`pane-header-actions`,`tab-header`.
`floating`	Indica una ubicación de panel flotante. Se aplica a`pane-header`,`pane-header-content`,`pane-header-actions`.
`window`	Indica una ubicación de ventana flotante. Se aplica a`pane-header`,`pane-header-content`,`pane-header-actions`.
`split-pane`	El componente de panel dividido.
`splitter`	El componente divisor de cambio de tamaño.
`splitter-base`	El elemento base del componente divisor.
`splitter-ghost`	El elemento fantasma del componente divisor.
`unpinned-pane-header`	El componente de encabezado del panel no fijado.
`tab-header`	El componente de encabezado de pestaña.
`tab-header-more-options-button`	El botón de más opciones en el encabezado de la pestaña.
`tab-header-close-button`	El botón de cerrar en el encabezado de la pestaña.
`selected`	Indica un estado seleccionado. Se aplica a`tab-header` y`tab-header-close-button`.
`hovered`	Indica un estado suspendido. Se aplica a`tab-header-close-button`.
`header-title`	El título de texto del encabezado de la pestaña.
`tab-strip-area`	El área de la tira de pestañas que contiene los encabezados de las pestañas.
`tab-strip-actions`	El área de la barra de pestañas que contiene las acciones de la pestaña.
`top`	Indica una posición de pestañas superiores. Se aplica a`tab-header`,`tab-strip-area`,`tab-strip-actions`.
`bottom`	Indica la posición de las pestañas inferiores. Se aplica a`tab-header`,`tab-strip-area`,`tab-strip-actions`.
`context-menu`	El componente del menú contextual.
`context-menu-item`	Un elemento en el componente del menú contextual.
`docking-preview`	El área de vista previa del acoplamiento.
`docking-indicator`	El indicador de acoplamiento no raíz.
`root-docking-indicator`	El indicador de acoplamiento de raíz.
`splitter-docking-indicator`	El indicador de acoplamiento del divisor.
`pane-navigator`	El componente del navegador de panel.
`pane-navigator-header`	El área del encabezado del navegador del panel.
`pane-navigator-body`	El área del cuerpo del navegador de panel.
`pane-navigator-items-group`	Un grupo de elementos en el componente del navegador de panel.
`pane-navigator-items-group-title`	El elemento de título de un grupo de elementos en el navegador del panel.
`pane-navigator-item`	Un elemento en el navegador del panel.
`pane-header-close-button`	El botón de cerrar en el encabezado del panel.
`pane-header-maximize-button`	El botón maximizar en el encabezado del panel.
`pane-header-minimize-button`	El botón minimizar en el encabezado del panel.
`pane-header-pin-button`	El botón de anclar en el encabezado del panel.
`pane-header-unpin-button`	El botón para desanclar en el encabezado del panel.
`tabs-maximize-button`	El botón de maximizar las pestañas.
`tabs-minimize-button`	Las pestañas minimizan el botón.
`tabs-more-button`	El botón de más pestañas.
`context-menu-unpin-button`	El botón desanclar en el menú contextual.
`context-menu-close-button`	El botón de cerrar en el menú contextual.
`splitter-handle`	El mango divisor.
`horizontal`	Indica una posición horizontal. Se aplica a`splitter-handle`.
`vertical`	Indica una posición vertical. Se aplica a`splitter-handle`.

Themes

El Dock Manager viene con un tema claro y otro oscuro. El tema claro es el predeterminado. Para cambiarlo a oscuro, solo necesita importar el archivo igc.themes.css en su CSS y agregar la clase de tema oscuro al Dock Manager o cualquiera de sus padres:

@import '~igniteui-dockmanager/dist/collection/styles/igc.themes';

<igc-dockmanager class="dark-theme">

Localización

El componente Dock Manager permite localizar las cadenas utilizadas en los menús contextuales, las descripciones emergentes y los atributos de arias. Por defecto, el Dock Manager detecta el idioma de la página buscando un atributo lang en cualquiera de sus padres. Si el atributo lang no está establecido o se asigna a un valor que el Dock Manager no soporta, el idioma por defecto utilizado es el inglés (en). El Dock Manager proporciona cadenas localizadas integradas para los siguientes idiomas: inglés (en), japonés (jp), coreano (ko) y español (es).

Para proporcionar cadenas de recursos para cualquier otro lenguaje, utilice el método addResourceStrings:

import { addResourceStrings } from 'igniteui-dockmanager';

const dockManagerStringsFr: IgcDockManagerResourceStrings = {
  close: 'Fermer',
  // ...
};

addResourceStrings('fr', dockManagerStringsFr);

The Dock Manager exposes resourceStrings property which allows you to modify the strings. If you set the resourceStrings property, the Dock Manager will use your strings no matter what lang attribute is set.

Descripción general de Web Components Dock Manager

Web Components Dock Manager Example

Usage

Content Pane

Split Pane

Tab Group Pane

Document Host

Floating Pane

Active Pane

Docking

Acoplamiento de raíz

Acoplamiento de paneles

Acoplamiento de host de documentos

Acoplamiento de divisor

Update Layout

Save/Load Layout

Adding Panes At Runtime

Eventos

Personalización

CSS Variables

Keyboard Navigation

Docking

Navigating

Pane Navigator

Other

Styling

CSS Parts

Themes

Localización

API References