Visão geral Web Components Dock Manager

O Dock Manager Infragistics Web Components fornece um meio de gerenciar o layout do seu aplicativo por meio de painéis, permitindo que seus usuários finais o personalizem ainda mais fixando, redimensionando, movendo, maximizando e ocultando painéis.

Web Components Dock Manager Example

Este exemplo mostra a maioria das funcionalidades e opções de encaixe do IgcDockManagerComponent que você pode usar em seu aplicativo.

Para instalar o pacote Dock Manager, execute o seguinte comando:

npm install --save igniteui-dockmanager

Então é necessário importar e chamar a função defineCustomElements():

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

defineCustomElements();

Usage

Depois que o Dock Manager for importado, você pode adicioná-lo à 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).

O Dock Manager tem uma propriedade layout, que descreve o layout dos painéis. Para começar a definir um layout, você deve definir a propriedade rootPane e adicionar painéis filhos. Veja como você pode definir um layout com um único painel de conteúdo:

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 carregar o conteúdo dos painéis, o Dock Manager usa slots. O atributo slot do elemento content deve corresponder ao contentId do painel content na configuração do layout. É altamente recomendável definir width e height dos elementos content para 100% para uma resposta previsível quando o usuário final estiver redimensionando os painéis.

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

O Dock Manager define vários tipos de painéis:

Cada tipo de painel tem uma propriedade size. Dependendo da orientação do pai, o tamanho pode afetar a largura ou a altura do painel. Por padrão, o tamanho de um painel é relativo aos tamanhos de seus painéis irmãos e o padrão é 100. Se você tiver dois painéis irmãos, onde o primeiro tem seu tamanho definido como 200 e o segundo - tamanho definido como 100, o primeiro terá o dobro do tamanho do segundo e esses dois painéis preencherão todo o espaço disponível. Se o tamanho absoluto do pai for 900px, eles serão dimensionados para 600px e 300px, respectivamente. Se, para certos painéis, você quiser especificar seus tamanhos em pixels, em vez de depender da distribuição relativa de todo o espaço disponível, você deve definir o useFixedSize do painel dividido pai. Para obter mais informações sobre isso, consulte o tópico Modo de tamanho fixo de painéis divididos.

O usuário final pode executar as seguintes ações para personalizar o layout em tempo de execução:

Fixar/desfixar um painel
Redimensionar um painel
Fechar um painel
Arraste um painel para fazê-lo flutuar
Mover um painel flutuante
Encaixe um painel flutuante
Maximizar um painel

Tudo isso é refletido na propriedade layout do Dock Manager.

Content Pane

O IgcContentPane representa um painel com cabeçalho e conteúdo. Ele pode ser hospedado dentro de um Split Pane ou Tab Group Pane. Aqui está como um painel de conteúdo é definido:

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

A propriedade header é usada para fornecer um cabeçalho de texto para o painel de conteúdo. Esse texto é renderizado em vários lugares: o cabeçalho do painel de conteúdo superior, o cabeçalho da guia se o painel estiver em um grupo de guias e o cabeçalho desfixado se o painel estiver desfixado. Você pode fornecer um conteúdo de slot personalizado para cada um desses lugares, respectivamente, usando as propriedades headerId, tabHeaderId e unpinnedHeaderId. Se qualquer uma dessas propriedades não estiver definida, o texto header será usado. Veja como fornecer um conteúdo de slot de cabeçalho de guia:

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

Quando um painel é desafixado, ele aparece como um cabeçalho de guia em uma das bordas do Dock Manager. Se o usuário final selecioná-lo, seu conteúdo aparece sobre os painéis fixados encaixados. Para desafixar um painel de conteúdo, defina sua propriedade isPinned como false.

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

A propriedade isPinned afeta somente painéis de conteúdo que estão encaixados fora de um host de documento. Além disso, painéis de conteúdo hospedados em um painel flutuante não podem ser desafixados.

Por padrão, o destino de desafixação para um painel de conteúdo é calculado automaticamente com base na localização do painel em relação ao host do documento. Quando mais de um host de documento é definido, o mais próximo na hierarquia pai do painel de conteúdo desafixado será usado. Se não houver um host de documento definido, a localização padrão será usada -Left. Também é possível definir o destino desejado do painel desafixado usando a propriedade unpinnedLocation.

Você pode configurar quais operações do usuário final são permitidas para um painel de conteúdo usando suas propriedades allowClose, allowPinning, allowDocking e allowFloating.

Ao definir um painel de conteúdo, você pode definir a propriedade documentOnly como true para que o painel possa ser encaixado somente em um host de documento.

Para restringir a interação do usuário com o painel de conteúdo e seu conteúdo, você pode definir a propriedade disabled como true. Isso impedirá todas as interações do usuário com o painel, a menos que seja um único painel flutuante. Este último pode ser movido, maximizado ou fechado (de acordo com as configurações do painel para maximizar e fechar), para que o usuário possa dar uma olhada nos elementos abaixo dele, mas não poderá interagir com seu conteúdo.

Por padrão, quando você fecha um painel, ele é removido do objeto layout. No entanto, em alguns casos, você pode querer ocultar temporariamente o painel e mostrá-lo novamente mais tarde. Para fazer isso sem alterar o objeto layout, você pode usar a propriedade hidden do painel de conteúdo. Definir a propriedade como true o ocultará da IU, mas ele permanecerá no objeto layout. Para substituir o comportamento de fechamento padrão, você pode assinar o evento PaneClose assim:

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

Split Pane

O IgcSplitPane é um painel de contêiner que empilha todos os seus panes filhos horizontalmente ou verticalmente com base em sua propriedade orientation. Aqui está como um painel dividido horizontalmente com dois painéis de conteúdo filhos é definido:

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

O painel dividido pode conter painéis filho de todos os tipos de painéis, incluindo outros painéis divididos.

Por padrão, se o painel dividido estiver vazio, ele não será exibido. No entanto, se você quiser alterar esse comportamento, pode definir sua propriedade allowEmpty como true e o painel dividido será apresentado na UI mesmo quando não houver painéis dentro dele.

Tab Group Pane

O IgcTabGroupPane exibe seus panes de conteúdo filho como as guias de um componente de guia. Aqui está como um painel de grupo de guias com um painel de conteúdo para cada uma de suas duas guias é definido:

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

Se não houver espaço suficiente para exibir todos os cabeçalhos de guia, o grupo de guias mostra o menu Mais guias, que contém as guias não visíveis. Se você clicar em um item de guia nesse menu, a guia será selecionada e movida para a primeira posição.

As abas também podem ser reordenadas sem serem destacadas do grupo de abas em que estão localizadas. Você pode clicar em uma aba de sua escolha e arrastá-la para a esquerda ou direita para a posição que você quer que ela fique. Se você arrastar a aba selecionada para fora da área de abas, ela será destacada em um painel flutuante.

Caso você queira que o painel do grupo de guias seja exibido na interface do usuário quando não houver guias, você pode definir a propriedade allowEmpty como true.

Document Host

O IgcDocumentHost é uma área de abas para documentos, similar àquela no Visual Studio para edição de código e visualização de design. Aqui está como definir um host de documento com duas abas de documento:

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

O painel flutuante é um painel dividido renderizado acima de todos os outros em uma janela flutuante. As definições do painel flutuante são armazenadas na propriedade floatingPanes do layout. Veja como adicionar um painel flutuante com um único painel de conteúdo dentro:

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

As propriedades floatingLocation, floatingWidth e floatingHeight representam dimensões absolutas em pixels. Observe que essas propriedades são aplicadas somente para os painéis divididos no array floatingPanes.

Com floatingResizable e allowFloatingPanesResize você pode definir se o redimensionamento de painéis flutuantes é permitido. allowFloatingPanesResize é uma propriedade IgcDockManagerComponent, então se o valor for definido como false nenhum dos painéis flutuantes poderá ser redimensionado. A propriedade floatingResizable pode ser aplicada separadamente em cada painel dividido na matriz floatingPanes e se o valor da propriedade não for definido, ele assume como padrão o valor da propriedade allowFloatingPanesResize. Se a propriedade floatingResizable for definida para um painel específico, seu valor tem precedência sobre o valor da propriedade allowFloatingPanesResize.

Active Pane

O componente Dock Manager destaca o painel de conteúdo que contém o foco e o expõe em sua propriedade activePane. Você pode alterar programaticamente o painel ativo definindo a propriedade. Você também pode ouvir as alterações da propriedade activePane assinando o evento ActivePaneChanged:

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

Update Layout

Em alguns cenários, pode ser necessário personalizar o layout do Dock Manager adicionando ou removendo um painel, alterando a orientação, etc., por exemplo:

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

