Visão geral do Blazor Dock Manager

O Infragistics Blazor Dock Manager 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.

Blazor Exemplo do Dock Manager

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

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:

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.

Variáveis CSS

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:

Encaixe

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

Navegar

CMD/CTRL + F6 ou CMD/CTRL + → Foca a próxima guia no host do documento
CMD/CTRL + SHIFT + F6 ou CMD/CTRL + ← Concentra a guia anterior no host do documento
ALT + F6 Foca no próximo painel de conteúdo
ALT + SHIFT + F6 Foca no painel de conteúdo anterior

Navegador de painel

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 a partir do primeiro documento
ALT + F7 ou ALT + F8 Inicia do primeiro painel para a frente
CMD/CTRL + SHIFT +ou CMD/CTRL F7 + SHIFT +Começa F8 do último documento de trás para frente
ALT + SHIFT + F7 ou ALT + SHIFT +Começa F8 do último painel para trás

Outro

ALT + F3 Fecha o painel ativo

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

Estilização

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.

Partes CSS

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.
`splitter-docking-indicator`	O indicador de encaixe do divisor.
`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`.