Angular Barra de ferramentas de grade -Ignite UI for Angular

O Grid no Ignite UI for Angular fornece um IgxGridToolbarComponent que é essencialmente um contêiner para operações de interface do usuário. A barra de ferramentas Angular está localizada na parte superior do componente Angular, ou seja, a Grade e corresponde ao seu tamanho horizontal. O contêiner da barra de ferramentas pode hospedar controles de interface do usuário predefinidos para os seguintes recursos do Grid:

Ocultação de coluna
Fixação de coluna
Exportação do Excel
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 predefinidos actions e title de interface do usuário são adicionados dentro do e tudo isso <igx-grid-toolbar> é necessário para ter uma barra de ferramentas que forneça interações padrão com os recursos de grade correspondentes:

<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>

Observação: como visto no snippet de código acima, os componentes de interface do usuário predefinidos actions são encapsulados <igx-grid-toolbar-actions> no contêiner. Dessa forma, o título da barra de ferramentas é alinhado à esquerda da barra de ferramentas e as ações são alinhadas à 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 maneira de alterar as configurações de sobreposição da caixa de diálogo de ações usando a overlaySettings entrada, 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

Assim como o restante das ações da barra de ferramentas, a exportação é fornecida por meio de um componente Exportador da barra de ferramentas pronto para uso. O componente de exportação está usando o respectivo serviço para o formato de dados de destino (Distinguir-se CSV). Isso significa que, se o respectivo serviço não for fornecido por meio da cadeia de injeção de dependência, o componente não poderá exportar nada. Se você precisar de uma atualização sobre o DI em Angular, verifique o guia oficial. Aqui está um snippet de exemplo mostrando como habilitar todos os serviços de exportação para seu aplicativo.

// app.module.ts

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

@NgModule({
    ...
    providers: [IgxExcelExporterService, IgxCsvExporterService ]
})
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"
            <!-- 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>
        </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 e grid-toolbar-theme modifique os $background-color parâmetros e $title-text-color.

$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 tematizar os menus de ações da coluna da barra de ferramentas, temos que alterar o tema do column-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-button e igx-checkbox precisamos alterar seus temas para corresponder ao nosso 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 um Emulated ViewEncapsulation, será necessário penetrate usar esse encapsulamento para::ng-deep estilizar os 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