Isso atualizará apenas o objeto de layout. Para disparar uma atualização do Dock Manager para que as alterações sejam refletidas na UI, o objeto de layout deve ser reatribuído:

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

Save/Load Layout

Para restaurar ou persistir um layout, você simplesmente tem que obter/definir o valor da propriedade layout. Aqui está como salvar o layout como um JSON stringificado:

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

Conteúdos e painéis podem ser adicionados ao layout em tempo de execução. No exemplo abaixo, você pode ver como adicionar conteúdo, documento e painéis flutuantes.

Eventos

O componente Dock Manager gera eventos quando interações específicas do usuário final são realizadas, por exemplo, fechar, fixar, redimensionar e arrastar um painel. Você pode encontrar a lista completa de eventos do Dock Manager aqui.

Veja como adicionar um ouvinte de eventos para o evento PaneClose:

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

Personalização

O componente Dock Manager fornece a opção de personalizar todos os botões usando slots e peças. Para alterar qualquer um dos botões, você simplesmente precisa definir seu próprio elemento dentro do Dock Manager e definir o atributo slot para o identificador correspondente.

Vamos utilizar esses slots e peças para criar um layout personalizado do Dock Manager. Primeiro, forneceremos nossos próprios ícones, usando os slots closeButton, maximizeButton, minimizeButton, pinButton e 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>

Então, usaremos as partes expostas em nossa folha de estilo. Dessa forma, temos controle total do estilo do 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;
}

Se tudo correu bem, agora devemos ter um DockManager com ícones e área de abas personalizados. Vamos dar uma olhada:

Abaixo você pode encontrar uma lista contendo os nomes dos slots para todos os botões, bem como a alça divisora:

Nome do slot	Descrição
`closeButton`	Os botões de fechar.
`paneHeaderCloseButton`	Os botões de fechar dos cabeçalhos do painel.
`tabHeaderCloseButton`	Os botões de fechar dos cabeçalhos das guias.
`moreTabsButton`	Quanto mais botões de abas.
`moreOptionsButton`	Quanto mais botões de opções.
`maximizeButton`	Os botões de maximizar.
`minimizeButton`	Os botões de minimizar.
`pinButton`	Os botões de alfinetes.
`unpinButton`	Os botões de desafixar.
`splitterHandle`	A alça divisora.

Você pode encontrar a parte correspondente de cada slot nas Partes CSS na seção Estilo desta página.

CSS Variables

A tabela a seguir descreve todas as variáveis CSS usadas para estilizar o componente dock-manager:

Variável CSS	Descrição
`--igc-background-color`	A cor de fundo do cabeçalho dentro do componente do navegador do painel.
`--igc-accent-color`	A cor de fundo dos botões dentro da parte de ações do cabeçalho do painel em foco.
`--igc-active-color`	A cor do texto e da sombra da caixa usada para os componentes no estado ativo.
`--igc-border-color`	A cor inferior da borda do componente de cabeçalho do painel.
`--igc-font-family`	A família de fontes do componente dock-manager.
`--igc-dock-background`	A cor de fundo dos componentes do gerenciador de dock, guia e painel flutuante.
`--igc-dock-text`	A cor do texto do gerenciador de docks e dos componentes do painel flutuante.
`--igc-pane-header-background`	A cor de fundo do componente de cabeçalho do painel.
`--igc-pane-header-text`	A cor do texto do componente de cabeçalho do painel.
`--igc-pane-content-background`	A cor de fundo do conteúdo dentro dos componentes do gerenciador de docks e do painel de guias.
`--igc-pane-content-text`	A cor do texto do conteúdo dentro dos componentes do gerenciador de dock e do painel de guias.
`--igc-tab-text`	A cor do texto do componente de cabeçalho da guia.
`--igc-tab-background`	A cor de fundo do componente do cabeçalho da guia.
`--igc-tab-border-color`	A cor da borda do componente do cabeçalho da guia.
`--igc-tab-text-active`	A cor do texto do componente de cabeçalho da guia selecionada.
`--igc-tab-background-active`	A cor de fundo do componente de cabeçalho da guia selecionada.
`--igc-tab-border-color-active`	A cor da borda do componente de cabeçalho da guia selecionada.
`--igc-pinned-header-background`	A cor de fundo do componente de cabeçalho do painel não fixado.
`--igc-pinned-header-text`	A cor do texto do componente de cabeçalho do painel não fixado.
`--igc-splitter-background`	A cor de fundo do componente divisor.
`--igc-splitter-handle`	A cor de fundo da alça do divisor.
`--igc-button-text`	A cor dos botões dentro da parte de ações do cabeçalho do painel.
`--igc-flyout-shadow-color`	A cor da sombra da caixa do componente do painel de conteúdo.
`--igc-joystick-background`	A cor de fundo do joystick e dos componentes do indicador de encaixe raiz.
`--igc-joystick-border-color`	A cor da borda do joystick e dos componentes do indicador de encaixe raiz.
`--igc-joystick-icon-color`	A cor do ícone do joystick e os componentes do indicador de encaixe raiz.
`--igc-joystick-background-active`	A cor de fundo do hover do joystick e os componentes do indicador de encaixe raiz.
`--igc-joystick-icon-color-active`	A cor do ícone de foco do joystick e os componentes do indicador de encaixe raiz.
`--igc-floating-pane-border-color`	A cor da borda dos painéis flutuantes.
`--igc-context-menu-background`	A cor de fundo dos itens do menu de contexto.
`--igc-context-menu-background-active`	A cor de fundo dos itens do menu de contexto ao passar o mouse e focar.
`--igc-context-menu-color`	A cor do texto dos itens do menu de contexto.
`--igc-context-menu-color-active`	A cor do texto dos itens do menu de contexto ao passar o mouse e focar.
`--igc-drop-shadow-background`	A cor de fundo da sombra projetada.
`--igc-disabled-color`	A cor do texto dos componentes no estado desabilitado.

