Visão geral do painel de expansão Web Components
O Ignite UI for Web Components Expansion Panel é um componente acordeão leve que pode ser renderizado em dois estados - recolhido ou expandido. O painel de expansão pode ser alternado usando clique do mouse ou interações do teclado.
Web Components Expansion Panel Example
Usage
Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:
npm install igniteui-webcomponents
Antes de usar o IgcExpansionPanelComponent, você precisa registrá-lo da seguinte maneira:
import {defineComponents, IgcExpansionPanelComponent} from 'igniteui-webcomponents';
defineComponents(IgcExpansionPanelComponent);
Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Introdução.
A maneira mais simples de começar a usar o IgcExpansionPanelComponent é a seguinte:
<igc-expansion-panel>
<div slot="title">Golden Retriever</div>
<div slot="subTitle">Medium-large gun dog</div>
<div>
<p>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 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.</p>
</div>
</igc-expansion-panel>
Binding to events
O componente Painel de Expansão gera os seguintes eventos:
- igcClosed - Gerado quando o painel de expansão é recolhido
- igcOpened - Gerado quando o painel de expansão é expandido
- igcClosing - Gerado quando o painel de expansão começa a entrar em colapso
- igcOpening - Gerado quando o painel de expansão começa a expandir
O exemplo a seguir demonstra como podemos adicionar alguma lógica ao nosso componente para fazê-lo mostrar/ocultar a subtitle dependendo do estado atual do painel.
Podemos fazer isso vinculando-nos aos emissores de eventos igcOpened e igcClosed:
Component Customization
O controle IgcExpansionPanelComponent permite que todos os tipos de conteúdo sejam adicionados dentro de seu corpo. Ele pode renderizar input, charts e até mesmo outros painéis de expansão!
O IgcExpansionPanelComponent permite fácil personalização do cabeçalho por meio dos slots de título, subtítulo e indicador expostos.
A configuração da posição do indicador de expansão pode ser feita por meio da propriedade indicatorPosition do Painel de Expansão. As opções possíveis são start, end ou none.
O próximo exemplo de código demonstra como configurar o botão do componente para ficar no lado direito.
Keyboard Navigation
A navegação pelo teclado do Painel de expansão do Ignite UI for Web Components é compatível com os padrões de acessibilidade do W3C e é fácil de usar.
Combinações de teclas
- Alt + ↓- expande o painel em foco
- Alt + ↑- recolhe o painel em foco
- Espaço / Enter- alterna o estado de expansão do painel em foco
Styling
O IgcExpansionPanelComponent componente expõe várias partes CSS, dando a você controle total sobre seu estilo:
| Nome | Descrição |
|---|---|
header |
O contêiner do indicador de expansão, título e subtítulo. |
title |
O contêiner de título. |
subtitle |
O contêiner de legendas. |
indicator |
O contêiner do indicador. |
content |
O wrapper de conteúdo do painel de expansão. |
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);
}