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.

En él podrás ver cómo definir un igx-accrodion y sus paneles de expansión. El ejemplo también demuestra los dos tipos de comportamiento de expansión. El botón de cambio establece la propiedad singleBranchExpand para alternar entre una y varias ramas que se expandirán a la vez.

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 importar IgxAccordionModule en su archivo 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 {}

Alternativamente, a partir de 16.0.0, puede importar IgxAccordionComponent como una dependencia independiente o usar el token IGX_ACCORDION_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.

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

Ahora que tiene el módulo o las directivas de Ignite UI for Angular Accordion importados, puede comenzar con una configuración básica de los igx-accordion paneles y sus paneles.

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

El acordeón envuelve todos igx-expansion-panel​ declarados en su interior.

<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 el descriptor de acceso de paneles puede obtener una referencia a la colección que contiene todos los paneles de expansión secundarios del 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.

En cuanto a la animación, tienes dos opciones. Primero, puedes configurar la propiedad animationSettings en el componente acordeón:

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 puede ver, estamos usando animaciones slideInLeft y slideOutRight de nuestro conjunto de animaciones incorporado para hacer que el contenido del componente aparezca desde el lado izquierdo y desaparezca hacia la derecha al contraer el contenido. Personalizamos aún más las animaciones anulando algunos de sus parámetros.

El siguiente fragmento demuestra cómo pasar la configuración de animación al componente:

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

Note

Si desea desactivar la animación para IgxAccordionComponent, la animationSettings se puede establecer en 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

El accordion sirve solo como contenedor para el subyacente panels. Los estilos se pueden aplicar directamente a través del tema del panel, como se describe en el styling section of the IgxExpansionPanel topic.

Por diseño, hay un margen establecido para los paneles expandidos, en caso de que estén colocados dentro de un igx-accordion. Para modificarlo hay una propiedad expuesta dentro del tema igx-expansion-panel. Para aprovechar las funciones expuestas por el motor de temas, tenemos que importar el archivo index en nuestro archivo 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';

Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el expansion-panel-theme y acepta los parámetros a,and $expanded-margin​ ​$header-background​ ​$body-color. El tema asigna automáticamente colores de primer plano, ya sea blanco o negro, en función de los cuales proporciona un mejor contraste con los fondos especificados.

$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