Angular Seleção de células

    O recurso de seleção permite capacidades de seleção de dados ricas na Grade Hierárquica baseada em Material UI. Uma variedade de eventos e ações de seleção única estão disponíveis graças à API poderosa e aos métodos fáceis de usar. A Hierarchical Grid agora suporta três modos para seleção de células, e você pode facilmente alternar entre eles mudandocellSelection a propriedade. Você pode desativar a seleção de células, pode selecionar apenas uma célula dentro da grade ou selecionar várias células na grade, que é oferecida como opção padrão. Na Grade Hierárquica, você pode especificar o modo de seleção de células no nível da grade. Por exemplo, na grade pai a seleção multicélula pode ser ativada, mas nas grades filho, o modo de seleção de células pode ser simples ou desativado. Mas vamos aprofundar cada uma dessas opções.

    Angular Cell Selection Example

    O exemplo abaixo demonstra os três tipos de comportamento de seleção de células da Grade Hierárquica. Use os botões abaixo para ativar cada um dos modos de seleção disponíveis. Uma breve descrição será fornecida em cada interação do botão por meio de uma caixa de mensagem de lanchonete.

    Selection types

    Hierarchical Grid Multiple-cell Selection

    Este é o modo de seleção de célula padrão nas grades pai e filho. Lembre-se de que você pode fazer a seleção de células uma grade de cada vez, não pode fazer a seleção de intervalo de grade cruzada ou ter células selecionadas em várias grades. Cada combinação de teclas relacionada à seleção de intervalo e à funcionalidade de arrastar do mouse pode ser usada apenas na mesma grade.

    Como selecionar células:

    • ByMouse drag- A seleção retangular dos dados das células seria realizada.
    • AoCtrl key pressionar +Mouse drag- Múltiplas seleções de faixa eram realizadas. Qualquer outra seleção de células existente será mantida.
    • Seleção instantânea de múltiplas células usando a tecla Shift. Selecione uma célula única e selecione outra célula única segurando a tecla Shift. O intervalo de células entre as duas células será selecionado. Lembre-se de que, se outra segunda célula for selecionada enquanto está segurando,Shift key o intervalo de seleção será atualizado com base na posição da célula selecionada (ponto de partida).
    • Seleção multi-célula do teclado usando enquantoArrow keys segura.Shift key A faixa de seleção multi-célula será criada com base na célula focada.
    • Seleção multi-célula do teclado usando eCtrl + Arrow keys​Ctrl + Home/End enquanto se mantém seguradoShift key. A faixa de seleção multi-célula será criada com base na célula focada.
    • Clicar comLeft Mouse key o enquanto segurarCtrl key adicionará intervalos de célula única à coleção de células selecionadas.
    • A seleção contínua de múltiplas células está disponível clicando com o mouse e arrastando.

    Hierarchical Grid Single Selection

    Quando você define o[cellSelection]="'single'", isso permite que você tenha apenas uma célula selecionada na grade por vez. Além disso, o modomouse drag não funciona e, em vez de selecionar uma célula, isso faz a seleção padrão de texto.

    Note

    Quando uma célula é selecionadaselected, é emitido um evento, não importa se éselection mode​single oumultiple. No modo de seleção multi-célula, quando você seleciona uma faixa de célulasrangeSelected, é emitido um evento.

    Hierarchical Grid None selection

    Se quiser desativar a seleção de células, pode simplesmente definir[cellSelection]="'none'" a propriedade. Nesse modo, quando você clica sobre a célula ou tenta navegar com o teclado, a célula não é selecionada, apenas aactivation style é aplicada, e ela será perdida quando você rolar ou clicar sobre outro elemento da página. A única forma de definir seleção é usando os métodos de API descritos abaixo.

    Estilização

    O mecanismo de tema expõe propriedades que nos permitem estilizar o intervalo de células selecionadas.

    Import theme

    Para começar a estilizar a seleção, precisamos importar oindex arquivo, onde todas as funções de tema e mixins de componentes estão ativos:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    Define colors

    Uma vez feito, podemos usar ascontrast-color funções ecolor. Com eles, definimos as cores que gostaríamos de usar para nossa linha de seleção:

    $text-color: contrast-color($color: 'primary', $variant: 900);
$background-color: color($color: "primary", $variant: 900);
$border-yellow: #f2c43c;
    Note

    Se não quisermos usar ascontrast-color funções ecolor, sempre podemos codificar os valores de cor fixamente.

    Create custom theme

    Em seguida, criamos um novo tema que estende asgrid-theme variáveis passando nostext-color,background-color eborder-yellow como$cell-selected-text-color,$cell-selected-background respectivamente$cell-active-border-color:

    $custom-grid-theme: grid-theme(
  $cell-selected-text-color: $text-color,
  $cell-active-border-color: $border-yellow,
  $cell-selected-background: $background-color
);

    Apply theme

    Depois, tudo o que precisamos fazer é incluir o mixin no estilo do nosso componente (também pode estar nos estilos do aplicativo), para que nosso igx-hierarchical-grid use o tema recém-criado em vez do padrão:

    @include css-vars($custom-grid-theme);

    Com o tema personalizado aplicado, as células de grade selecionadas são destacadas com nossas cores selecionadas:

    Demo

    Note

    A amostra não será afetada pelo tema global selecionado deChange Theme.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.