Visão geral do componente Angular Accordion

What is Angular Accordion?

O Angular Accordion é um componente GUI para construir painéis expansíveis verticais com cabeçalhos clicáveis e seções de conteúdo associadas, exibidos em um único contêiner. O acordeão é comumente usado para reduzir a necessidade de rolar por várias seções de conteúdo em uma única página. Ele oferece navegação por teclado e API para controlar o estado de expansão dos painéis subjacentes.

Os usuários podem interagir e navegar entre uma lista de itens, como miniaturas ou rótulos. Cada um desses itens pode ser alternado (expandido ou recolhido) para revelar as informações contidas. Dependendo da configuração, pode haver um ou vários itens expandidos por vez.

Angular Accordion Example

O seguinte é um exemplo básico de uma seção de FAQ Angular Accordion. Ele opera como um acordeão, com seções trabalhando individualmente. Você pode alternar cada bloco de texto com um único clique, enquanto expande vários painéis ao mesmo tempo. Dessa forma, você pode ler informações mais facilmente, sem ter que ir e voltar entre um painel que se expande e se recolhe automaticamente, o que oculta a seção aberta anteriormente todas as vezes.

Nele, você pode ver como definir um igx-accrodion e seus painéis de expansão. O exemplo também demonstra os dois tipos de comportamento de expansão. O botão switch define a propriedade singleBranchExpand para alternar entre ramificações únicas e múltiplas a serem expandidas ao mesmo tempo.

Getting Started with Ignite UI for Angular Accordion

Para começar a usar o componente Ignite UI for Angular Accordion, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

ng add igniteui-angular

Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

O próximo passo é importar o IgxAccordionModule no seu arquivo app.module.ts.

// app.module.ts

...
import { IgxAccordionModule } from 'igniteui-angular';
// import { IgxAccordionModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxAccordionModule],
    ...
})
export class AppModule {}

Como alternativa, a partir da 16.0.0 você pode importar o IgxAccordionComponent como uma dependência autônoma ou usar o token IGX_ACCORDION_DIRECTIVES para importar o componente e todos os seus componentes e diretivas de suporte.

// home.component.ts

...
import { IGX_ACCORDION_DIRECTIVES } from 'igniteui-angular';
// import { IGX_ACCORDION_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-accordion>
        <igx-expansion-panel>
            <igx-expansion-panel-header>
                <igx-expansion-panel-title>Title Panel 1</igx-expansion-panel-title>
            </igx-expansion-panel-header>
            <igx-expansion-panel-body>
                Content Panel 1
            </igx-expansion-panel-body>
        </igx-expansion-panel>
    </igx-accordion>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_ACCORDION_DIRECTIVES]
    /* or imports: [IgxAccordionComponent] */
})
export class HomeComponent {}

Agora que você importou o módulo Ignite UI for Angular Accordion ou as diretivas, você pode começar com uma configuração básica do igx-accordion e seus painéis.

Using the Angular Accordion Component

Cada seção no IgxAccordionComponent é definida usando um expansion panel. Os painéis fornecem as propriedades disabled, collapsed e animationSettings, que lhe dão a capacidade de configurar os estados do painel conforme sua necessidade.

Declaring an accordion

O acordeão envolve todos os igx-expansion-panel s declarados dentro dele.

<igx-accordion #accordion [singleBranchExpand]="true">
    <igx-expansion-panel>
        <igx-expansion-panel-header>
            <igx-expansion-panel-title>Title Panel 1</igx-expansion-panel-title>
        </igx-expansion-panel-header>
        <igx-expansion-panel-body>
            Content Panel 1
        </igx-expansion-panel-body>
    </igx-expansion-panel>
    <igx-expansion-panel>
        <igx-expansion-panel-header>
            <igx-expansion-panel-title>Title Panel 2</igx-expansion-panel-title>
        </igx-expansion-panel-header>
        <igx-expansion-panel-body>
            Content Panel 2
        </igx-expansion-panel-body>
    </igx-expansion-panel>
</igx-accordion>

Usando o acessador de painéis, você pode obter uma referência à coleção que contém todos os painéis de expansão filhos do igx-accordion.

@ViewChild('accordion', { static: true })
public accordion!: IgxAccordionComponent;

this.accordion.panels;

Conforme demonstrado acima, a propriedade singleBranchExpand permite definir se um ou vários painéis podem ser expandidos ao mesmo tempo.

Angular Accordion Animations

Angular Accordion suporta animações para ações de expansão e recolhimento dos painéis. O comportamento da animação pode ser personalizado. Normalmente, as animações podem ser definidas para cada painel de expansão individualmente. No entanto, também pode ser aplicado a todos os painéis de uma vez no nível IgxAccordionComponent. Isso dá aos usuários a capacidade de desabilitar animações para todas as seções de uma vez por meio da propriedade animations do IgxAccordionComponent.

Em relação à animação, você tem duas opções. Primeiro, você pode definir a propriedade animationSettings no componente accordion:

import { useAnimation } from '@angular/animations';
import { slideInLeft, slideOutRight } from 'igniteui-angular';
// import { slideInLeft, slideOutRight } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    ...
})
export class AccordionComponent {
    public animationSettingsCustom = {
        closeAnimation: useAnimation(slideOutRight, {
            params: {
                duration: '100ms',
                toPosition: 'translateX(25px)'
            }
        }),
        openAnimation: useAnimation(slideInLeft, {
            params: {
                duration: '500ms',
                fromPosition: 'translateX(-15px)',
                startOpacity: 0.1
            }
        })
    };
}

