Descripción general del panel de expansión de Blazor

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

    Ejemplo de panel de expansión Blazor

    EXAMPLE
    MODULES
    RAZOR

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

    Uso

    La forma más sencilla de empezar a utilizar IgbExpansionPanel es la siguiente:

    Vinculación a eventos

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

    El siguiente ejemplo demuestra cómo podemos agregar algo de lógica a nuestro componente para que muestre/oculte el subtitle según el estado actual del panel.

    EXAMPLE
    MODULES
    RAZOR

    Personalización de componentes

    El control IgbExpansionPanel permite agregar todo tipo de contenido dentro de su cuerpo. ¡Puede representar entradas, gráficos e incluso otros paneles de expansión!

    El IgbExpansionPanel permite una fácil personalización del encabezado a través de las ranuras de título, subtítulo e indicador expuestas.

    La configuración de la posición del indicador de expansión se puede realizar a través de la IndicatorPosition propiedad del Panel de expansión. Las opciones posibles son inicio, fin o ninguna.

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

    EXAMPLE
    MODULES
    RAZOR

    Navegación por teclado

    La navegación por teclado del panel de expansión Ignite UI for Blazor cumple con los estándares de accesibilidad del W3C y es cómoda de usar.

    Combinaciones de teclas

    • Alt + ↓: expande el panel enfocado
    • Alt + ↑: contrae el panel enfocado
    • Espacio / Entrar: alterna el estado de expansión del panel enfocado

    Estilo

    El componente Panel de expansión Ignite UI for Blazor expone varias partes CSS (header, indicator, title,y subtitle​ ​content) para proporcionar un control total sobre su estilo.

    EXAMPLE
    MODULES
    RAZOR

    Referencias de API

    Recursos adicionales