Descripción general de los componentes del panel de expansión Angular

    Ignite UI for Angular proporciona a los desarrolladores uno de los componentes de diseño más útiles y fáciles de usar: el Panel de expansión. Este componente rico en funciones se utiliza para crear una vista de resumen detallada expandible/contraíble. El contenido puede incluir animación del Panel de expansión Angular, texto, íconos, encabezado, barra de acciones y otros elementos.

    Ignite UI Expansion Panel igx-expansion-panel es un componente de acordeón Angular liviano que se puede representar en dos estados: contraído o expandido. El Panel de expansión en Angular se puede alternar mediante el clic del mouse o mediante interacciones con el teclado. También puede combinar varios paneles de expansión Angular en un acordeón Angular.

    Angular Expansion Panel Example

    Hemos creado este sencillo ejemplo de panel de expansión Angular usando Ignite UI Angular. Vea cómo funciona la muestra.

    Getting Started with Ignite UI for Angular Expansion Panel

    Para comenzar con el componente desplegable Ignite UI for Angular, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

    ng add igniteui-angular

    Para obtener una introducción completa a la Ignite UI for Angular, lea el tema de introducción.

    El siguiente paso es importar IgxExpansionPanelModule en su archivo app.module.ts.

    // app.module.ts
...
import { IgxExpansionPanelModule } from 'igniteui-angular';
// import { IgxExpansionPanelModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxExpansionPanelModule],
    ...
})
export class AppModule {}

    Alternativamente, a partir de 16.0.0, puede importar IgxExpansionPanelComponent como una dependencia independiente o usar el token IGX_EXPANSION_PANEL_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.

    // home.component.ts

import { IGX_EXPANSION_PANEL_DIRECTIVES } from 'igniteui-angular';
// import { IGX_EXPANSION_PANEL_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-expansion-panel>
        <igx-expansion-panel-header>
            <igx-expansion-panel-title>
            Golden Retriever
            </igx-expansion-panel-title>
            <igx-expansion-panel-description>
            Medium-large gun dog
            </igx-expansion-panel-description>
        </igx-expansion-panel-header>
        <igx-expansion-panel-body>
            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. 
            The name "retriever" refers to the breed's 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.
        </igx-expansion-panel-body>
    </igx-expansion-panel>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_EXPANSION_PANEL_DIRECTIVES]
    /* or imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent] */
})
export class HomeComponent {}

    Ahora que ha importado el módulo o las directivas Ignite UI for Angular Expansion Panel, puede comenzar a usar el componente igx-expansion-panel.

    Using the Angular Expansion Panel

    La siguiente tabla muestra todas las piezas de marcado disponibles para el Panel de expansión Angular.

    Nombre de etiqueta Descripción
    igx-expansion-panel El host del componente: almacena el encabezado y el cuerpo.
    igx-expansion-panel-header Almacena el encabezado del componente. Esto siempre es visible. Almacena el título y la descripción, así como cualquier contenido adicional.
    igx-expansion-panel-title Úselo para configurar el título del panel de expansión.
    igx-expansion-panel-description Se puede utilizar para proporcionar un breve resumen. La descripción siempre aparecerá después del título (si el título está configurado).
    igx-expansion-panel-icon Úselo para cambiar el ícono predeterminado de expandir/contraer.
    igx-expansion-panel-body Este es el contenedor expandible y solo es visible cuando el panel está expandido.

    Properties Binding and Events

    Podemos agregar algo de lógica a nuestro componente para que muestre/oculte la igx-expansion-panel-description dependiendo del estado actual del panel.
    Podemos hacer esto vinculando la descripción a la propiedad collapsed del control:

    // in expansion-panel.component.ts
import { IgxExpansionPanelComponent } from 'igniteui-angular';
// import { IgxExpansionPanelComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({...})
export class ExpansionPanelComponent {
    @ViewChild(IgxExpansionPanelComponent, {read: IgxExpansionPanelComponent})
    public panel: IgxExpansionPanelComponent;
}

    <!-- in expansion-component.component.html -->
<igx-expansion-panel>
    <igx-expansion-panel-header>
        Golden Retriever
        <igx-expansion-panel-description *ngIf="panel.collapsed">
            Medium-large gun dog
        </igx-expansion-panel-description>
    </igx-expansion-panel-header>
    ...
