Prima o poi dovrò trovare il tempo per riportare le mie impressioni sul metodo Agile e su quello che sto imparando in questi mesi. So però una cosa: la mia idea di creare un sistema automatico per documentare componenti Svelte mi sta portando via più tempo del previsto. La tecnica non è molto complicata, ma continuano a saltare fuori dettagli che non avevo previsto. E, sopratutto, la mia tendenza a voler capire come funzionano le cose mi sta portando a impiegare molto tempo per ricreare alcuni elementi base. L’ultimo in ordine di tempo è l’accordion: un elemento che si può ingrandire e diminuire con un click.
Cosa voglio costruire
Cosa mi serve? Mi serve un elemento in grado di raggruppare le varie sezioni del componente principale in modo da non mostrare troppe informazioni. Un qualcosa di semplice, che non dipenda da altre librerie e che sia abbastanza leggero e personalizzabile. Per fortuna con Svelte è molto facile crearlo. E per quanto riguarda la parte CSS mi sono oramai abituato alla comodità di TailwindCSS.
Partiamo dalla struttura
La struttura base è molto semplice, bastano solamente 2 parti:
- una da usare come header del componente per inserire il titolo sezione;
- l’altra è un semplice slot in cui verrò inserito il contenuto da mostrare.
Ovviamente senza aggiungere né stili CSS né azioni il risultato è abbastanza deludente:
Aggiungiamo un po’ di stili
Passo quindi ad aggiungere un po’ di stili per evidenziare il titolo dell’elemento e i suoi margini. Per questo componente voglio usare uno stile monocromatico. E, sinceramente, sono sempre più attirato da questo genere di utilizzo dei colori, ma questo è un’altra storia.
Comincio quindi con il definire il titolo:
Per quello che riguarda il contenuto non posso aggiungere uno stile css direttamente allo slot. Posso però inserirlo in un div e stilizzare quello:
Apriamo e chiudiamo l’elemento
Svelte permette di nascondere e visualizzare un elemento della pagina in maniera molto semplice. Usando una semplice condizione if...then...else legata a un prop posso controllarne lo stato:
Aggiungiamo un’icona ruotante
Ma quello che serve a me è un modo per aprire con un click l’elemento. Per farlo mi serve un pulsante e, possibilmente, un’animazione per evidenziare il click. Il modo più elegante che ho trovato mi è stato suggerito da un video di Johnny Magrippis (How to: Svelte Hamburger Menu Animation 🍔). Consiglio di guardare il video, anche perché é abbastanza veloce. In ogni caso, per cominciare mi serve un altro componente, Chevron.svelte, in cui inserisco un’immagine svg:
Ovviamente mi conviene aggiungere un po’ di stili per integrarla nel titolo del componente principale:
Lo scopo di questa icona è servire come pulsante: quando viene cliccata apre oppure chiude la parte sottostante dell’accordion. Quindi la inserisco in un elemento button e ci aggiungo due props:
Uso il prop open anche come classe CSS. In questo modo quando l’elemento è aperto posso cambiare l’icona a piacere. In particolare voglio farla ruotare di 180 gradi. Aggiungo quindi un po’ di stili CSS utili a questo scopo:
Aggiungiamo un’azione al componente
Adesso che l’icona fa il suo dovere posso tornare al componente principale e inserire un’azione per controllarne lo stato:
Cliccando sull’icona ottengo finalmente di poter aprire e chiudere l’accordion:
Aggiungiamo una transition
Il componente funziona ma, come dire, non è molto bello vedere apparire e sparire all’improvviso una parte della pagina. Per risolvere la cosa posso usare una delle caratteristiche di Svelte, le transition:
Ed ecco il risultato finale:
Come sempre il codice è liberamente consultabile e scaricabile da GitHub:
