Descripción general del Administrador de muelles Web Components

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

Web Components Dock Manager Example

Este ejemplo muestra la mayoría de las funcionalidades y opciones de acoplamiento del IgcDockManagerComponent que puede usar en su 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).

Dock Manager tiene una propiedad layout que describe el diseño de los paneles. Para comenzar a definir un diseño, debe configurar la propiedad rootPane y agregar paneles secundarios. Así es como puede definir un diseño con un único panel de contenido:

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'
            }
        ]
    }
};

Para cargar el contenido de los paneles, Dock Manager utiliza ranuras. El atributo de ranura del elemento de contenido debe coincidir con el contentId del panel de contenido en la configuración de diseño. Se recomienda encarecidamente establecer el ancho y el alto de los elementos de contenido en 100 % para obtener una respuesta predecible cuando el usuario final cambia el tamaño de los paneles.

<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:

Cada tipo de panel tiene una propiedad size. Dependiendo de la orientación principal, el tamaño puede afectar el ancho o el alto del panel. El tamaño de un panel es relativo al tamaño de sus paneles hermanos y el valor predeterminado es 100. Si tiene dos paneles hermanos, donde el primero tiene el tamaño establecido en 200 y el segundo tiene el tamaño establecido en 100, el primero será el doble. el tamaño del segundo. Si el tamaño absoluto de su padre es 900 px, su tamaño será de 600 px y 300 px respectivamente.

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

Todo esto se refleja en la propiedad layout del Dock Manager.

Content Pane

IgcContentPane representa un panel con encabezado y contenido. Se puede alojar dentro de un panel dividido o un panel de grupo de pestañas. Así es como se define un panel de contenido:

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

La propiedad header se utiliza para proporcionar un encabezado de texto para el panel de contenido. Este texto se representa en varios lugares: el encabezado del panel de contenido superior, el encabezado de la pestaña si el panel está en un grupo de pestañas y el encabezado no fijado si el panel no está fijado. Puede proporcionar un contenido de espacio personalizado para cada uno de estos lugares, respectivamente, utilizando las propiedades headerId, tabHeaderId y unpinnedHeaderId. Si alguna de estas propiedades no está establecida, se utiliza el texto header. A continuación se explica cómo proporcionar el contenido del espacio del encabezado de una pestaña:

<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'
}

Cuando se desancla un panel, aparece como un encabezado de pestaña en uno de los bordes del Dock Manager. Si el usuario final lo selecciona, su contenido aparece sobre los paneles anclados. Para desanclar un panel de contenido, establezca su propiedad isPinned en false.

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

La propiedad isPinned afecta sólo a los paneles de contenido que están acoplados fuera de un host de documentos. Además, los paneles de contenido alojados en un panel flotante no se pueden desanclar.

De forma predeterminada, el destino para desanclar un panel de contenido se calcula automáticamente en función de la ubicación del panel en relación con el host del documento. Cuando se define más de un host de documentos, se utilizará el más cercano en la jerarquía principal del panel de contenido no fijado. Si no hay ningún host de documentos definido, se utiliza la ubicación predeterminada: Left. También es posible establecer el destino deseado del panel no fijado utilizando la propiedad unpinnedLocation.

Puede configurar qué operaciones de usuario final están permitidas para un panel de contenido utilizando sus propiedades allowClose, allowPinning, allowDocking y allowFloating.

Al definir un panel de contenido, puede establecer la propiedad documentOnly en verdadero para que el panel solo pueda acoplarse en un host de documentos.

Para restringir la interacción del usuario con el panel de contenido y su contenido, puede establecer la propiedad disabled en verdadero. Esto evitará todas las interacciones del usuario con el panel a menos que sea un único panel flotante. Este último se puede mover, maximizar o cerrar (según la configuración del panel para maximizar y cerrar), por lo que el usuario puede echar un vistazo a los elementos que se encuentran debajo pero no podrá interactuar con su contenido.

De forma predeterminada, cuando cierra un panel, se elimina del objeto layout. Sin embargo, en algunos casos querrá ocultar temporalmente el panel y volver a mostrarlo más tarde. Para hacerlo sin cambiar el objeto layout, puede usar la propiedad hidden del panel de contenido. Establecer la propiedad en verdadero la ocultará de la interfaz de usuario, pero permanecerá en el objeto layout. Para anular el comportamiento de cierre predeterminado, puede suscribirse al evento PaneClose de esta manera:

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

Split Pane

IgcSplitPane es un panel contenedor que apila todos sus panes secundarios horizontal o verticalmente según su propiedad orientation. Así es como se define un panel dividido horizontal con dos paneles de contenido secundario:

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.

