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 Dock Manager Example

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

    Customization

    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.

    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.

    Keyboard Navigation

    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
    • 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 apane-header,pane-header-content,pane-header-actions,tab-header.
    floating Indica um posicionamento de painel flutuante. Aplica-se apane-header,pane-header-content,pane-header-actions.
    window Indica um posicionamento de janela flutuante. Aplica-se apane-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 atab-header etab-header-close-button.
    hovered Indica um estado pairado. Aplica-se atab-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 atab-header,tab-strip-area,tab-strip-actions.
    bottom Indica uma posição de abas inferiores. Aplica-se atab-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 asplitter-handle.
    vertical Indica uma posição vertical. Aplica-se asplitter-handle.

    API References