Como você pode ver, estamos usando animações slideInLeft e slideOutRight do nosso conjunto interno de animações para fazer o conteúdo do componente aparecer do lado esquerdo e desaparecer para a direita ao recolher o conteúdo. Personalizamos ainda mais as animações substituindo alguns dos parâmetros das animações.

O snippet a seguir demonstra como passar as configurações de animação para o componente:

<igx-accordion #accordion [animationSettings]="animationSettingsCustom">
    ...
</igx-accordion>

Note

Se você quiser desativar a animação do IgxAccordionComponent, o animationSettings pode ser definido como null.

Como alternativa, você tem a capacidade de definir a entrada animationSettings de cada painel de expansão.

<igx-accordion #accordion [singleBranchExpand]="true">
     <igx-expansion-panel [animationSettings]="slideLeftRightSettings">
        <igx-expansion-panel-header>
            <igx-expansion-panel-title>Title Panel 1</igx-expansion-panel-title>
        </igx-expansion-panel-header>
        <igx-expansion-panel-body>
            Content Panel 1
        </igx-expansion-panel-body>
    </igx-expansion-panel>
    <igx-expansion-panel [animationSettings]="slideTopBottomSettings">
        <igx-expansion-panel-header>
            <igx-expansion-panel-title>Title Panel 2</igx-expansion-panel-title>
        </igx-expansion-panel-header>
        <igx-expansion-panel-body>
            Content Panel 2
        </igx-expansion-panel-body>
    </igx-expansion-panel>
</igx-accordion>

Usando os métodos collapseAll e expandAll, você pode, respectivamente, recolher e expandir todos os IgxExpansionPanels do IgxAccordion programaticamente.

Note

Se a propriedade singleBranchExpand estiver definida como true, chamar o método expandAll expandirá apenas o último painel.

Angular Accordion Templating Example

Com o componente Angular Accordion, você pode personalizar a aparência do cabeçalho e do painel de conteúdo. O exemplo abaixo demonstra como opções de filtragem elaboradas podem ser implementadas usando a funcionalidade de modelagem interna do IgxExpansionPanel.

Nested Angular Accordions Scenario

No exemplo de acordeão Angular a seguir, criaremos uma seção de FAQ complexa para ilustrar como você pode lidar com esse cenário de aplicação comum. No exemplo, o aninhado IgxAccordionComponent é obtido adicionando um acordeão dentro do corpo de um painel de expansão.

<igx-accordion #accordion>
     <igx-expansion-panel>
        <igx-expansion-panel-header>
            <igx-expansion-panel-title>Title Panel 1</igx-expansion-panel-title>
        </igx-expansion-panel-header>
        <igx-expansion-panel-body>
            <igx-accordion #childAccordion>
                <igx-expansion-panel>
                    <igx-expansion-panel-header>
                        <igx-expansion-panel-title>Title Nested Panel 1</igx-expansion-panel-title>
                    </igx-expansion-panel-header>
                    <igx-expansion-panel-body>
                        Content Nested Panel 1
                    </igx-expansion-panel-body>
                </igx-expansion-panel>
                ...
            </igx-accordion>
        </igx-expansion-panel-body>
    </igx-expansion-panel>
    ...
</igx-accordion>

Você pode ver o resultado abaixo.

Keyboard Navigation

A navegação pelo teclado na Ignite UI for Angular Accordion fornece uma rica variedade de interações de teclado para o usuário final. Essa funcionalidade é habilitada por padrão e permite que os usuários finais naveguem facilmente pelos painéis. A navegação IgxAccordionComponent é compatível com os padrões de acessibilidade W3C e conveniente de usar.

Combinações de teclas

• Tab- move o foco para o primeiro (se o foco estiver antes do acordeão)/próximo painel
• Shift + Tab- move o foco para o último (se o foco estiver após o acordeão)/painel anterior
• Seta para baixo- move o foco para o painel abaixo
• Seta para cima- move o foco para o painel acima
• Alt + Seta para baixo- expande o painel em foco no acordeão
• Alt + Seta para cima- recolhe o painel em foco no acordeão
• Shift + Alt + Seta para baixo- expande todos os painéis habilitados (se singleBranchExpand estiver definido como verdadeiro, expande o último painel habilitado)
• Shift + Alt + Seta para cima- recolhe todos os painéis habilitados
• Home- navega até o PRIMEIRO painel habilitado no acordeão
• Fim- navega para o ÚLTIMO painel habilitado no acordeão

Estilização

O accordion serve apenas como um contêiner para os panels subjacentes. Os estilos podem ser aplicados diretamente por meio do tema do painel, conforme descrito na styling section of the IgxExpansionPanel topic.

Por design, há uma margem definida para os painéis expandidos, caso eles sejam posicionados dentro de um igx-accordion. Para modificá-lo, há uma propriedade exposta dentro do tema igx-expansion-panel . Para aproveitar as funções expostas pelo mecanismo de tema, temos que importar o arquivo index em nosso arquivo de estilo:

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

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

Seguindo a abordagem mais simples, criamos um novo tema que estende o expansion-panel-theme e aceita os parâmetros $expanded-margin, $body-color e $header-focus-background.

$custom-panel-theme: expansion-panel-theme(
  $expanded-margin: 10px,
  $body-color: #282885,
  $header-focus-background: #efefef
);

A última etapa é incluir o tema do componente.

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

Demo

API Reference

• API do IgxAccordion
• API do Painel de Expansão Igx
• API do IgxExpansionPanelHeader
• API do IgxExpansionPanelBody
• Estilos do IgxExpansionPanel

Additional Resources

Nossa comunidade é ativa e sempre acolhe novas ideias.

• Ignite UI for Angular Fóruns
• Ignite UI for Angular GitHub