Visão geral Blazor Accordion

    O Ignite UI for Blazor Accordion é um componente GUI para construir painéis expansíveis verticais com cabeçalhos clicáveis e seções de conteúdo associadas, exibidos em um único contêiner. O acordeão é comumente usado para reduzir a necessidade de rolar por várias seções de conteúdo em uma única página. Ele oferece navegação por teclado e API para controlar o estado de expansão dos painéis subjacentes.

    Os usuários podem interagir e navegar entre uma lista de itens, como miniaturas ou rótulos. Cada um desses itens pode ser alternado (expandido ou recolhido) para revelar as informações contidas. Dependendo da configuração, pode haver um ou vários itens expandidos por vez.

    Blazor Accordion Example

    O seguinte é um exemplo básico Ignite UI for Blazor Accordion de uma seção de FAQ. Ele opera como um acordeão, com seções trabalhando individualmente. Você pode alternar cada bloco de texto com um único clique, enquanto expande vários painéis ao mesmo tempo. Dessa forma, você pode ler informações mais facilmente, sem ter que ir e voltar entre um painel de expansão e recolhimento automático, que oculta a seção aberta anteriormente todas as vezes.

    Nele, você pode ver como definir um acordeão e seus painéis de expansão. A amostra também demonstra os dois tipos de comportamento de expansão. O botão de interruptor configura aSingleExpand propriedade para alternar entre um e múltiplos ramos, a serem expandidos de cada vez.

    Getting Started with Blazor Accordion

    Antes de usá-losIgbAccordion, você precisa registrá-los da seguinte forma:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbAccordionModule));

    Você também precisará vincular um arquivo CSS adicional para aplicar o estilo aoIgbAccordion componente. O seguinte deve ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    Agora você pode começar com uma configuração básica dosIgbAccordion painéis e de seus painéis.

    Usage

    Cada seção do Componente Blazor Acordeão é definida usando um Painel de Expansão Blazor. Os painéis fornecemDisabled propriedadesOpen que permitem configurar os estados do painel conforme sua necessidade.

    Declaring an Accordion

    O acordeão envolve todos os painéis de expansão declarados dentro dele.

    <IgbAccordion SingleExpand=true>
    <IgbExpansionPanel>
        <div slot="title">Title Panel 1</div>
        <div>
            Content Panel 1
        </div>
    </IgbExpansionPanel>
    <IgbExpansionPanel>
        <div slot="title">Title Panel 2</div>
        <div>
            Content Panel 2
        </div>
    </IgbExpansionPanel>
</IgbAccordion>

    Como demonstrado acima, aSingleExpand propriedade permite definir se um ou vários painéis podem ser expandidos ao mesmo tempo.

    Usando osHideAll métodos eShowAll você pode, respectivamente, colapsar e expandir todosIgbExpansionPanel osIgbAccordion s programaticamente.

    [!Note] If SingleExpand property is set to true calling ShowAll method would expand only the focused panel.

    Blazor Accordion Customization Example

    Com o Blazor Accordion, você pode personalizar a aparência do cabeçalho e do painel de conteúdo.

    O exemplo abaixo demonstra como opções de filtragem elaboradas podem ser implementadas usando os slots embutidos doIgbExpansionPanel.

    Nested Blazor Accordions Scenario

    A seguir Blazor exemplo de acordeão é criada uma seção complexa de perguntas frequentes para ilustrar como você pode abordar esse cenário comum de aplicação. No exemplo, o aninhamentoIgbAccordion é obtido adicionando um acordeão dentro de um painel de expansão.

    Keyboard Navigation

    A navegação pelo teclado no Blazor Accordion fornece uma rica variedade de interações de teclado para o usuário final. Essa funcionalidade é habilitada por padrão e permite que os usuários finais naveguem facilmente pelos painéis.

    A navegação Accordion é compatível com os padrões de acessibilidade W3C e é fácil de usar.

    Combinações de teclas

    • ↓- move o foco para o painel abaixo
    • ↑- move o foco para o painel acima
    • ALT + ↓- abre o painel focado no acordeão
    • ALT + ↑- fecha o painel focado no acordeão
    • SHIFT + ALT + ↓- abre todos os painéis habilitados (se singleExpand estiver definido como true abre o painel focado)
    • SHIFT + ALT + ↑- fecha todos os painéis habilitados
    • HOME- navega para o painel habilitado FIRST no acordeão
    • END- navega até o painel habilitado ÚLTIMO na opção

    API References

    Additional Resources