Visão geral do acordeão React

    O Ignite UI for React Accordion é um componente GUI para a construção de painéis expansíveis verticais com cabeçalhos clicáveis e seções de conteúdo associadas, exibidas 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.

    React Accordion Example

    A seguir está um exemplo básico de Ignite UI for React Acordeão de uma seção de perguntas frequentes. Funciona como um acordeão, com seções de trabalho individual. 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 as informações com mais facilidade, sem ter que ir e voltar entre um painel que se expande automaticamente e se recolhe, 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 React Accordion

    Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

    npm install igniteui-react

    Em seguida, você precisará importar o IgrAccordion e o e seu IgrExpansionPanel CSS necessário, assim:

    import {
  IgrAccordion,
  IgrExpansionPanel,
} from "igniteui-react";
import "igniteui-webcomponents/themes/light/bootstrap.css";

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

    Usage

    Cada seção no componente sanfonado React é definida usando um React painel de expansão. Os painéis fornecem Disabled propriedades Open, que permitem configurar os estados do painel de acordo com sua necessidade.

    Declaring an Accordion

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

    <IgrAccordion singleExpand={true}>
  <IgrExpansionPanel>
    <div slot="title">Title Panel 1</div>
    <div>Content Panel 1</div>
  </IgrExpansionPanel>
  <IgrExpansionPanel>
    <div slot="title">Title Panel 2</div>
    <div>Content Panel 2</div>
  </IgrExpansionPanel>
</IgrAccordion>

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

    Usando os métodos and showAll, hideAll você pode, respectivamente, recolher e expandir todos os IgrExpansionPanel​ ​IgrAccordion s programaticamente.

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

    React Accordion Customization Example

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

    O exemplo abaixo demonstra como as opções de filtragem elaboradas podem ser implementadas usando os slots internos do IgrExpansionPanel.

    Nested React Accordions Scenario

    No exemplo de React acordeão a seguir, é criada uma seção complexa de perguntas frequentes para ilustrar como você pode fazer esse cenário de aplicativo comum. No exemplo aninhado IgrAccordion é obtido adicionando um acordeão dentro de um painel de expansão.

    Keyboard Navigation

    A navegação por teclado no React Accordion fornece uma grande variedade de interações de teclado para o usuário final. Essa funcionalidade é ativada 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