</igx-expansion-panel>

    El siguiente ejemplo de código mostrará la breve descripción solo cuando el componente esté contraído. Si queremos agregar una funcionalidad más compleja según el estado del componente, también podemos vincularnos a un emisor de eventos.

    // in expansion-panel.component.ts

@Component({...})
export class ExpansionPanelComponent {
    ...
    public handleExpansion(args: {event: Event}): void {
        ... // Some functionality
    }
}

    <!-- in expansion-component.component.html -->
<igx-expansion-panel (onExpanded)="handleExpansion($event)" (contentCollapsed)="handleCollapse($event)"></igx-expansion-panel>

    A continuación tenemos los resultados:

    Component Customization

    El IgxExpansionPanelComponent permite una fácil personalización del encabezado. La configuración de la posición del icono del encabezado se puede realizar a través de la entrada iconPosition en igx-expansion-panel-header. Las opciones posibles para la posición del icono son izquierda, derecha y ninguna. El siguiente ejemplo de código demuestra cómo configurar el botón del componente para que vaya al lado derecho.

    <!-- in expansion-component.component.html -->
<igx-expansion-panel>
    <igx-expansion-panel-header [iconPosition]="'right'"></igx-expansion-panel-header>
    ...
</igx-expansion-panel>
    Note

    La propiedad iconPosition funciona con RTL; por ejemplo, un icono configurado para aparecer a la derecha se mostrará en la parte más izquierda del encabezado cuando RTL esté activado.

    Se puede crear una plantilla para el icono predeterminado para el estado de alternancia del control. Podemos hacerlo pasando contenido en una igx-expansion-panel-icon:

    <!-- in expansion-component.component.html -->
<igx-expansion-panel>
    <igx-expansion-panel-header [iconPosition]="'right'">
        ...
        <igx-expansion-panel-icon>
            <span class="example-icon" *ngIf="panel.collapsed">Show More</span>
            <span class="example-icon" *ngIf="!panel.collapsed">Show Less</span>
        </igx-expansion-panel-icon>
    </igx-expansion-panel-header>   
    ...
</igx-expansion-panel>

    Nuestro panel de expansión Angular ahora mostrará "Mostrar más" cuando el panel esté contraído y "Mostrar menos" una vez que esté completamente expandido.

    El control IgxExpansionPanel permite agregar todo tipo de contenido dentro del igx-expansion-panel-body. ¡Puede renderizar IgxGrid, IgxCombo, gráficos e incluso otros paneles de expansión!

    En aras de la simplicidad, agreguemos algunas marcas básicas al cuerpo de nuestro panel de expansión.

    <!-- in expansion-panel.component.html -->
...
<igx-expansion-panel-body>
    <div class="example-content">
        <img [src]="imgSource" alt="dog-image">
        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. The name "retriever" refers to the breed's 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.
        <a igxButton="outlined" target="_blank" [href]="readMore">Read more</a>
    </div>
</igx-expansion-panel-body>
...

    Veamos el resultado de todos los cambios anteriores:

    Estilismo

    Angular Expansion Panel Demo

    Palettes & Colors

    Primero creamos una paleta personalizada que luego se puede pasar a nuestro componente:

    // In real life, this should be in our main sass file so we can share the palette between all components. 
// In our case, it's in the component SCSS file "expansion-styling.component.scss".

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

// Add your brand colors.
$my-primary-color:#353a4b;
$my-secondary-color: #ffd351;

// Create custom palette.
$my-color-palette: palette(
    $primary: $my-primary-color,
    $secondary: $my-secondary-color
);

    Creating the Component Theme

    Ahora creemos nuestro tema componente y pasemos la paleta $my-color-palette del corte anterior.

    // In expansion-styling.component.scss
