Visão geral do componente do painel de expansão Angular

    Ignite UI for Angular fornece aos desenvolvedores um dos componentes de layout mais úteis e fáceis de usar - o Expansion Panel. Este componente rico em recursos é usado para criar uma visualização de resumo detalhada expansível/recolhível. O conteúdo pode incluir animação Angular Expansion Panel, texto, ícones, cabeçalho, barra de ação e outros elementos.

    Painel de Expansão Ignite UI igx-expansion-panel é um componente acordeão Angular leve que pode ser renderizado em dois estados - recolhido ou expandido. O Painel de Expansão no Angular pode ser alternado usando clique do mouse ou interações do teclado. Você também pode combinar vários Painéis de Expansão Angular no acordeão Angular.

    Angular Expansion Panel Example

    Criamos este simples Angular Expansion Panel Example usando Ignite UI Angular. Veja como o exemplo funciona.

    Getting Started with Ignite UI for Angular Expansion Panel

    Para começar a usar o componente Ignite UI for Angular Drop Down, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

    ng add igniteui-angular

    Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

    O próximo passo é importar o IgxExpansionPanelModule no seu arquivo 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 {}

    Como alternativa, a partir da 16.0.0 você pode importar o IgxExpansionPanelComponent como uma dependência autônoma ou usar o token IGX_EXPANSION_PANEL_DIRECTIVES para importar o componente e todos os seus componentes e diretivas de suporte.

    // 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 {}

    Agora que você importou o módulo ou as diretivas do Ignite UI for Angular Expansion Panel, você pode começar a usar o componente igx-expansion-panel.

    Using the Angular Expansion Panel

    A tabela abaixo mostra todas as partes de marcação disponíveis para o Painel de Expansão Angular.

    Nome da etiqueta Descrição
    igx-expansion-panel O componente host - armazena o cabeçalho e o corpo.
    igx-expansion-panel-header Armazena o cabeçalho do componente. Ele está sempre visível. Armazena título e descrição, bem como qualquer conteúdo adicional
    igx-expansion-panel-title Use-o para definir o título do painel de expansão.
    igx-expansion-panel-description Pode ser usado para fornecer um breve resumo. A descrição sempre aparecerá após o título (se o título estiver definido).
    igx-expansion-panel-icon Use-o para alterar o ícone padrão de expansão/recolhimento.
    igx-expansion-panel-body Este é o contêiner expansível e só fica visível quando o painel é expandido.

    Properties Binding and Events

    Podemos adicionar alguma lógica ao nosso componente para fazê-lo mostrar/ocultar o igx-expansion-panel-description dependendo do estado atual do painel.
    Podemos fazer isso vinculando a descrição à propriedade collapsed do controle:

    // 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>

    O exemplo de código a seguir mostrará a descrição curta somente quando o componente estiver em seu estado recolhido. Se quisermos adicionar funcionalidades mais complexas dependendo do estado do componente, também podemos vincular a um emissor de evento.

    // 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>

    Abaixo temos os resultados:

    Component Customization

    O IgxExpansionPanelComponent permite fácil personalização do header. A configuração da posição do ícone do header pode ser feita por meio da entrada iconPosition no igx-expansion-panel-header. As opções possíveis para a posição do ícone são left, right e none. O próximo exemplo de código demonstra como configurar o botão do componente para ficar no lado direito.

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

    A propriedade iconPosition funciona com RTL- por exemplo, um ícone definido para aparecer à direita será exibido na parte mais à esquerda do cabeçalho quando RTL estiver ativado.

    O ícone padrão para o estado de alternância do controle pode ser modelado. Podemos fazer isso passando conteúdo em uma tag 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>

    Nosso Painel de Expansão Angular agora exibirá "Mostrar Mais" quando o painel estiver recolhido e "Mostrar Menos" quando estiver totalmente expandido.

    O controle IgxExpansionPanel permite que todos os tipos de conteúdo sejam adicionados dentro do igx-expansion-panel-body. Ele pode renderizar IgxGrid s, IgxCombo, gráficos e até mesmo outros painéis de expansão!

    Para simplificar, vamos adicionar algumas marcações básicas ao corpo do nosso painel de expansão.

    <!-- 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>
...

    Vamos ver o resultado de todas as mudanças acima:

    Estilização

    Palettes & Colors

    Primeiro criamos uma paleta personalizada que depois pode ser passada para nosso 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;
$my-surface-color: #efefef;

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

    Creating the Component Theme

    Agora vamos criar nosso tema de componente e passar a paleta $my-color-palette do snippet acima.

    // In expansion-styling.component.scss
// Create expansion panel theme.
$custom-panel-theme: expansion-panel-theme(
  // 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
);

    Se preferirmos, em vez de criar uma paleta, podemos atribuir as cores diretamente à função expansion-panel-theme como argumentos.

    $custom-panel-theme: expansion-panel-theme(
  $header-background: #353a4b,
  $header-focus-background: #353a4b,
  $header-title-color: #ffd351,
  $header-icon-color: #ffd351,
  ...
);
    Note

    Para ver todos os parâmetros disponíveis para estilização por meio do mecanismo theming verifique a API documentation

    Applying the Component Theme

    Agora, para aplicar o tema do componente, tudo o que resta é incluir o mixin css-vars e passar o mapa $custom-panel-theme.

    // In expansion-styling.component.scss
@include css-vars($custom-panel-theme);

    Para saber mais sobre como você pode usar o mecanismo de temas Ignite UI click here

    Demo

    Angular Expansion Panel Animations

    Using specific animation

    É possível usar outra animação além da padrão ao expandir e recolher o componente. Supondo que o igxExpansionPanel já esteja importado em app.module.ts conforme descrito anteriormente, você pode criar um objeto de configuração de animação personalizado e configurá-lo para ser usado na Ignite UI for Angular Expansion Panel. A abordagem requer o método useAnimation e as animações específicas a serem usadas, então começamos a importá-las e definir as configurações de animação 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 você pode ver, usaremos as animações slideInLeft e slideOutRight do nosso conjunto interno de animações para fazer o conteúdo do componente aparecer mais dramaticamente do lado esquerdo e desaparecer do lado direito ao recolher o conteúdo. No processo, substituímos alguns dos parâmetros existentes pelos específicos que queremos usar.

    O exemplo mostra algumas informações do usuário e o ponto principal aqui é passar as configurações de animação para o 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>
...

    Você pode ver os resultados abaixo:

    Multiple panel scenario

    Veja o tópico igxAccordion

    API Reference

    Theming Dependencies