Descripción general del panel de expansión React

    El panel de expansión Ignite UI for React es un componente de acordeón liviano que se puede mostrar en dos estados: contraído o expandido. El panel de expansión se puede alternar con un clic del mouse o con interacciones del teclado.

    React Expansion Panel Example

    Usage

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

    npm install igniteui-react

    Luego tendrás que importar elIgrExpansionPanel CSS necesario y registrar su módulo, así:

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

    La forma más sencilla de empezar a usar elIgrExpansionPanel uso es la siguiente:

    <IgrExpansionPanel>
    <h1 slot="title">Golden Retriever</h1>
    <h3 slot="subtitle">Medium-large gun dog</h3>
    <span>
        The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
        and upland game birds, during hunting and shooting parties.[3] The name retriever refers to the breeds ability
        to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
        are easy to train to basic or advanced obedience standards.
    </span>
</IgrExpansionPanel>

    Binding to events

    El componente Panel de expansión genera los siguientes eventos:

    • Cerrado: elevado cuando el panel de expansión está plegado
    • Abierto: elevado cuando se expande el panel de expansión
    • Cerrando - Levantado cuando el panel de expansión comienza a colapsar
    • Apertura: elevada cuando el panel de expansión comienza a expandirse

    El siguiente ejemplo muestra cómo podemos añadir algo de lógica a nuestro componente para que muestre o oculte elsubtitle estado dependiendo del estado actual del panel.

    Podemos hacer esto vinculando a losOpened eventos yClosed:

    Component Customization

    ElIgrExpansionPanel control permite añadir todo tipo de contenido dentro de su cuerpo. ¡Puede renderizar la entrada, gráficos e incluso otros paneles de expansión!

    EstoIgrExpansionPanel permite una fácil personalización del encabezado mediante el título expuesto, el subtítulo y las ranuras de indicadores.

    La configuración de la posición del indicador de expansión puede hacerse mediante laindicatorPosition propiedad del Panel de Expansión. Las opciones posibles son empezar, terminar o ninguna.

    El siguiente ejemplo de código muestra cómo configurar el botón del componente para que vaya al lado derecho.

    Keyboard Navigation

    La navegación del teclado del panel de expansión Ignite UI for React cumple con los estándares de accesibilidad del W3C y es fácil de usar.

    Combinaciones de teclas

    • ALT + ↓- expande el panel enfocado
    • ALT + ↑- contrae el panel enfocado
    • SPACE / ENTER- alternar el estado de expansión del panel enfocado

    Styling

    ElIgrExpansionPanel componente expone varias partes CSS, dándote control total sobre su estilo:

    Nombre Descripción
    header El contenedor del indicador de expansión, título y subtítulo.
    title El contenedor de títulos.
    subtitle El contenedor de subtítulos.
    indicator El contenedor del indicador.
    content El contenedor de contenido del panel de expansión. 
    igc-expansion-panel {
  background-color: var(--ig-secondary-900);
  color: var(--ig-secondary-900-contrast);
}

igc-button::part(base) {
  color: var(--ig-secondary-900-contrast);
}

igc-button::part(base)::before {
  background-color: var(--ig-warn-500);
}

igc-expansion-panel::part(indicator) {
  color: var(--ig-warn-500);
}

igc-expansion-panel::part(header) {
  background-color: var(--ig-secondary-900);
}

igc-expansion-panel::part(title),
igc-expansion-panel::part(subtitle) {
  color: var(--ig-warn-500);
}

    API References

    Additional Resources