Descripción general del componente Acordeón Angular

What is Angular Accordion?

Angular Accordion es un componente de interfaz gráfica de usuario para crear paneles verticales expandibles con encabezados en los que se puede hacer clic y secciones de contenido asociadas, que se muestran en un solo contenedor. El acordeón se utiliza comúnmente para reducir la necesidad de desplazarse por varias secciones de contenido en una sola página. Ofrece navegación mediante teclado y API para controlar el estado de expansión de los paneles subyacentes.

Los usuarios pueden interactuar y navegar entre una lista de elementos, como miniaturas o etiquetas. Cada uno de esos elementos se puede alternar (expandir o contraer) para revelar la información que contiene. Dependiendo de la configuración, puede haber uno o varios elementos expandidos a la vez.

Angular Accordion Example

El siguiente es un ejemplo básico de una sección de preguntas frecuentes Angular Accordion. Funciona como un acordeón, con secciones que funcionan individualmente. Puede alternar cada bloque de texto con un solo clic, mientras expande varios paneles al mismo tiempo. De esta manera, puede leer la información más fácilmente, sin tener que ir y venir entre un panel que se expande y se contrae automáticamente, lo que oculta la sección abierta anteriormente cada vez.

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 comenzar con el componente Ignite UI for Angular Accordion, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

ng add igniteui-angular

Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importarlosIgxAccordionModule en tu archivo 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 puedes importarlosIgxAccordionComponent como una dependencia independiente, o usar elIGX_ACCORDION_DIRECTIVES token para importar el componente y todos sus componentes y directivas de soporte.

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

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 sección del IgxAccordionComponent se define mediante un panel de expansión. Los paneles proporcionan propiedades de configuración deshabilitadas, colapsadas y de animación, que le brindan la posibilidad de configurar los estados del panel según sus necesidades.

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;

Como se demostró anteriormente, la propiedad singleBranchExpand le brinda la posibilidad de establecer si se pueden expandir uno o varios paneles a la vez.

Angular Accordion Animations

Angular Accordion admite animaciones para las acciones de expansión y contracción de los paneles. El comportamiento de la animación se puede personalizar. Normalmente, las animaciones se pueden configurar para cada panel de expansión individualmente. Sin embargo, también se podría aplicar a todos los paneles a la vez en el nivel IgxAccordionComponent. Esto proporciona a los usuarios la capacidad de deshabilitar las animaciones para todas las secciones a la vez a través de la propiedad animations de IgxAccordionComponent.

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

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

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.

El siguiente fragmento demuestra cómo pasar la configuración de animación al 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.

Alternativamente, tiene la posibilidad de configurar la entrada de configuración de animación de cada panel de expansión.

<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 los métodos colapsoTodo y expandirTodo puede contraer y expandir respectivamente todos los IgxExpansionPanels del IgxAccordion mediante programación.

Note

Si la propiedad singleBranchExpand se establece en verdadero, llamar al método expandAll expandiría solo el último panel.

Angular Accordion Templating Example

Con el componente Angular Acordeón, puede personalizar la apariencia del encabezado y el panel de contenido. En el ejemplo siguiente se muestra cómo se pueden implementar opciones de filtrado elaboradas mediante la funcionalidad de plantillas integrada de IgxExpansionPanel.

Nested Angular Accordions Scenario

En el siguiente ejemplo de acordeón Angular, vamos a crear una compleja sección de preguntas frecuentes para ilustrar cómo se puede llevar a cabo este escenario de aplicación común. En el ejemplo, IgxAccordionComponent anidado se logra agregando un acordeón dentro del cuerpo de un panel de expansión.

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

Puedes ver el resultado a continuación.

Keyboard Navigation

La navegación por teclado en el acordeón Ignite UI for Angular proporciona una amplia variedad de interacciones de teclado para el usuario final. Esta funcionalidad está habilitada de forma predeterminada y permite a los usuarios finales navegar fácilmente por los paneles. La navegación IgxAccordionComponent cumple con los estándares de accesibilidad del W3C y es cómoda de usar.

Combinaciones de teclas

• Tabulador: mueve el foco al primer panel (si el foco está antes del acordeón)/siguiente
• Mayús + Tabulador: mueve el foco al último (si el foco está después del acordeón)/panel anterior
• Flecha hacia abajo: mueve el foco al panel de abajo
• Flecha hacia arriba: mueve el foco al panel de arriba
• Alt + Flecha abajo: expande el panel enfocado en el acordeón
• Alt + Flecha arriba: colapsa el panel enfocado en el acordeón
• Shift + Alt + Flecha abajo: expande todos los paneles habilitados (si singleBranchExpand está configurado en verdadero, expande el último panel habilitado)
• Shift + Alt + Flecha arriba: colapsa todos los paneles habilitados
• Inicio: navega al PRIMER panel habilitado en el acordeón
• Fin: navega al ÚLTIMO panel habilitado en el acordeón

Estilismo

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

El último paso es incluir el tema del componente.

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

Demo

API Reference

• IgxAcordeón API
• API IgxExpansionPanel
• API IgxExpansionPanelHeader
• API IgxExpansionPanelBody
• Estilos de panel IgxExpansion

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub