O menu de acordeão, também chamado de painel de expansão, é um recurso que permite aos usuários alternar entre ocultar e exibir conteúdo em uma IU.
Painéis empilhados verticalmente contêm as informações mais importantes e, ao clicar em um painel, ele se expande para revelar mais conteúdo relacionado, um conceito chamado divulgação progressiva.
O menu acordeão, que incorpora a divulgação progressiva, fornece uma IU limpa e minimiza a rolagem, especialmente em telas menores, o que é benéfico para dispositivos móveis.
Neste tutorial, vamos cobrir como construir um menu de acordeão no React do zero criando um aplicativo de FAQ.
Primeiros passos
Antes de iniciar o tutorial, certifique-se de ter um conhecimento básico do React e Node.js instalados . Você pode ver o projeto final aqui .
Agora, vamos começar.
Criando um novo projeto React
Execute o seguinte comando no diretório em que deseja salvar seu projeto (por exemplo, cd Desktop):
npx create-react-app react-accordion-menu
Assim que o projeto for gerado, abra-o com um editor de código e execute npm start para iniciar o servidor de desenvolvimento.
Arquitetura do projeto no React
Para organizar nosso projeto , dividiremos o layout do projeto em quatro unidades independentes chamadas de componentes.
O componente pai, App, contém dois componentes filhos imediatos, Cabeçalho e Acordeão. O acordeão contém o AccordionItem individual.
Vamos criar um arquivo para cada componente. Primeiro, exclua todos os arquivos na pasta src e crie um novo arquivo index.js para evitar uma quebra de página.
Em seguida, crie uma pasta chamada componentes em src e adicione os seguintes arquivos: App.js, Accordion.js, AccordionItem.js e Header.js.
Dentro de App.js, adicione o seguinte código inicial:
const App=()=> {return (
)} exportar o aplicativo padrão
Observe que incluímos className no contêiner div para aplicar estilos CSS aos elementos. Então, vamos criar um arquivo app.css na pasta src para conter os estilos CSS do nosso aplicativo, copie o Estilos CSS a partir daqui e adicione-os ao arquivo app.css.
Agora, vá para dentro do arquivo src/index.js e renderize o componente App assim:
importar React de”react”; importar ReactDOM de”react-dom”; importar App de”./components/App”;//importação de estilos”./app.css”; ReactDOM.render (Salve todos os arquivos e veja o conteúdo do aplicativo renderizado no frontend.
Criando o componente de cabeçalho de acordeão
O componente de cabeçalho renderiza apenas o conteúdo do título. Portanto, vamos simplesmente adicionar o seguinte código no arquivo components/Header.js:
const Header=()=> {return (
seção de ajuda da FAQ
)}; exportar cabeçalho padrão;
Salve o arquivo. Em seguida, importe o componente no arquivo components/App.js:
import Header from”./Header”; const App=()=> {return (
); }; exportar aplicativo padrão;
Salve o arquivo para ver o texto do título renderizado no frontend.
Criando o componente de acordeão no React
O componente de acordeão no design contém o AccordionItem individual. AccordionItem é um componente que contém o título e o conteúdo suspenso.
Para criar o título e o conteúdo suspenso, crie um arquivo data.js na pasta src e adicione o seguinte:
export const faqs=[{pergunta:”Lorem ipsum dolor sit amet?”, resposta:”Tenetur ullam rerum ad iusto possimus sequi mollitia dolore sunt quam praesentium. Tenetur ullam rerum ad iusto possimus sequi mollitia dolore sunt quam praesentium ad iusto possimus. mollitia dolore sunt quam praesentium.”,}, {pergunta:”Dignissimos sequi architecto?”, responda:”Aperiam ab atque incidunt dolores ullam est, earum ipsa recusandae velit cumque. Aperiam ab atque incidunt dolores ullam est, earum ipsa recusandae velit cumque.”,}, {pergunta:”Voluptas praesentium facere?”, responda:”Blanditiis aliquid adipisci quisquam reiciendis voluptates itaque.”,},];
Aqui, criamos uma série de objetos chamados faqs. Devemos percorrer esses dados para exibir o item faqs individual. Em seguida, salve o arquivo.
No React, os dados fluem do componente pai para os filhos por meio de acessórios. Neste caso, importamos os dados no componente principal Accordion, percorremos-os e passamos para o componente AccordionItem.
Abra o arquivo components/Accordion.js e adicione o seguinte código para importar o dados:
import {faqs} de”../data”; importar AccordionItem de”./AccordionItem”; const Accordion=()=> {return (
- {faqs.map ((faq, index)=> (
); }; exportar acordeão padrão;
Agora podemos acessar os dados no componente AccordionItem por meio do faq prop.
Em seguida, devemos salvar o arquivo e importar o Accordion para o arquivo App.js:
//… importar acordeão de”./Acordeão”; const App=()=> {return (
); };//…
No arquivo components/AccordionItem.js, adicione o seguinte código para acessar os dados das perguntas e respostas dos props para usá-los em nossa marcação JSX:
const AccordionItem=({faq})=> {const {pergunta, resposta}=faq; return (
); }; exportar AccordionItem padrão;
Depois de salvar os arquivos novamente, a seção de perguntas frequentes do aplicativo fica assim:
Alternando os painéis de acordeão
Vamos definir uma lógica para detectar um componente AccordionItem clicado. Usando um número de índice AccordionItem, podemos retornar um valor booleano para alternar dinamicamente o painel e usar o valor para estilizar o painel ativo.
Para fazer isso, devemos entender como aumentar e trabalhar um evento no React .
Quando um usuário clica no painel acordeão, devemos alcançar o componente que gerencia o estado para atualizar o valor do estado.
O componente AccordionItem que mantém o título individual e o conteúdo suspenso aciona um evento ao clicar enquanto o componente Acordeão (que manterá o estado) manipula o evento.
Isso é gerar um evento do componente filho para o pai e, para iniciar este processo, devemos definir o estado para gerenciar o evento de clique.
No arquivo components/Accordion.js, vamos adicionar o useState ():
import {useState} de”react”;//… const Accordion=()=> {const [clicked, setClicked]=useState (“0”); Retorna ( //… ); }; exportar acordeão padrão;
Com o estado adicionado, devemos adicionar um manipulador para atualizar o valor do estado ao clicar em um painel, bem como uma lógica que usa o valor do estado para exibir ou ocultar dinamicamente o painel acordeão.
Primeiro, vamos adicionar uma função de manipulador, handleToggle, acima da instrução de retorno e passá-la para o componente AccordionItem. O arquivo component/Accordion.js agora se parece com isto:
//… const Accordion=()=> {const [clicked, setClicked]=useState (“0”); const handleToggle=(index)=> {if (clicked===index) {return setClicked (“0”)} setClicked (index)}; return (
- {faqs.map ((faq, index)=> (
); }; exportar acordeão padrão;
O manipulador handleToggle recebe o índice do painel clicado e atualiza o valor do estado. Observe que passamos o manipulador para o componente AccordionItem por meio de uma função de retorno de chamada e adicionamos um prop ativo para detectar qual painel está ativo ou não.
Agora, podemos acessar o manipulador handleToggle por meio do prop onToggle, bem como o painel ativo por meio do prop ativo do componente AccordionItem.
Atualize o arquivo components/AccordionItem.js para incluir os props ativo e onToggle:
const AccordionItem=({faq, active, onToggle} )=> {const {pergunta, resposta}=faq; return (
); }; exportar AccordionItem padrão;
Com a prop onToggle atribuída ao evento onClick do elemento do botão, clicar no botão agora aciona a função handleToggle no componente Accordion.
A prop ativa, que é um valor booleano, adiciona o nome da classe a o painel ativo para estilizá-lo.
Agora podemos atualizar o arquivo CSS para acomodar os nomes das classes dinâmicas. Abra o arquivo src/app.css e adicione os seguintes estilos na parte inferior:
/* activate toggle */.accordion_item.active.button {background-color: # 105057; }.answer_wrapper {altura: 0; estouro: oculto; }.answer_wrapper.open {height: auto; }
Salve todos os arquivos, teste o aplicativo e ele deve funcionar.
Implementando uma alternância de transição
Para fazer com que o painel de acordeão alterne suavemente, adicionaremos uma transição CSS para adicionar um efeito de transição suave ao longo de uma determinada duração.
Vamos atualizar o.answer_wrapper para incluir a propriedade CSS de transição:
.answer_wrapper {/*… */transaction: height facilidade 0.2 s; }
Se salvarmos o arquivo e testarmos nosso projeto, ele não funcionará a menos que alteremos a altura do conteúdo de auto para um valor explícito, como 100px:
.answer_wrapper.open {height: 100px; }
No entanto, isso não é prático para conteúdo dinâmico, pois o uso de uma altura fixa pode ser muito grande ou muito pequeno para o conteúdo. Para corrigir esse problema, podemos usar scrollHeight para definir dinamicamente a altura do conteúdo suspenso.
Usando o DOM scrollHeight
A propriedade DOM scrollHeight nos permite medir a altura de um elemento com base na quantidade de conteúdo.
No React, podemos acessar o elemento DOM por meio do useRef Hook para obter a altura do conteúdo.
Abra o arquivo AccordionItem.js e importe o gancho useRef, da seguinte forma:
import {useRef} from”react”; const AccordionItem=({faq, ativo, onToggle})=> {//… const contentEl=useRef (); return (
); };//…
Observe como passamos uma prop ref para o elemento de destino que contém o conteúdo suspenso. Também removemos o nome da classe aberta do elemento de conteúdo suspenso. Agora podemos adicionar dinamicamente a altura do conteúdo explícito usando scrollHeight no atributo style:
Depois de salvar o arquivo novamente, remova este estilo do arquivo app.css, já que agora é redundante:
.answer_wrapper.open {height: auto; }
Agora teste o aplicativo e veja o efeito de transição suave ao alternar o painel de acordeão.
Conclusão
Aprendendo como criar um menu de acordeão de transição suave, agora você pode implementar em seus próprios projetos React.
Se você tiver perguntas ou contribuições, compartilhe-as na seção de comentários. Você pode encontrar o código-fonte do projeto neste repositório GitHub .
