Visão geral Web Components Accordion

    O Ignite UI for Web Components 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.

    Web Components Accordion Example

    O seguinte é um exemplo básico Ignite UI for Web Components 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. O exemplo também demonstra os dois tipos de comportamento de expansão. O botão switch define a propriedade singleExpand para alternar entre ramificações únicas e múltiplas a serem expandidas ao mesmo tempo.

    Getting Started with Web Components Accordion

    Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

    npm install igniteui-webcomponents

    Antes de usar o IgcAccordionComponent, você precisa registrá-lo da seguinte forma:

    import { defineComponents, IgcAccordionComponent } from 'igniteui-webcomponents';

defineComponents(IgcAccordionComponent);

    Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Introdução.

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

    Usage

    Cada seção no Web Components Accordion Component é definida usando um Web Components Expansion Panel. Os painéis fornecem propriedades Disabled e Open, que dão a você a capacidade de 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.

    <igc-accordion id="accordion" single-expand="true">
    <igc-expansion-panel>
        <div slot="title">Title Panel 1</div>
        <div>
            Content Panel 1
        </div>
    </igc-expansion-panel>
    <igc-expansion-panel>
        <div slot="title">Title Panel 2</div>
        <div>
            Content Panel 2
        </div>
    </igc-expansion-panel>
</igc-accordion>

    Usando o acessador Panels você pode obter uma referência à coleção que contém todos os painéis de expansão filhos do IgcAccordionComponent.

    private accordion: IgcAccordionComponent;
private panels: IgcExpansionPanelComponent[];

constructor() {
	this.accordion = document.getElementById("accordion") as IgcAccordionComponent;
	this.panels = this.accordion.panels;
}

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

    Ao usar os métodos hideAll e showAll, você pode, respectivamente, recolher e expandir todos os IgcExpansionPanelComponent s do IgcAccordionComponent programaticamente.

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

    Web Components Accordion Customization Example

    Com o Web Components 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 integrados do IgcExpansionPanelComponent.

    Nested Web Components Accordions Scenario

    No exemplo a seguir Web Components Accordion é criada uma seção de FAQ complexa para ilustrar como você pode lidar com esse cenário de aplicação comum. No exemplo, o aninhado IgcAccordionComponent é obtido adicionando um acordeão dentro de um painel de expansão.

    Keyboard Navigation

    A navegação pelo teclado no Web Components 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 em foco no acordeão
    • Alt + ↑- fecha o painel em foco no acordeão
    • Shift + Alt + ↓- abre todos os painéis habilitados (se singleExpand estiver definido como verdadeiro, abre o painel em foco)
    • Shift + Alt + ↑- fecha todos os painéis habilitados
    • Home- navega até o PRIMEIRO painel habilitado no acordeão
    • Fim- navega para o ÚLTIMO painel habilitado no acordeão

    API References

    Additional Resources