Angular Barra de ferramentas de grade -Ignite UI for Angular

A Grade em Ignite UI for Angular fornece umIgxGridToolbarComponent que é essencialmente um contêiner para operações de interface. A barra de ferramentas Angular está localizada no topo do componente Angular, ou seja, a Grade, e ela corresponde ao seu tamanho horizontal. O contêiner da barra de ferramentas pode hospedar controles de interface pré-definidos para os seguintes recursos do Grid:

Ocultação de coluna
Fixação de coluna
Exportando para Excel, CSV e PDF
Filtragem avançada

ou qualquer outro conteúdo personalizado. A barra de ferramentas e os componentes de interface do usuário predefinidos dão suporte a eventos Angular e expõem a API para desenvolvedores.

Os componentes pré-definidosactions etitle de interface são adicionados dentro do<igx-grid-toolbar> e tudo isso é necessário para ter uma barra de ferramentas que forneça interações padrão com os recursos correspondentes da Grade:

<igx-grid [data]="data" [autoGenerate]="true">
    <igx-grid-toolbar>
        <igx-grid-toolbar-title>Grid Toolbar</igx-grid-toolbar-title>
        <igx-grid-toolbar-actions>
            <igx-grid-toolbar-advanced-filtering><igx-grid-toolbar-advanced-filtering>
            <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
            <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
            <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
        </igx-grid-toolbar-actions>
    </igx-grid-toolbar>
</igx-grid>

Nota: Como visto no trecho de código acima, os componentes pré-definidosactions da interface estão envolvidos no<igx-grid-toolbar-actions> container. Dessa forma, o título da barra de ferramentas fica alinhado à esquerda da barra e as ações à direita da barra de ferramentas.

Obviamente, cada uma dessas interfaces do usuário pode ser adicionada independentemente uma da outra ou pode não ser adicionada. Dessa forma, o contêiner da barra de ferramentas será renderizado vazio:

<igx-grid [data]="data" [autoGenerate]="true">
    <igx-grid-toolbar>
    </igx-grid-toolbar>
</igx-grid>

Para obter uma visão abrangente de cada um dos componentes padrão da interface do usuário, continue lendo a seção Recursos abaixo.

Características

A barra de ferramentas é ótima para separar lógica / interações que afetam a grade como um todo. Conforme mostrado acima, ele pode ser configurado para fornecer componentes padrão para controle, ocultação de coluna, fixação de coluna, filtragem avançada e exportação de dados da grade. Esses recursos podem ser ativados independentemente uns dos outros, seguindo um padrão semelhante ao componente de cartão do pacote Ignite UI for Angular. Abaixo estão listados os principais recursos da barra de ferramentas com código de exemplo para cada um deles.

Title

A definição de um título para a barra de ferramentas em sua grade é obtida usando o IgxGridToolbarTitleComponent. Os usuários podem fornecer qualquer coisa, desde texto simples até modelos mais complexos.

<igx-grid-toolbar>
    <igx-grid-toolbar-title>Grid toolbar title</igx-grid-toolbar-title>
</igx-grid-toolbar>

Actions

A barra de ferramentas expõe um contêiner específico onde os usuários podem colocar ações/interações em relação à grade pai. Assim como acontece com a parte do título da barra de ferramentas, os usuários podem fornecer qualquer coisa dentro dessa parte do modelo, incluindo os componentes de interação da barra de ferramentas padrão.

<igx-grid-toolbar>
    <igx-grid-toolbar-actions>
        <button igxButton>Action</button>
        <igx-select></igx-select>
        ...
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>

Cada ação agora expõe uma forma de alterar as configurações de sobreposição do diálogo de ações usando aoverlaySettings entrada, por exemplo:

<igx-grid-toolbar-actions>
    <igx-grid-toolbar-pinning [overlaySettings]="overlaySettingsScaleCenter"></igx-grid-toolbar-pinning>
    <igx-grid-toolbar-hiding [overlaySettings]="overlaySettingsAuto"></igx-grid-toolbar-hiding>
</igx-grid-toolbar-actions>

public data: any[];
public positionStrategyScaleCenter = new GlobalPositionStrategy({
    openAnimation: scaleInCenter,
    closeAnimation: scaleOutCenter
});
public overlaySettingsScaleCenter = {
    positionStrategy: this.positionStrategyScaleCenter,
    scrollStrategy: new AbsoluteScrollStrategy(),
    modal: true,
    closeOnEscape: true
};

public positionStrategyAuto = new AutoPositionStrategy();
public overlaySettingsAuto = {
    positionStrategy: this.positionStrategyAuto,
    scrollStrategy: new AbsoluteScrollStrategy(),
    modal: false,
    closeOnEscape: false
};
constructor() {
    this.data = athletesData;
}

O overlaySettings padrão está usando ConnectedPositionStrategy com estratégia de rolagem absoluta, modal definido como false, com interações de fechamento ao escape e fechamento ao clicar externo.

Column pinning

O componente Fixação da barra de ferramentas fornece a interface do usuário padrão para interagir com a fixação de coluna na grade. O componente é configurado para funcionar imediatamente com a grade pai contendo a barra de ferramentas, bem como várias propriedades de entrada para personalizar a interface do usuário, como o título do componente, o espaço reservado para a entrada do componente e a altura da própria lista suspensa.