A navegação pelo teclado melhora a acessibilidade do Dock Manager e fornece uma grande variedade de interações ao usuário final, como navegar por todos os painéis, dividir a visualização em várias direções por meio do encaixe do painel ativo, etc.

Os atalhos são os seguintes:

Docking

Cmd/Ctrl + Shift + ↑ Encaixa no topo global
Cmd/Ctrl + Shift + ↓ Encaixa na parte inferior global
Cmd/Ctrl + Shift + → Encaixa na direita global
Cmd/Ctrl + Shift + ← Encaixa na esquerda global
Shift + ↑ Com várias guias em um grupo de guias, divide a visualização e encaixa a guia focada acima
Shift + ↓ Com várias guias em um grupo de guias, divide a visualização e encaixa a guia em foco abaixo
Shift + → Com várias guias em um grupo de guias, divide a visualização e encaixa a guia em foco à direita
Shift + ← Com várias guias em um grupo de guias, divide a visualização e encaixa a guia em foco à esquerda

Navigating

Cmd/Ctrl + F6 ou Cmd/Ctrl + → Foca a próxima aba no host do documento
Cmd/Ctrl + Shift + F6 ou Cmd/Ctrl + ← Foca a aba anterior no host do documento
Alt + F6 Foca o próximo painel de conteúdo
Alt + Shift + F6 Foca o painel de conteúdo anterior

Pane Navigator

Os atalhos de teclado a seguir mostram um navegador a partir do qual você pode iterar por painéis e documentos.

Cmd/Ctrl + F7 ou Cmd/Ctrl + F8 Começa do primeiro documento para a frente
Alt + F7 ou Alt + F8 Começa do primeiro painel para a frente
Cmd/Ctrl + Shift + F7 ou Cmd/Ctrl + Shift + F8 Começa do último documento para trás
Alt + Shift + F7 ou Alt + Shift + F8 Começa do último painel para trás

Other

Alt + F3 Fecha o painel ativo

Pratique todas as ações mencionadas acima na demonstração de exemplo.

Styling

O Dock Manager usa um shadow DOM para encapsular seus estilos e comportamentos. Como resultado, você não pode simplesmente mirar seus elementos internos com os seletores CSS usuais. É por isso que expomos partes de componentes que podem ser miradas com o seletor CSS::part.

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

No exemplo a seguir, demonstramos a capacidade de personalizar o Dock Manager por meio de algumas das partes CSS que expusemos.

CSS Parts