// Create expansion panel theme.
$custom-panel-theme: expansion-panel-theme(
    // pass `$my-color-palette` palette.
    $palette: $my-color-palette,

    // Styling parameters.
    $header-background: color($my-color-palette, "primary", 700),
    $header-focus-background: color($my-color-palette, "primary", 700),
    $header-title-color: color($my-color-palette, "secondary"),
    $header-icon-color: color($my-color-palette, "secondary"),
    $body-background: color($my-color-palette, "primary", 700),
    $body-color: color($my-color-palette, "secondary" 100),
    $border-radius: .5
);
    Note

    Para ver todos los parámetros disponibles para diseñar a través del motor theming, consulte la API documentation

    Applying the Component Theme

    Ahora, para aplicar el tema del componente, todo lo que queda es incluir css-vars mixin y pasar el mapa $custom-panel-theme.

    // In expansion-styling.component.scss
// Pass our custom-panel-theme to `igx-expansion-panel` mixin.
// The `:host` here makes sure that all the theming will affect only this component.
:host {
  @include css-vars($custom-panel-theme);
}
    Note

    Si necesita admitir Internet Explorer 11, debe usar el componente mixin igx-expansion-panel en lugar de css-vars y debido a que nuestro componente tiene ViewEncapsulation Emulated, debemos penetrarlo usando::ng-deep. Además, para evitar que nuestro tema personalizado se filtre a otros componentes, debemos incluir el selector:host antes::ng-deep:

    // In expansion-styling.component.scss
// The `:host` here makes sure that all the theming will affect only this component after the ViewEncapsulation Penetration.
:host {
    // Penetrate the ViewEncapsulation.
    ::ng-deep {
        @include expansion-panel($custom-panel-theme);
    }
}

    Para obtener más información sobre cómo utilizar el motor de temas Ignite UI click here

    Angular Expansion Panel Animations

    Using specific animation

    Es posible utilizar una animación distinta a la predeterminada al expandir y contraer el componente. Suponiendo que igxExpansionPanel ya está importado en app.module.ts como se describió anteriormente, puede crear un objeto de configuración de animación personalizado y configurarlo para usarlo en la Ignite UI para Agular Expansion Panel. El enfoque requiere el método useAnimation y las animaciones específicas que se utilizarán, por lo que comenzamos a importarlas y definir las configuraciones de animación como:

    // in expansion-panel.component.ts
import { useAnimation } from '@angular/animations';
import { IgxExpansionPanelComponent, slideInLeft, slideOutRight } from 'igniteui-angular';
// import { IgxExpansionPanelComponent, slideInLeft, slideOutRight } from '@infragistics/igniteui-angular'; for licensed package

@Component({...})
export class ExpansionPanelComponent {
    @ViewChild(IgxExpansionPanelComponent, {read: IgxExpansionPanelComponent})
    public panel: IgxExpansionPanelComponent;

    public animationSettingsCustom = {
        closeAnimation: useAnimation(slideOutRight, {
            params: {
                duration: '100ms',
                toPosition: 'translateX(25px)'
            }
        }),
        openAnimation: useAnimation(slideInLeft, {
            params: {
                duration: '500ms',
                fromPosition: 'translateX(-15px)',
                startOpacity: 0.1
            }
        })
    };

    public collapsed() {
        return this.panel && this.panel.collapsed;
    }
}

    Como puede ver, vamos a utilizar animaciones slideInLeft y slideOutRight de nuestro conjunto de animaciones incorporado para hacer que el contenido del componente aparezca más dramáticamente desde el lado izquierdo y desaparezca a la derecha al contraer el contenido. En el proceso, anulamos algunos de los parámetros existentes con los específicos que queremos usar.

    El ejemplo muestra información del usuario y el punto clave aquí es pasar la configuración de animación al componente como: [animationSettings] = "animationSettingsCustom"

    <!-- in expansion-panel.component.html -->
...
<igx-expansion-panel [animationSettings] = "animationSettingsCustom" class="my-expansion-panel">
    <igx-expansion-panel-header>
        <igx-expansion-panel-title class="sample-title">Angular</igx-expansion-panel-title>
    </igx-expansion-panel-header>
    <igx-expansion-panel-body>
        Angular (commonly referred to as "Angular 2+" or "Angular v2 and above") is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations.
    </igx-expansion-panel-body>
</igx-expansion-panel>
...

    Puedes ver los resultados a continuación:

    Multiple panel scenario

    Ver el tema igxAccordion

    API Reference

    Theming Dependencies