Crea una fisarmonica con Material Design

Le fisarmoniche sono uno dei modi più diffusi per organizzare le informazioni e quindi utilizzando diversi effetti possiamo mostrare le informazioni in esse contenute. Questi sono già sul web da un po' e possiamo implementarli con framework come jQuery, Bootstrap e anche se osiamo costruirli utilizzando solo HTML5 sì CSS3.

Ma le tecnologie si evolvono rapidamente e sebbene implementare una fisarmonica utilizzando i suddetti framework sia abbastanza semplice, ci sono ancora metodi che vanno oltre questa semplicità. Uno di questi è farlo con il nuovo linguaggio di design chiamato Design dei materiali e supportandoci dal framework materializzare per questo.

Fisarmoniche nel design dei materiali
fisarmoniche in Design dei materiali Non sono solo facili da implementare, abbiamo anche diverse funzionalità per loro, il che ci offre una varietà molto più ampia per il nostro sito Web, tra cui abbiamo le seguenti:

Fisarmonica
È il classico e permette di organizzare le informazioni in blocchi che si chiudono uno dopo l'altro quando si clicca su di essi, questi si definiscono con la classe fisarmonica pieghevole.

Saltare fuori
Tipo fisarmoniche saltare fuori aggiungi un nuovo effetto al componente popolare e combina la funzionalità classica con effetti di visualizzazione molto più elaborati, questi sono definiti con la classe popout pieghevole.

Espandibile
Infine il fisarmoniche espandibili o espandibile consente di aprire più fisarmoniche contemporaneamente, cioè la fisarmonica che questa risorsa non chiuderà se vogliamo vederne un'altra, per definire questo tipo di fisarmoniche viene utilizzato l'attributo dati pieghevoli di tipo espandibile.

Una volta che sappiamo quali sono i tipi di fisarmoniche che possiamo implementare, faremo un esempio in cui includiamo i tre tipi in una singola pagina.

Implementazione delle fisarmoniche web

La prima cosa da fare è includere le librerie di materializzare, sia il file .js che il foglio di stile del framework, è importante che ci colleghiamo anche alle icone per poterle usare nel nostro esempio e senza dimenticare la versione più recente di jQuery prima della libreria JavaScript di materializzare:

Fatto ciò, creeremo una struttura di tre contenitori per ogni fisarmonica che implementeremo, la prima sarà la fisarmonica standard e per definirla dovremo creare una struttura di ul e li che identificheremo con la classi corrispondenti:

Fisarmonica standard con Material Design

filter_dramaPrimo
Lorem ipsum dolore sit amet.

postoSecondo
Lorem ipsum dolore sit amet.

cosa c'è di nuovoTerzo
Lorem ipsum dolore sit amet.

È importante ricordare che per ogni elemento all'interno della fisarmonica dobbiamo definire le classi di intestazione-comprimibile e il corpo pieghevole, ovvero il titolo e il messaggio di ognuno, vediamo come si presenta la nostra prima fisarmonica.

INGRANDIRE

Come possiamo vedere, sembra abbastanza buono e non abbiamo dovuto fare nulla di complicato, ora creeremo la nostra fisarmonica di tipo popout, e per questo, tutto ciò che dobbiamo fare è aggiungere la classe popout pieghevole e manteniamo la struttura dell'esempio precedente con cui creeremo la nostra funzionalità, vediamo lo snippet di codice per questo:

Infine per creare la nostra fisarmonica espandibile dobbiamo solo aggiungere al dati pieghevoli l'opzione espandibile e come abbiamo fatto in precedenza manteniamo la struttura e avremmo già le nostre funzionalità:

Per apprezzare come funzionano le nostre fisarmoniche, vediamo come si presentano di seguito.

Come possiamo vedere, abbiamo creato una funzionalità estremamente potente e visivamente impressionante in pochi minuti, sta solo a tutti prendere l'esempio e adattarlo alle proprie esigenze per creare funzionalità ricche e utili per qualsiasi sito Web o applicazione corrente.

accordion_material_design.html 2,87 K 170 download