Nome da peça	Descrição
`content-pane`	O componente do painel de conteúdo.
`pane-header`	O componente de cabeçalho do painel de conteúdo.
`pane-header-content`	A área de conteúdo do cabeçalho do painel de conteúdo.
`pane-header-actions`	A área de ações do cabeçalho do painel de conteúdo.
`active`	Indica um estado ativo. Aplica-se a`pane-header`,`pane-header-content`,`pane-header-actions`,`tab-header`.
`floating`	Indica um posicionamento de painel flutuante. Aplica-se a`pane-header`,`pane-header-content`,`pane-header-actions`.
`window`	Indica um posicionamento de janela flutuante. Aplica-se a`pane-header`,`pane-header-content`,`pane-header-actions`.
`split-pane`	O componente do painel dividido.
`splitter`	O componente divisor de redimensionamento.
`splitter-base`	O elemento base do componente divisor.
`splitter-ghost`	O elemento fantasma do componente divisor.
`unpinned-pane-header`	O componente de cabeçalho do painel não fixado.
`tab-header`	O componente de cabeçalho da guia.
`tab-header-more-options-button`	O botão mais opções no cabeçalho da guia.
`tab-header-close-button`	O botão fechar no cabeçalho da aba.
`selected`	Indica um estado selecionado. Aplica-se a`tab-header` e`tab-header-close-button`.
`hovered`	Indica um estado pairado. Aplica-se a`tab-header-close-button`.
`header-title`	O título do texto do cabeçalho da guia.
`tab-strip-area`	A área da faixa de guias que contém os cabeçalhos das guias.
`tab-strip-actions`	A área da faixa de guias que contém as ações da guia.
`top`	Indica uma posição de abas superiores. Aplica-se a`tab-header`,`tab-strip-area`,`tab-strip-actions`.
`bottom`	Indica uma posição de abas inferiores. Aplica-se a`tab-header`,`tab-strip-area`,`tab-strip-actions`.
`context-menu`	O componente do menu de contexto.
`context-menu-item`	Um item no componente do menu de contexto.
`docking-preview`	Área de pré-visualização do encaixe.
`docking-indicator`	O indicador de encaixe não raiz.
`root-docking-indicator`	O indicador de encaixe da raiz.
`pane-navigator`	O componente do navegador de painéis.
`pane-navigator-header`	A área de cabeçalho do navegador de painéis.
`pane-navigator-body`	A área do corpo do navegador de painéis.
`pane-navigator-items-group`	Um grupo de itens no componente do navegador de painéis.
`pane-navigator-items-group-title`	O elemento de título de um grupo de itens no navegador de painéis.
`pane-navigator-item`	Um item no navegador de painéis.
`pane-header-close-button`	O botão Fechar no cabeçalho do painel.
`pane-header-maximize-button`	O botão maximizar no cabeçalho do painel.
`pane-header-minimize-button`	O botão minimizar no cabeçalho do painel.
`pane-header-pin-button`	O botão de fixação no cabeçalho do painel.
`pane-header-unpin-button`	O botão de desafixar no cabeçalho do painel.
`tabs-maximize-button`	O botão de maximizar as guias.
`tabs-minimize-button`	O botão de minimizar guias.
`tabs-more-button`	O botão mais abas.
`context-menu-unpin-button`	O botão de desafixar no menu de contexto.
`context-menu-close-button`	O botão Fechar no menu de contexto.
`splitter-handle`	A alça divisora.
`horizontal`	Indica uma posição horizontal. Aplica-se a`splitter-handle`.
`vertical`	Indica uma posição vertical. Aplica-se a`splitter-handle`.

Themes

O Dock Manager vem com um tema claro e um escuro. O tema claro é o padrão. Para alterá-lo para escuro, você só precisa importar o arquivo igc.themes.css no seu css e adicionar a classe dark-theme ao Dock Manager ou qualquer um dos seus pais:

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

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

Localização

O componente Dock Manager suporta a localização das strings usadas nos menus de contexto, dicas de ferramentas e atributos aria. Por padrão, o Dock Manager detecta o idioma da página pesquisando por um atributo lang em qualquer um dos seus pais. Se o atributo lang não estiver definido ou estiver definido para um valor que o Dock Manager não suporta, o idioma padrão usado é o inglês (en). O Dock Manager fornece strings localizadas integradas para os seguintes idiomas: inglês (en), japonês (jp), coreano (ko) e espanhol (es). Para fornecer strings de recursos para qualquer outro idioma, use o método addResourceStrings:

import { addResourceStrings } from 'igniteui-dockmanager';

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

addResourceStrings('fr', dockManagerStringsFr);

O Dock Manager expõe a propriedade resourceStrings que permite que você modifique as strings. Se você definir a propriedade resourceStrings, o Dock Manager usará suas strings não importa qual atributo lang esteja definido.