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

    Alternativamente,16.0.0 você pode importarIgxExpansionPanelComponent como uma dependência independente ou usar oIGX_EXPANSION_PANEL_DIRECTIVES token 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 diretivas do Painel de Expansão Ignite UI for Angular, pode começar a usar oigx-expansion-panel componente.

    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 que ele mostre/esconda oigx-expansion-panel-description dependendo do estado atual do painel.
    Podemos fazer isso vinculando a descrição à propriedade de controlecollapsed:

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

    IssoIgxExpansionPanelComponent permite uma personalização fácil do cabeçalho. A configuração da posição do ícone do cabeçalho pode ser feita através daiconPosition entrada noigx-expansion-panel-header. As opções possíveis para a posição do ícone são esquerda, direita e nenhuma. 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

    AiconPosition propriedade funciona comRTL— por exemplo, um ícone configurado para aparecer no lado direito aparecerá na parte mais à esquerda do cabeçalho quando o RTL estiver ligado.

    O ícone padrão para o estado de alternância do controle pode ser modelado. Podemos fazer isso passando conteúdo em umaigx-expansion-panel-icon tag:

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

    OIgxExpansionPanel controle permite que todo tipo de conteúdo seja adicionado dentro doigx-expansion-panel-body local. Ele pode renderizarIgxGrid s,IgxCombo gráficos e até 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

    Expansion Panel Theme Property Map

    Alterar as$header-background propriedades e$body-background atualiza automaticamente as seguintes propriedades dependentes:

    Propriedade primária Propriedade dependente Descrição
    $header-contexto
    		 $header-título-cor O cabeçalho do painel cor do texto do título.
    $header-cor-ícone- A cor do ícone do cabeçalho do painel.
    $header-descrição-cor A cor do texto do cabeçalho do painel para descrição.
    $header-foco de fundo O cabeçalho do painel foca a cor de fundo.
    $disabled-cor-texto O painel desativou a cor do texto.
    $disabled-descrição-cor O painel desativava a cor do texto da descrição do cabeçalho.
    $body-contexto $body cor Cor do texto do corpo do quadro.

    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 componente e passar a$my-color-palette paleta do sniped 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 de painel-expansão-tema como argumentos. Se astitle-color​icon-color propriedades do primeiro plano não forem explicitamente fornecidas, elas serão automaticamente atribuídas ao preto ou branco – o que oferecer melhor contraste com o fundo.

    $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 o estilo através dotheming motor, verifique oAPI documentation

    Applying the Component Theme

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

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

    Para saber mais sobre como usar Ignite UI motor de tematizaçãoclick here

    Demo

    Styling with Tailwind

    Você pode estilizar o painel de expansão usando nossas classes utilitárias personalizadas Tailwind. Certifique-se de configurar o Tailwind primeiro.

    Junto com a importação de vento de cauda em sua folha de estilo global, você pode aplicar os utilitários de tema desejados da seguinte maneira:

    @import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

    O arquivo utilitário inclui tantolight as variantes quantodark as do tema.

    • Uselight-* as aulas para o tema da luz.
    • Usedark-* classes para o tema sombrio.
    • Adicione o nome do componente após o prefixo, por exemplo,light-expansion-panel,dark-expansion-panel.

    Uma vez aplicadas, essas classes possibilitam cálculos dinâmicos de temas. A partir daí, você pode sobrescrever as variáveis CSS geradas usandoarbitrary properties. Após os dois-pos, forneça qualquer formato de cor CSS válido (HEX, variável CSS, RGB, etc.).

    Você pode encontrar a lista completa de propriedades no tema do painel de expansão. A sintaxe é a seguinte:

    <igx-expansion-panel
  class="!light-expansion-panel
  ![--header-background:#4F6A5A]
  ![--body-background:#A3C7B2]"
>
  ...
</igx-expansion-panel>
    Note

    O ponto de exclamação(!) é necessário para garantir que a classe utilitária tenha prioridade. O Tailwind aplica estilos em camadas e, sem marcar esses estilos como importantes, eles serão substituídos pelo tema padrão do componente.

    No final, seu painel de expansão deve ficar assim:

    Angular Expansion Panel Animations

    Using specific animation

    É possível usar animação diferente da padrão ao expandir e colapsar o componente. Assumindo que o igxExpansionPanel já foi importadoapp.module.ts como descrito anteriormente, você pode criar um objeto de animação personalizado e configurá-lo para ser usado no Painel de Expansão Ignite UI for Angular. A abordagem exige ouseAnimation método e as animações específicas a serem usadas, então começamos a importar essas animações 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, vamos usarslideInLeft animaçõesslideOutRight do nosso conjunto de animações embutidas para fazer o conteúdo componente aparecer de forma mais dramática do lado esquerdo e desaparecer do lado direito ao colapsar o conteúdo. No processo, sobrescrevemos alguns dos parâmetros existentes pelos específicos que queremos usar.

    O exemplo mostra algumas informações do usuário e o ponto chave 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