De forma predeterminada, si el panel dividido está vacío, no se muestra. Sin embargo, si desea cambiar ese comportamiento, puede establecer su propiedad allowEmpty en verdadero y el panel dividido se presentará en la interfaz de usuario incluso cuando no haya paneles dentro de él.

Tab Group Pane

IgcTabGroupPane muestra sus panes de contenido secundarios como pestañas de un componente de pestaña. Así es como se define un panel de grupo de pestañas con un panel de contenido para cada una de sus dos pestañas:

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.

En caso de que desee que el panel del grupo de pestañas se muestre en la interfaz de usuario cuando no tiene pestañas, puede establecer la propiedad allowEmpty en verdadero.

Document Host

IgcDocumentHost es un área de pestañas para documentos, similar a la de Visual Studio para edición de código y vista de diseño. A continuación se explica cómo definir un host de documentos con dos pestañas de documentos:

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

El panel flotante es un panel dividido que se muestra sobre todos los demás en una ventana flotante. Las definiciones del panel flotante se almacenan en la propiedad floatingPanes del layout. A continuación se explica cómo agregar un panel flotante con un único panel de contenido en su interior:

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'
                }
            ]
        }
    ]
};

Las propiedades floatingLocation, floatingWidth y floatingHeight representan dimensiones absolutas en píxeles. Tenga en cuenta que estas propiedades se aplican solo para los paneles divididos en la matriz floatingPanes.

Con floatingResizable y allowFloatingPanesResize puede establecer si se permite cambiar el tamaño de los paneles flotantes. allowFloatingPanesResize es una propiedad IgcDockManagerComponent, por lo que si el valor se establece en falso, no se puede cambiar el tamaño de ninguno de los paneles flotantes. La propiedad floatingResizable se puede aplicar por separado en cada panel dividido en la matriz floatingPanes y, si el valor de la propiedad no está establecido, el valor predeterminado es el valor de la propiedad allowFloatingPanesResize. Si la propiedad floatingResizable se establece para un panel específico, su valor tiene prioridad sobre el valor de la propiedad allowFloatingPanesResize.

Active Pane

El componente Dock Manager resalta el panel de contenido que contiene el foco y lo expone en su propiedad activePane. Puede cambiar mediante programación el panel activo configurando la propiedad. También puede escuchar los cambios de la propiedad activePane suscribiéndose al evento ActivePaneChanged:

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

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

Para restaurar o conservar un diseño, simplemente debe obtener/establecer el valor de la propiedad layout. A continuación se explica cómo guardar el diseño como un JSON encadenado:

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

Se pueden agregar contenidos y paneles al layout en tiempo de ejecución. En el siguiente ejemplo, puede ver cómo puede agregar contenido, documentos y paneles flotantes.

Eventos

El componente Dock Manager genera eventos cuando se realizan interacciones específicas del usuario final, por ejemplo, cerrar, fijar, cambiar el tamaño y arrastrar un panel. Puede encontrar la lista completa de eventos de Dock Manager aquí.

A continuación se explica cómo agregar un detector de eventos para el evento PaneClose:

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 de Dock Manager. Primero, proporcionaremos nuestros propios íconos, usando las ranuras closeButton, maximizeButton, minimizeButton, pinButton y unpinButton:

<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="" />
    </button>

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

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

    <button slot="unpinButton">
        <img src="https://www.svgrepo.com/show/154123/pin.svg" alt="" />
    </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 + ↑ Se acopla al top global
Cmd/Ctrl + Shift + ↓ Se acopla al fondo global
Cmd/Ctrl + Shift + → Se acopla 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 debajo
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 o Cmd/Ctrl + ← 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 + F7 o Cmd/Ctrl + Shift + F8 Comienza desde el último documento hacia atrás
Alt + Shift + F7 o Alt + 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.
`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 admite la localización de las cadenas utilizadas en los menús contextuales, información sobre herramientas y atributos aria. De forma predeterminada, Dock Manager detecta el idioma de la página buscando un atributo lang en cualquiera de sus padres. Si el atributo lang no está configurado o está configurado en un valor que Dock Manager no admite, el idioma predeterminado utilizado es inglés (en). 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 idioma, utilice el método addResourceStrings:

import { addResourceStrings } from 'igniteui-dockmanager';

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

addResourceStrings('fr', dockManagerStringsFr);

Dock Manager expone la propiedad resourceStrings que le permite modificar las cadenas. Si configura la propiedad resourceStrings, Dock Manager usará sus cadenas sin importar el atributo de idioma establecido.