Descripción general de React Accordion

    El acordeón Ignite UI for React 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 usa 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.

    React Accordion Example

    El siguiente es un ejemplo básico Ignite UI for React 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, 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, puedes ver cómo definir un acordeón y sus paneles de expansión. La muestra también demuestra los dos tipos de comportamiento de expansión. El botón de cambio establece lasingleExpand propiedad para alternar entre ramas individuales y múltiples para expandirse a la vez.

    Getting Started with React Accordion

    Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

    npm install igniteui-react

    Entonces tendrás que importar elIgrAccordion y elIgrExpansionPanel y su CSS necesario, así:

    import {
  IgrAccordion,
  IgrExpansionPanel,
} from "igniteui-react";
import "igniteui-webcomponents/themes/light/bootstrap.css";

    Ahora puedes empezar con una configuración básica de losIgrAccordion y sus paneles.

    Usage

    Cada sección del componente de acordeón React se define mediante un React Cuadro de Expansión. Los paneles proporcionanDisabled propiedadesOpen que te permiten configurar los estados del panel según tus necesidades.

    Declaring an Accordion

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

    <IgrAccordion singleExpand={true}>
  <IgrExpansionPanel>
    <div slot="title">Title Panel 1</div>
    <div>Content Panel 1</div>
  </IgrExpansionPanel>
  <IgrExpansionPanel>
    <div slot="title">Title Panel 2</div>
    <div>Content Panel 2</div>
  </IgrExpansionPanel>
</IgrAccordion>

    Como se ha demostrado antes, lasingleExpand propiedad te permite determinar si se pueden ampliar paneles individuales o varios a la vez.

    Usando loshideAll métodos yshowAll puedes colapsar y expandir cadaIgrExpansionPanel​IgrAccordion s de forma programática respectivamente.

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

    React Accordion Customization Example

    Con el React Accordion, puede personalizar la apariencia del encabezado y el panel de contenido.

    El ejemplo siguiente demuestra cómo se pueden implementar opciones de filtrado elaboradas utilizando las ranuras integradas de laIgrExpansionPanel.

    Nested React Accordions Scenario

    En el siguiente React ejemplo de acordeón se crea una sección compleja de preguntas frecuentes para ilustrar cómo puedes abordar este escenario de aplicación común. En la muestra, anidadoIgrAccordion se consigue añadiendo un acordeón dentro de un panel de expansión.

    Keyboard Navigation

    La navegación por teclado en el acordeón React 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 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 se establece en true, abre el panel enfocado)
    • SHIFT + ALT + ↑- cierra todos los paneles habilitados
    • HOME- navega al panel FIRST habilitado en el acordeón
    • END- navega al panel ÚLTIMO habilitado en el acordeón

    API References

    Additional Resources