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 oIgbExpansionPanel é 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 osubtitle estado atual do painel.
Component Customization
OIgbExpansionPanel controle permite que todo tipo de conteúdo seja adicionado dentro do corpo. Ele pode renderizar entrada, gráficos e até outros painéis de expansão!
EleIgbExpansionPanel permite uma personalização fácil do cabeçalho através dos slots de título expostos, subTítulo e indicadores.
A configuração da posição do indicador de expansão pode ser feita por meio daIndicatorPosition propriedade do Painel de Expansão. As opções possíveis são começo, fim ou nenhuma.
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 focado
- ALT + ↑- recolhe o painel em foco
- SPACE / ENTER- alterna o estado de expansão do painel focado
Styling
OIgbExpansionPanel componente expõe várias partes do CSS, dando 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);
}