Descripción general de los componentes del acordeón Angular

What is Angular Accordion?

Angular Accordion es un componente GUI 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 usa comúnmente para reducir la necesidad de desplazarse por varias secciones de contenido en una sola página. Ofrece navegación por 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 acordeón Angular de una sección de preguntas frecuentes. 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 puedes 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, que oculta la sección abierta previamente 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 a la 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 ha importado el módulo o las directivas Ignite UI for Angular Accordion, puede comenzar con una configuración básica del igx-accordion 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 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 podría aplicarse a todos los paneles a la vez en el nivel IgxAccordionComponent. Esto brinda a los usuarios la capacidad de deshabilitar animaciones para todas las secciones a la vez a través de la propiedad de animaciones 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 Accordion, puede personalizar la apariencia del encabezado y del panel de contenido. El siguiente ejemplo demuestra cómo se pueden implementar opciones de filtrado elaboradas utilizando la funcionalidad de plantillas incorporada de IgxExpansionPanel.

Nested Angular Accordions Scenario

En el siguiente ejemplo de acordeón Angular, crearemos una sección compleja de preguntas frecuentes para ilustrar cómo puede abordar este escenario de aplicación común. En el ejemplo, el 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.

La navegación con el teclado en la Ignite UI for Angular Accordion proporciona una rica variedad de interacciones con el teclado para el usuario final. Esta funcionalidad está habilitada de forma predeterminada y permite a los usuarios finales navegar fácilmente a través de los paneles. La navegación de IgxAccordionComponent cumple con los estándares de accesibilidad W3C y es fácil 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

Angular Accordion Styling

El acordeón sirve únicamente como contenedor para los paneles subyacentes. Los estilos se pueden aplicar directamente a través del tema del panel, como se describe en la sección de estilo del tema IgxExpansionPanel.

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 tema del panel de expansión y acepta un parámetro $expanded-margin.

$custom-panel-theme: expansion-panel-theme(
    $expanded-margin: 0px
);

Using CSS Variables

El último paso es incluir el tema del componente.

:host {
    @include css-vars($custom-panel-theme);
}

Using Theme Overrides

Para aplicar estilo a los componentes en Internet Explorer 11, tenemos que utilizar un enfoque diferente, ya que allí no se admiten variables CSS.

Si el componente utiliza Emulated ViewEncapsulation, es necesario penetrate esta encapsulación usando::ng-deep. Para evitar que el tema personalizado se filtre a otros componentes, asegúrese de incluir::ng-deep en un selector:host:

:host {
    ::ng-deep {
        @include expansion-panel($custom-panel-theme);    
    }
}

API Reference

Additional Resources

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

Descripción general de los componentes del acordeón Angular

What is Angular Accordion?

Angular Accordion Example

Getting Started with Ignite UI for Angular Accordion

Using the Angular Accordion Component

Declaring an accordion

Angular Accordion Animations

Note

Note

Angular Accordion Templating Example

Nested Angular Accordions Scenario

Keyboard Navigation

Angular Accordion Styling

Using CSS Variables

Using Theme Overrides

API Reference

Additional Resources

Tematización