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. 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 React Accordion

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

    npm install igniteui-react

    Você então precisará importar oIgrAccordion e oIgrExpansionPanel e seu 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 dosIgrAccordion painéis e de seus painéis.

    Usage

    Cada seção do Componente React Acordeão é definida usando um Painel de Expansão React. 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.

    <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>

    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 todosIgrExpansionPanel osIgrAccordion 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 opções de filtragem elaboradas podem ser implementadas usando os slots embutidos doIgrExpansionPanel.

    Nested React Accordions Scenario

    A seguir React 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 aninhamentoIgrAccordion é 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 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