Descripción general del acordeón Web Components

La Ignite UI for Web Components Accordion es un componente de 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.

Web Components Accordion Example

El siguiente es un ejemplo básico Ignite UI for Web Components Accordion 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 acordeón 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 singleExpand para alternar entre una y varias ramas que se expandirán a la vez.

Getting Started with Web Components Accordion

Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:

npm install igniteui-webcomponents

Antes de utilizar IgcAccordionComponent, debe registrarlo de la siguiente manera:

import { defineComponents, IgcAccordionComponent } from 'igniteui-webcomponents';

defineComponents(IgcAccordionComponent);

Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Introducción.

Ahora puede comenzar con una configuración básica del IgcAccordionComponent y sus paneles.

Usage

Cada sección del componente Acordeón Web Components se define mediante un panel de expansión Web Components. Los paneles proporcionan propiedades Disabled y Open, que le brindan la posibilidad de configurar los estados del panel según sus requisitos.

Declaring an Accordion

El acordeón envuelve todos los paneles de expansión declarados en su interior.

<igc-accordion id="accordion" single-expand="true">
    <igc-expansion-panel>
        <div slot="title">Title Panel 1</div>
        <div>
            Content Panel 1
        </div>
    </igc-expansion-panel>
    <igc-expansion-panel>
        <div slot="title">Title Panel 2</div>
        <div>
            Content Panel 2
        </div>
    </igc-expansion-panel>
</igc-accordion>

Usando el descriptor de acceso Panels puede obtener una referencia a la colección que contiene todos los paneles de expansión secundarios de IgcAccordionComponent.

private accordion: IgcAccordionComponent;
private panels: IgcExpansionPanelComponent[];

constructor() {
	this.accordion = document.getElementById("accordion") as IgcAccordionComponent;
	this.panels = this.accordion.panels;
}

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

Al utilizar los métodos hideAll y showAll puede contraer y expandir respectivamente todos los IgcExpansionPanelComponent del IgcAccordionComponent mediante programación.

[!Note] If singleExpand property is set to true calling showAll method would expand only the focused panel.

Web Components Accordion Customization Example

Con Web Components 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 las ranuras integradas de IgcExpansionPanelComponent.

Nested Web Components Accordions Scenario

En el siguiente ejemplo de acordeón Web Components, se crea una sección compleja de preguntas frecuentes para ilustrar cómo puede abordar este escenario de aplicación común. En el ejemplo, IgcAccordionComponent anidado se logra agregando un acordeón dentro de un panel de expansión.

La navegación con el teclado en Web Components 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 en acordeón cumple con los estándares de accesibilidad W3C y es fácil de usar.

Combinaciones de teclas

↓: mueve el foco al panel de abajo
↑- mueve el foco al panel de arriba
Alt + ↓: abre el panel enfocado en el acordeón
Alt + ↑: cierra el panel enfocado en el acordeón
Shift + Alt + ↓: abre todos los paneles habilitados (si singleExpand está configurado en verdadero, abre el panel enfocado)
Shift + Alt + ↑- cierra todos los paneles habilitados
Inicio: navega al PRIMER panel habilitado en el acordeón
Fin: navega al ÚLTIMO panel habilitado en el acordeón