Angular Seleção de células

    O recurso de seleção permite recursos de seleção de dados avançados na Grade Hierárquica baseada na interface do usuário do material. Variedade de eventos e ações de seleção única estão disponíveis graças à poderosa API e métodos fáceis de usar. A Grade Hierárquica agora suporta três modos de seleção de células, e você pode alternar facilmente entre eles alterando a cellSelection propriedade. Você pode desativar a seleção de células, selecionar apenas uma célula na grade ou selecionar várias células na grade, que é fornecida como opção padrão. Na Grade hierárquica, você pode especificar o modo de seleção de célula no nível da grade. Assim, por exemplo, na grade pai, a seleção de várias células pode ser ativada, mas nas grades filhas, o modo de seleção de células pode ser único ou desativado. Mas vamos nos aprofundar em 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:

    • Por Mouse drag- A seleção retangular de dados das células seria realizada.
    • Ao Ctrl key pressionar + Mouse drag-, várias seleções de intervalo seriam realizadas. Qualquer outra seleção de célula existente será mantida.
    • Seleção instantânea de várias células usando a tecla Shift. Selecione uma única célula e selecione outra única célula mantendo pressionada 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 estiver pressionada Shift key, o intervalo de seleção de células será atualizado com base na primeira posição da célula selecionada (ponto inicial).
    • Seleção de várias células do teclado usando enquanto Arrow keys segura. Shift key O intervalo de seleção de várias células será criado com base na célula focada.
    • Seleção de várias células do teclado usando o Ctrl + Arrow keys e Ctrl + Home/End enquanto segura. Shift key O intervalo de seleção de várias células será criado com base na célula focada.
    • Clicar com o Left Mouse key while segurando Ctrl key adicionará intervalos de células únicas à 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 modo mouse drag não funcionará e, em vez de selecionar uma célula, isso fará a seleção de texto padrão.

    Note

    Quando uma única célula é selecionada selected, o evento é emitido, não importa se o selection mode é single ou multiple. No modo de seleção de várias células, quando você seleciona um intervalo de células rangeSelected, o evento é emitido.

    Hierarchical Grid None selection

    Se você deseja desativar a seleção de células, basta definir a [cellSelection]="'none'" propriedade. Neste modo, quando você clica sobre a célula ou tenta navegar com o teclado, a célula não é selecionada, apenas a activation style é aplicada e será perdida quando você rolar ou clicar sobre outro elemento da página. A única maneira de definir a 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 o index arquivo, onde todas as funções do tema e mixins de componentes vivem:

    @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 isso, podemos fazer uso das contrast-color funções e color. 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 as contrast-color funções and color, sempre podemos codificar os valores de cor.

    Create custom theme

    Em seguida, criamos um novo tema que estende o grid-theme passando nosso text-color, background-color e border-yellow variáveis como $cell-selected-text-color, $cell-selected-background e $cell-active-border-color respectivamente:

    $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 Change Theme pelo tema global selecionado.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.