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 umigx-accrodion​ ​e seus painéis de expansão. A amostra também demonstra os dois tipos de comportamento de expansão. O botão switch configura a propriedade singleBranchExpand para alternar entre um e múltiplos ramos a serem expandidos 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 issoIgxAccordionModule no seu arquivo app.module.ts.

// app.module.ts

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

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

Alternativamente,16.0.0 você pode importarIgxAccordionComponent como uma dependência independente ou usar oIGX_ACCORDION_DIRECTIVES token para importar o componente e todos os seus componentes e diretivas de suporte.

// home.component.ts

...
import { IGX_ACCORDION_DIRECTIVES } from 'igniteui-angular/accordion';
// 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 ou diretivas Ignite UI for Angular Accordion, pode começar com uma configuração básica doigx-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 todosigx-expansion-panel os 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 accessor de painéis, você pode obter uma referência à coleção que contém todos os painéis de expansão filhos doigx-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.

Quanto à animação, você tem duas opções. Primeiro, você poderia definir aanimationSettings propriedade no componente acordeão:

import { useAnimation, slideInLeft, slideOutRight } from '@angular/animations';
// import { useAnimation, slideInLeft, slideOutRight } from '@infragistics/igniteui-angular/animations'; 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 usandoslideInLeft animaçõesslideOutRight do nosso conjunto de animações para fazer o conteúdo componente aparecer do lado esquerdo e desaparecer para a direita ao colapsar o conteúdo. Personalizamos ainda mais as animações sobrescrevendo alguns 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 desligar a animação do IgxAccordionComponent, podeanimationSettings ser configurado paranull.

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

Eleaccordion serve apenas como recipiente para o subjacentepanels. Estilos podem ser aplicados diretamente através do tema do painel, conforme descrito nostyling section of the IgxExpansionPanel topic.

Por design, há uma margem definida para os painéis expandidos, caso estejam posicionados dentro de umigx-accordion. Para modificá-lo, há uma propriedade exposta dentro do tema do painel de expansão igx. Para aproveitar as funções expostas pelo motor de temas, precisamos importar oindex arquivo 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 osexpansion-panel-theme parâmetros e aceita os parâmetros a$header-background,$body-color and$expanded-margin. O tema atribui automaticamente as cores do primeiro plano, preto ou branco, com base em quais oferecem melhor contraste com os fundos especificados.

$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