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
The IgbExpansionPanel component exposes several CSS parts, giving you full control over its style:
| Name | Description |
|---|---|
header |
The container of the expansion indicator, title and subtitle. |
title |
The title container. |
subtitle |
The subtitle container. |
indicator |
The indicator container. |
content |
The expansion panel's content wrapper. |
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);
}