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

    ¿Qué es el acordeón Angular?

    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.

    Ejemplo de acordeón Angular

    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.

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for Angular y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Primeros pasos con 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
    cmd

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

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

    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.

    Usando el componente de acordeón Angular

    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.

    Declarando un acordeón

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

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

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

    Animaciones de acordeón Angular

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

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

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

    Usando los métodos colapsoTodo y expandirTodo puede contraer y expandir respectivamente todos los IgxExpansionPanels del IgxAccordion mediante programación.

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

    Ejemplo de plantilla de acordeón Angular

    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.

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    Escenario de acordeones Angular

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

    Puedes ver el resultado a continuación.

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    App Builder | Banner de llamada a la acción

    Navegación por teclado

    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

    Estilo

    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';
    scss

    Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el expansion-panel-theme y acepta los parámetros an,and $header-focus-background​ ​$expanded-margin​ ​$body-color.

    $custom-panel-theme: expansion-panel-theme(
      $expanded-margin: 10px,
      $body-color: #282885,
      $header-focus-background: #efefef
    );
    scss

    El último paso es incluir el tema del componente.

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

    Manifestación

    EXAMPLE

    Referencia de API

    Recursos adicionales

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