Os acordeões são uma das formas mais populares de organizar as informações e, com diferentes efeitos, podemos mostrar as informações neles contidas. Eles já estão na web há um tempo e podemos implementá-los com estruturas como jQuery, Bootstrap e mesmo que ousemos construí-los utilizando apenas HTML5 Y CSS3.
Mas as tecnologias evoluem rapidamente e, embora a implementação de um acordeão usando as estruturas mencionadas seja bastante simples, ainda existem métodos que vão além dessa simplicidade. Uma delas é fazer isso com a nova linguagem de design chamada Design material e nos apoiando a partir da estrutura Materializar para isso.
Acordeões em design de materiais
Acordeões em Design material Não só são fáceis de implementar, como também temos várias funcionalidades para eles, o que nos dá uma variedade muito maior para o nosso site, entre elas temos as seguintes:
Acordeão
É o clássico e permite organizar as informações em blocos que se desfazem ao clicar sobre eles, estes são definidos com a aula acordeão dobrável.
Popout
Digite acordeões popout adicione um novo efeito ao componente popular e combine a funcionalidade clássica com efeitos de exibição muito mais elaborados, que são definidos com a classe popout dobrável.
Expansível
Finalmente, o acordeões expansíveis ou expansível permite abrir vários acordeões ao mesmo tempo, ou seja, o acordeão que este ativo não fecha se quisermos ver algum outro, para definir este tipo de acordeão utiliza-se o atributo colapsável de dados do tipo expansível.
Depois de sabermos quais são os tipos de acordeões que podemos implementar, vamos fazer um exemplo onde incluímos os três tipos em uma única página.
Implementando os acordeões da web
A primeira coisa a fazer é incluir as bibliotecas de Materializar, tanto o arquivo .js quanto a folha de estilo do framework, é importante que também façamos um link para os ícones para poder usá-los em nosso exemplo e sem esquecer a versão mais recente do jQuery antes da biblioteca JavaScript de Materializar:
Feito isso, vamos criar uma estrutura de três contêineres para cada acordeão que implementarmos, o primeiro será o acordeão padrão e para defini-lo precisaremos criar uma estrutura de ul e li que iremos identificar com o classes correspondentes:
Acordeão padrão com design de materiais
- filter_dramaPrimeiro
Lorem ipsum dor sente-se amet.
- Lugar, colocarSegundo
Lorem ipsum dor sente-se amet.
- o que há de novoTerceiro
Lorem ipsum dor sente-se amet.
PROLONGAR
Como podemos ver, parece muito bom e não tivemos que fazer nada complicado, agora vamos criar nosso acordeão tipo popout, e para isso, basta adicionar a classe popout dobrável e manter a estrutura do exemplo anterior com que criaremos nossa funcionalidade, vamos ver o trecho de código para isso:
Como podemos ver, criamos uma funcionalidade extremamente poderosa e visualmente impressionante em apenas alguns minutos, cabe a todos pegar o exemplo e adaptá-lo às suas necessidades para criar funcionalidades ricas e úteis para qualquer site ou aplicativo atual.
Accordion_material_design.html 2,87K 170 downloads