<igx-grid-toolbar>
    <igx-grid-toolbar-actions>
        <igx-grid-toolbar-pinning
            title="Grid pinned columns"
            prompt="Filter column collection"
            columnListHeight="400px"
        >
        </igx-grid-toolbar-pinning>
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>

Column hiding

O componente Ocultação da barra de ferramentas fornece a interface do usuário padrão para interagir com a ocultação de colunas. Expõe as mesmas propriedades de entrada para personalizar a interface do usuário, como o título do componente, o espaço reservado para a entrada do componente e a altura da própria lista suspensa.

<igx-grid-toolbar>
    <igx-grid-toolbar-actions>
        <igx-grid-toolbar-hiding
            title="Grid column hiding"
            prompt="Filter column collection"
            columnListHeight="400px"
        >
        </igx-grid-toolbar-hiding>
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>

Advanced filtering

O componente Filtragem Avançada da Barra de Ferramentas fornece a interface do usuário padrão para o recurso Filtragem Avançada. O componente expõe uma maneira de alterar o texto padrão do botão.

<igx-grid-toolbar>
    <igx-grid-toolbar-actions>
        <igx-grid-toolbar-advanced-filtering>Custom text for the toggle button</igx-grid-toolbar-advanced-filtering>
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>

Data exporting

Como nas demais ações da barra de ferramentas, a exportação é feita por meio de um componente Toolbar Exporter logo de fábrica. O componente de exportação utiliza o respectivo serviço para o formato de dados alvo (Excel, CSV, PDF). Isso significa que, se o serviço respectivo não for fornecido pela cadeia de injeção de dependências, o componente não poderá exportar nada. Se precisar de uma revisão do DI em Angular, confira o guia oficial. Aqui está um trecho de exemplo mostrando como ativar todos os serviços de exportação para sua aplicação.

// app.module.ts

import { IgxExcelExporterService, IgxCsvExporterService, IgxPdfExporterService } from 'igniteui-angular/grids/core';
// import { IgxExcelExporterService, IgxCsvExporterService, IgxPdfExporterService } from '@infragistics/igniteui-angular/grids/core'; for licensed package

@NgModule({
    ...
    providers: [IgxExcelExporterService, IgxCsvExporterService, IgxPdfExporterService ]
})
export class AppModule { ... }

Note

Na v12.2.1 e posterior, os serviços de exportador são fornecidos na raiz, o que significa que você não precisa mais declará-los nos provedores AppModule.

O componente exportador da barra de ferramentas expõe várias propriedades de entrada para personalizar a interface do usuário e a experiência de exportação. Isso varia de alterar o texto de exibição a ativar/desativar opções no menu suspenso e personalizar o nome do arquivo gerado. Para obter referência completa, consulte a documentação da API para o componente exportador da barra de ferramentas.

Aqui está um trecho mostrando algumas das opções que podem ser personalizadas por meio do modelo Angular:

<igx-grid-toolbar>
    <igx-grid-toolbar-actions>
        <igx-grid-toolbar-exporter
            <!-- If active, enables the CSV export entry in the dropdown UI -->
            [exportCSV]="csvExportEnabled"
            <!-- If active, enables the excel export entry in the dropdown UI -->
            [exportExcel]="excelExportEnabled"
            <!-- If active, enables the PDF export entry in the dropdown UI -->
            [exportPDF]="pdfExportEnabled"
            <!-- The name of the generated export file without the file extension -->
            filename="exported_data"
        >
            Custom text for the exporter button
            <span excelText>Custom text for the excel export entry</span>
            <span csvText>Custom text for the CSV export entry</span>
            <span pdfText>Custom text for the PDF export entry</span>
        </igx-grid-toolbar-exporter>
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>

Além de alterar o nome do arquivo exportado, o usuário pode configurar ainda mais as opções do exportador aguardando o evento toolbarExporting e personalizando a entrada de opções nas propriedades do evento.

Note

Por padrão, ao exportar para CSV, o exportador exporta usando um separador de vírgula e usa uma extensão '.csv' para o arquivo de saída. Você pode personalizar esses parâmetros de exportação assinando eventos do exportador ou alterando os valores dos campos de opções do exportador. Você também pode cancelar o processo de exportação definindo o campo cancel dos argumentos do evento como true.

O snippet de código a seguir demonstra a assinatura do evento de exportação da barra de ferramentas e a configuração das opções do exportador:

<igx-grid (toolbarExporting)="configureExport($event)" ></igx-grid>

configureExport(args: IGridToolbarExportEventArgs) {
    const options: IgxExporterOptionsBase = args.options;
    
    options.fileName = `Report_${new Date().toDateString()}`;

    if (options instanceof IgxExcelExporterOptions) {
        options.columnWidth = 10;
    } else {
        options.fileType = CsvFileTypes.TSV;
        options.valueDelimiter = '\t';
    }

    args.exporter.columnExporting.subscribe((columnArgs: IColumnExportingEventArgs) => {
        
        // Don't export image fields
        columnArgs.cancel = columnArgs.header === 'Athlete' ||
                            columnArgs.header === 'Country';
        
        
    });
}

