Visão geral do painel de expansão Blazor
O Ignite UI for Blazor 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.
Blazor Expansion Panel Example
Usage
A maneira mais simples de começar a usar o IgbExpansionPanel é a seguinte:
Binding to events
O componente Painel de Expansão gera os seguintes eventos:
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.
Component Customization
O controle IgbExpansionPanel 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 IgbExpansionPanel permite fácil personalização do cabeçalho por meio dos slots expostos de título, subtítulo e indicador.
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 Ignite UI for Blazor é 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 IgbExpansionPanel 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);
}