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.

In it, you can see how to define an igx-accrodion and its expansion panels. The sample also demonstrates the two types of expansion behavior. The switch button sets the singleBranchExpand property to toggle between single and multiple branches to be expanded at a time.

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.

The next step is to import the IgxAccordionModule in your app.module.ts file.

// app.module.ts

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

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

Alternatively, as of 16.0.0 you can import the IgxAccordionComponent as a standalone dependency, or use the IGX_ACCORDION_DIRECTIVES token to import the component and all of its supporting components and directives.

// 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 {}

Now that you have the Ignite UI for Angular Accordion module or directives imported, you can start with a basic configuration of the igx-accordion and its panels.

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

The accordion wraps all igx-expansion-panels declared inside it.

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

Using the panels accessor you can get a reference to the collection containing all expansion panels children of the 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.

With regards to animation, you have two options. First, you could set the animationSettings property on the accordion component:

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
            }
        })
    };
}

As you can see, we are using slideInLeft and slideOutRight animations from our inbuilt suite of animations to make the component content appear from the left side and disappear to the right when collapsing the content. We further customize the animations by overriding some of the animations' parameters.

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

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

Note

If you would like to turn off the animation for the IgxAccordionComponent the animationSettings could be set to 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

The accordion serves only as a container for the underlying panels. Styles can be applied directly through the panel's theme, as described in the styling section of the IgxExpansionPanel topic.

By design, there is a margin set to the expanded panels, in case that they are positioned within an igx-accordion. In order to modify it there is a property exposed inside the igx-expansion-panel theme. In order to take advantage of the functions exposed by the theming engine, we have to import the index file in our style file:

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

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

Following the simplest approach, we create a new theme that extends the expansion-panel-theme and accepts a $header-background, $body-color and $expanded-margin parameters. The theme automatically assigns foreground colors, either black or white, based on which provides better contrast with the specified backgrounds.

$custom-panel-theme: expansion-panel-theme(
  $header-background: #011627,
  $body-background: #f0ece7,
  $expanded-margin: 10px
);

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