O exemplo a seguir demonstra como personalizar os arquivos exportados:

Exporting Indicator

Ao usar o componente exportador da barra de ferramentas padrão, sempre que uma operação de exportação ocorrer, a barra de ferramentas mostrará um indicador de progresso enquanto a operação estiver em andamento. Além disso, os usuários podem definir a propriedade showProgress da barra de ferramentas e usá-la para suas próprias operações de longa duração ou apenas como outra maneira de significar uma ação que está ocorrendo na grade. A amostra abaixo tem uma quantidade significativa de dados. Enquanto os dados estão sendo exportados, a barra de progresso é mostrada. Além disso, possui outro botão que simula uma operação de longa duração na grade:

Custom Content

Note

Isso substitui a antiga diretiva de modelo da barra de ferramentas. Se você estiver migrando de uma versão anterior à v11, nossas migrações lidarão com a movimentação do conteúdo do modelo. No entanto, não lidamos com as associações no modelo, portanto, verifique novamente os arquivos de modelo modificados após a conclusão da migração.

Se a parte de ações do componente da barra de ferramentas não for suficiente para um caso de uso específico, a própria barra de ferramentas terá uma projeção de conteúdo geral em que os usuários podem fornecer interface do usuário adicional. Se o usuário precisar da respectiva instância de grade para chamadas ou associações de API, ele poderá criar uma variável de referência de modelo.

Aqui está um trecho de exemplo:

<igx-grid #gridRef ...>

    ...
    <igx-grid-toolbar>
        <igx-grid-toolbar-title>{{ titleBinding }}</igx-grid-toolbar-title>

        <!--
            Everything between the toolbar tags except the default toolbar components/directives
            will be projected as custom content.
         -->
        <button igxButton="flat" igxRipple (click)="#gridRef.clearSort()">
            <igx-icon fontSet="material">clear</igx-icon>
            Clear Sort
        </button>

        <igx-grid-toolbar-actions>
            ...
        </igx-grid-toolbar-actions>
    </igx-grid-toolbar>

</igx-grid>

O exemplo a seguir demonstra como adicionar um botão adicional à barra de ferramentas para limpar o conjunto de classificação clicando nos cabeçalhos das colunas:

Estilização

Para começar a estilizar a barra de ferramentas, precisamos importar o arquivo de índice, onde todas as funções do tema e mixins de componentes residem:

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

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

Primeiro, vamos criar uma nova paleta.

$my-dark-palette: palette(
  $primary: #2466ff,
  $secondary: #ffcd0f,
  $surface: #2a2b2f,
  $grays: #fff,
);

$my-dark-color: color($my-dark-palette, 'surface');

Agora, crie um novo tema que estenda egrid-toolbar-theme modifique os$background-color$title-text-color parâmetros e .

$dark-grid-toolbar-theme: grid-toolbar-theme(
  $background-color: $my-dark-color,
  $title-text-color: color($my-dark-palette, 'secondary'),
  $dropdown-background: $my-dark-color,
);

Para definir o tema dos menus de ações da coluna da barra de ferramentas, precisamos mudar o tema docolumn-actions-theme componente.

$dark-column-actions-theme: column-actions-theme(
  $title-color: color($my-dark-palette, 'secondary'),
  $background-color: color($my-dark-palette, 'surface')
);

Como as ações da coluna estão usando outros componentes -igx-buttoneigx-checkbox precisamos mudar os temas delas para combinar com o novo tema da barra de ferramentas.

$dark-button-theme: button-theme(
  $outlined-background: color($my-dark-palette, 'secondary'),
  $outlined-hover-background: color($my-dark-palette, 'grays', 100),
  $outlined-hover-text-color: color($my-dark-palette, 'secondary')
);

$dark-checkbox-theme: checkbox-theme(
  $tick-color: $my-dark-color,
);

A última etapa é incluir os temas recém-criados.

@include css-vars($dark-grid-toolbar-theme);
@include css-vars($dark-column-actions-theme);
@include css-vars($dark-checkbox-theme);
@include css-vars($dark-button-theme);

Note

Se o componente estiver usando umEmulated ViewEncapsulation, é necessário parapenetrate esse encapsulamento::ng-deep usar o estilo dos componentes dentro do componente da barra de ferramentas da grade:

@include css-vars($dark-grid-toolbar-theme);

:host {
  ::ng-deep {
    @include css-vars($dark-column-actions-theme);
    @include css-vars($dark-checkbox-theme);
    @include css-vars($dark-button-theme);
  }
}

Demo

API References

O serviço Grid Toolbar tem mais algumas APIs para explorar, listadas abaixo.

IgxGridComponent events:

toolbarExporting

Styles:

IgxGridComponent Styles

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

Angular barra de ferramentas de grade

Angular Toolbar Grid Example

Características

Title

Actions

Column pinning

Column hiding

Advanced filtering

Data exporting

Note

Note

Exporting Indicator

Custom Content

Note

Estilização

Note

Demo

API References

Additional Resources

Temas