Il wordpress Gpci framework fa largo uso di attributi html; certi attributi sono riservati ai patterns, moduli o certi effetti e possono anche essere associati a funzioni javascript per ottenere animazioni o altre manipolazioni invece di specificare gli argomenti della funzione. Questo serve a poter generare funzioni javascript controllate utilizzando solo (o quasi) gli attributi del blocco. Inoltre gli attributi html sono utilissimi per selezionare elementi con il css (ad esempio il blocco gutenberg menu classico). In questa pagina è contenuta una panoramica sugli attributi html e la lista degli attributi utilizzati nel framework.
Attributi equivalenti a classi
Questi sono gli attributi equivalenti alle classi predefinite del framework. Il risultato sarà lo stesso ma il vantaggio è quello di poterli utilizzare nel controllo attributi oppure iniettarli direttamente in html e selezionarli con il css come attributi invece che come classi.
| Attributo | Tipo | Descrizione | Css corrispondente |
|---|---|---|---|
| [hidden] | globale | nasconde l'elemento (utilizzato in vari pattern) | display:none |
| [data-hiddenonphone] | media queries | nasconde l'elemento su smartphone | @media only screen and (max-width:781px){ |
| [data-hiddenontablet] | media queries | nasconde l'elemento su tablet | @media screen and (min-width:782px) and (max-width:1279px){ |
| [data-hiddenondesktop] | media queries | nasconde l'elemento su desktop | @media only screen and (min-width:1280px){ |
| [data-hiddenontabletdesktop] | media queries | nasconde l'elemento su tablet e desktop | @media only screen and (min-width:782px){ |
Esempio
<!--I tre metodi sono equivalenti nel risultato (cambia il dispositivo ovviamente)-->
<div data-hiddenonphone><p>Contenuto nascosto su smartphone</p></div>
<!--oppure-->
<div data-hiddenontablet="true"><p>Contenuto nascosto su tablet</p></div>
<!--oppure-->
<div data-hiddenondesktop="hiddenondesktop"><p>Contenuto nascosto su desktop</p></div>Attributi speciali
Questi sono gli attributi speciali utilizzati nel framework da funzioni javascript, moduli o contesti particolari. E' bene che siano utilizzati solo nei contesti specificati per non creare alcun tipo di conflitto. Man mano la tabella sarà aggiornata:
| Attributo | Tipo |
|---|---|
| [data-animate-type] | funzione js AnimateElements |
| [data-animate-active] | funzione js AnimateElements |
| [data-animate-animation] | funzione js AnimateElements |
| [data-animate-value] | funzione js AnimateElements |
| [data-animate-unit] | funzione js AnimateElements |
| [data-animate-waitfor] | funzione js AnimateElements |
| [data-animate-autoforward] | funzione js AnimateElements |
| [data-animate-total] | funzione js AnimateElements |
| [data-animate-animation-container] | funzione js AnimateElements |
| [data-print-index] | modulo di stampa |
| [data-tab-button-active] | pattern tabs |
| [data-tab-button-not-active] | pattern tabs |
| [data-tab-button-active-inverting] | pattern tabs |
| [data-tab-content-index] | pattern tabs |
| [data-tab-button-index] | pattern tabs |