Differenze tra le versioni di "Template:Col"
(→Funzionamento generale: colori) |
|||
(12 versioni intermedie di 3 utenti non mostrate) | |||
Riga 1: | Riga 1: | ||
− | <includeonly><div class="col-{{#if:workaround-trim|{{{1|6}}}}}{{#if:{{{2|}}}|<nowiki /> color-}}{{#if:workaround-trim|{{{2|}}}}}">{{#if:workaround-trim|{{{3|}}}{{{content|}}}}}</div></includeonly><noinclude> | + | <includeonly><div class="col-{{#if:workaround-trim|{{{1|6}}}}}{{#if:{{{2|}}}|<nowiki /> color-}}{{#if:workaround-trim|{{{2|}}}}}{{#if:{{{classi|}}}|<nowiki /> {{{classi|}}}}}">{{#if:workaround-trim|{{{3|}}}{{{content|}}}}}</div></includeonly><noinclude> |
Il template {{Tl|col}} permette di disporre i contenuti in una griglia, assegnandoli in determinate colonne. | Il template {{Tl|col}} permette di disporre i contenuti in una griglia, assegnandoli in determinate colonne. | ||
Riga 30: | Riga 30: | ||
Notare che i colori sono al momento limitati a questi: | Notare che i colori sono al momento limitati a questi: | ||
− | * <span class="color- | + | {{Colonne}} |
+ | * <span class="color-transparent">transparent</span> | ||
+ | * <span class="color-primary">primary</span> | ||
+ | * <span class="color-medium-primary">medium-primary</span> | ||
+ | * <span class="color-light-primary">light-primary</span> | ||
+ | * <span class="color-white">white</span> | ||
+ | * <span class="color-black">black</span> | ||
+ | * <span class="color-dark-grey">dark-grey</span> | ||
+ | * <span class="color-medium-grey">medium-grey</span> | ||
+ | * <span class="color-light-grey">light-grey</span> | ||
+ | * <span class="color-extra-light-grey">extra-light-grey</span> | ||
+ | {{Colonne spezza}} | ||
* <span class="color-red">red</span> | * <span class="color-red">red</span> | ||
− | * <span class="color- | + | * <span class="color-blue">blue</span> |
* <span class="color-green">green</span> | * <span class="color-green">green</span> | ||
− | * <span class="color-blue">blue</span> | + | * <span class="color-pink">pink</span> |
− | * <span class="color- | + | * <span class="color-orange">orange</span> |
+ | * <span class="color-yellow">yellow</span> | ||
+ | * <span class="color-purple">purple</span> | ||
+ | * <span class="color-teal">teal</span> | ||
+ | * <span class="color-aqua">aqua</span> | ||
+ | * <span class="color-beige">beige</span> | ||
+ | * <span class="color-turquoise">turquoise</span> | ||
+ | {{Colonne spezza}} | ||
+ | * <span class="color-light-red">light-red</span> | ||
+ | * <span class="color-light-blue">light-blue</span> | ||
+ | * <span class="color-light-green">light-green</span> | ||
+ | * <span class="color-light-pink">light-pink</span> | ||
+ | * <span class="color-light-orange">light-orange</span> | ||
+ | * <span class="color-light-yellow">light-yellow</span> | ||
+ | * <span class="color-light-purple">light-purple</span> | ||
+ | * <span class="color-light-teal">light-teal</span> | ||
+ | * <span class="color-light-aqua">light-aqua</span> | ||
+ | * <span class="color-light-beige">light-beige</span> | ||
+ | * <span class="color-light-turquoise">light-turquoise</span> | ||
+ | {{Colonne fine}} | ||
== Esempi == | == Esempi == | ||
Riga 45: | Riga 75: | ||
<pre> | <pre> | ||
{{row}} | {{row}} | ||
− | {{col|3| | + | {{col|3|purple|A}} |
{{col|3|yellow|B}} | {{col|3|yellow|B}} | ||
{{row end}} | {{row end}} | ||
Riga 53: | Riga 83: | ||
{{row}} | {{row}} | ||
− | {{col|3| | + | {{col|3|purple|A}} |
{{col|3|yellow|B}} | {{col|3|yellow|B}} | ||
{{row end}} | {{row end}} | ||
Riga 65: | Riga 95: | ||
<pre> | <pre> | ||
{{row}} | {{row}} | ||
− | {{col|3| | + | {{col|3|purple|A}} |
{{row end}} | {{row end}} | ||
</pre> | </pre> | ||
Riga 72: | Riga 102: | ||
{{row}} | {{row}} | ||
− | {{col|3| | + | {{col|3|purple|A}} |
{{row end}} | {{row end}} | ||
Riga 83: | Riga 113: | ||
<pre> | <pre> | ||
{{row}} | {{row}} | ||
− | {{col|1| | + | {{col|1|purple|A}} |
{{col|1|yellow|B}} | {{col|1|yellow|B}} | ||
{{col|1|red |C}} | {{col|1|red |C}} | ||
{{col|1|blue |D}} | {{col|1|blue |D}} | ||
{{col|1|green |E}} | {{col|1|green |E}} | ||
− | {{col|1| | + | {{col|1|purple|F}} |
{{row end}} | {{row end}} | ||
</pre> | </pre> | ||
Riga 95: | Riga 125: | ||
{{row}} | {{row}} | ||
− | {{col|1| | + | {{col|1|purple|A}} |
{{col|1|yellow|B}} | {{col|1|yellow|B}} | ||
{{col|1|red |C}} | {{col|1|red |C}} | ||
{{col|1|blue |D}} | {{col|1|blue |D}} | ||
{{col|1|green |E}} | {{col|1|green |E}} | ||
− | {{col|1| | + | {{col|1|purple|F}} |
{{row end}} | {{row end}} | ||
Riga 111: | Riga 141: | ||
<pre> | <pre> | ||
{{row}} | {{row}} | ||
− | {{col|2| | + | {{col|2|purple|A}} |
{{col|1|yellow|B}} | {{col|1|yellow|B}} | ||
{{col|1|red |C}} | {{col|1|red |C}} | ||
Riga 121: | Riga 151: | ||
{{row}} | {{row}} | ||
− | {{col|2| | + | {{col|2|purple|A}} |
{{col|1|yellow|B}} | {{col|1|yellow|B}} | ||
{{col|1|red |C}} | {{col|1|red |C}} | ||
Riga 135: | Riga 165: | ||
<pre> | <pre> | ||
{{row}} | {{row}} | ||
− | {{col|6| | + | {{col|6|purple|A}} |
{{row end}} | {{row end}} | ||
{{row}} | {{row}} | ||
Riga 144: | Riga 174: | ||
{{col|2|blue |D}} | {{col|2|blue |D}} | ||
{{col|2|green |E}} | {{col|2|green |E}} | ||
− | {{col|2| | + | {{col|2|purple|F}} |
{{row end}} | {{row end}} | ||
</pre> | </pre> | ||
Riga 151: | Riga 181: | ||
{{row}} | {{row}} | ||
− | {{col|6| | + | {{col|6|purple|A}} |
{{row end}} | {{row end}} | ||
{{row}} | {{row}} | ||
Riga 160: | Riga 190: | ||
{{col|2|blue |D}} | {{col|2|blue |D}} | ||
{{col|2|green |E}} | {{col|2|green |E}} | ||
− | {{col|2| | + | {{col|2|purple|F}} |
{{row end}} | {{row end}} | ||
Riga 176: | Riga 206: | ||
<pre> | <pre> | ||
{{row}} | {{row}} | ||
− | {{col|6| | + | {{col|6|purple|content= |
A | A | ||
Riga 200: | Riga 230: | ||
{{row}} | {{row}} | ||
− | {{col|6| | + | {{col|6|purple|content= |
A | A | ||
Riga 225: | Riga 255: | ||
Nota: il testo libero non ha senso direttamente dentro ad una riga. Nell'esempio in alto infatti, ogni testo è direttamente inserito in una colonna. | Nota: il testo libero non ha senso direttamente dentro ad una riga. Nell'esempio in alto infatti, ogni testo è direttamente inserito in una colonna. | ||
+ | |||
+ | |||
+ | Esempio di utilizzo base nel wikitesto con l'uso del parametro <code>nopadding=</code>, a sinistra con sfondo viola e a destra con sfondo trasparente: | ||
+ | |||
+ | <pre> | ||
+ | {{row}} | ||
+ | {{col|6|purple|nopadding=1|content= | ||
+ | A | ||
+ | |||
+ | {{row}} | ||
+ | {{col|3|yellow|B}} | ||
+ | {{col|3|red |C}} | ||
+ | {{row end}} | ||
+ | |||
+ | D | ||
+ | }} | ||
+ | {{col|6|transparent|nopadding=1|content= | ||
+ | E | ||
+ | |||
+ | {{row}} | ||
+ | {{col|3|blue |F}} | ||
+ | {{col|3|green|G}} | ||
+ | {{row end}} | ||
+ | |||
+ | H | ||
+ | }} | ||
+ | {{row end}} | ||
+ | </pre> | ||
+ | |||
+ | {{row}} | ||
+ | {{col|6|purple|nopadding=1|content= | ||
+ | A | ||
+ | |||
+ | {{row}} | ||
+ | {{col|3|yellow|B}} | ||
+ | {{col|3|red |C}} | ||
+ | {{row end}} | ||
+ | |||
+ | D | ||
+ | }} | ||
+ | {{col|6|transparent|nopadding=1|content= | ||
+ | E | ||
+ | |||
+ | {{row}} | ||
+ | {{col|3|blue |F}} | ||
+ | {{col|3|green|G}} | ||
+ | {{row end}} | ||
+ | |||
+ | H | ||
+ | }} | ||
+ | {{row end}} | ||
+ | |||
+ | == Utilizzi con immagini == | ||
+ | Per le immagini c'è un template dedicato chiamato {{Tl|Col immagine}} che si invita ad approfondire, ma in breve si usa così: | ||
+ | |||
+ | <pre> | ||
+ | {{row}} | ||
+ | {{col |3|purple|content=Lorem ipsum}} | ||
+ | {{col immagine|2|Mountains of Wadi Shawka denoised.jpg}} | ||
+ | {{col |1|blue |content=Lorem ipsum}} | ||
+ | {{row end}} | ||
+ | </pre> | ||
+ | |||
+ | Risultato: | ||
+ | |||
+ | {{row}} | ||
+ | {{col |3|purple|content=Lorem ipsum}} | ||
+ | {{col immagine|2|Mountains of Wadi Shawka denoised.jpg}} | ||
+ | {{col |1|blue |content=Lorem ipsum}} | ||
+ | {{row end}} | ||
== Non documentati == | == Non documentati == | ||
Riga 232: | Riga 332: | ||
<pre> | <pre> | ||
{{row}} | {{row}} | ||
− | {{col|6| | + | {{col|6|purple|A}} |
{{col|6|yellow|B}} | {{col|6|yellow|B}} | ||
{{col|6|red |C}} | {{col|6|red |C}} | ||
{{col|6|blue |D}} | {{col|6|blue |D}} | ||
{{col|6|green |E}} | {{col|6|green |E}} | ||
− | {{col|1| | + | {{col|1|purple|F}} |
{{col|1|yellow|G}} | {{col|1|yellow|G}} | ||
{{col|1|red |H}} | {{col|1|red |H}} | ||
Riga 248: | Riga 348: | ||
{{row}} | {{row}} | ||
− | {{col|6| | + | {{col|6|purple|A}} |
{{col|6|yellow|B}} | {{col|6|yellow|B}} | ||
{{col|6|red |C}} | {{col|6|red |C}} | ||
{{col|6|blue |D}} | {{col|6|blue |D}} | ||
{{col|6|green |E}} | {{col|6|green |E}} | ||
− | {{col|1| | + | {{col|1|purple|F}} |
{{col|1|yellow|G}} | {{col|1|yellow|G}} | ||
{{col|1|red |H}} | {{col|1|red |H}} | ||
Riga 269: | Riga 369: | ||
;Non ho sbagliato nulla ma il template non funziona correttamente: Prova ad utilizzare la versione avanzata, non quella semplice (quindi specificando il parametro <code>content</code> nella colonna). | ;Non ho sbagliato nulla ma il template non funziona correttamente: Prova ad utilizzare la versione avanzata, non quella semplice (quindi specificando il parametro <code>content</code> nella colonna). | ||
+ | == Template correlati == | ||
+ | * {{tl|row}} | ||
+ | * {{tl|Row-empty}} | ||
+ | * {{tl|row end}} | ||
+ | * {{tl|col immagine}} - per inserire un box contenente solo un'immagine | ||
+ | |||
+ | [[Categoria:Template di formattazione]] | ||
</noinclude> | </noinclude> |
Versione attuale delle 09:27, 16 giu 2022
Il template {{col}} permette di disporre i contenuti in una griglia, assegnandoli in determinate colonne.
Rispetto ad una tabella tradizionale, questo sistema viene solitamente adottato nel web design per poter creare vari layout creativi e adattabili sia per desktop che mobile.
Funzionamento generale
Per definire una "colonna" che contenga del semplice testo, puoi usare questa sintassi:
{{row}} {{col|larghezza|colore|Testo semplice visualizzato}} {{row end}}
Oppure per definire una colonna che potrebbe contenere qualche carattere speciale (come l'uguale):
{{row}} {{col|larghezza|colore|content = Testo avanzato visualizzato}} {{row end}}
Puoi personalizzare la larghezza della colonna con un numero intero da 1 a 6. Le colonne vivono in una "riga".
Per definire una di queste "righe", si usa il template {{row}}...{{row end}}. Una riga può contenere varie colonne per un massimo di 6 slot (ad esempio: una colonna da 6, oppure sei piccole colonne da 1, etc.).
- Importante
- La versione con "Testo semplice" non è raccomandata per testi lunghi o strutture complesse.
Notare che i colori sono al momento limitati a questi:
|
|
|
Esempi
Esempio base a due colonne
Esempio di utilizzo base nel wikitesto:
{{row}} {{col|3|purple|A}} {{col|3|yellow|B}} {{row end}}
Risultato:
Nell'esempio in alto è stata creata una riga, che contiene due colonne, entrambi larghe 3 slot. Si ricorda che la riga supporta massimo 6 slot.
Esempio base a una colonna
Esempio di utilizzo base nel wikitesto:
{{row}} {{col|3|purple|A}} {{row end}}
Risultato:
Nell'esempio in alto è stata creata una riga, che contiene una colonna, larga 3 slot. Si ricorda che la riga supporta massimo 6 slot.
Esempio base multi-colonna
Esempio di utilizzo base nel wikitesto:
{{row}} {{col|1|purple|A}} {{col|1|yellow|B}} {{col|1|red |C}} {{col|1|blue |D}} {{col|1|green |E}} {{col|1|purple|F}} {{row end}}
Risultato:
Nell'esempio in alto è stata creata una riga, che contiene sei colonne, tutte larghe 1 slot. Si ricorda che la riga supporta massimo 6 slot.
Altro esempio base
Esempio di utilizzo base nel wikitesto:
{{row}} {{col|2|purple|A}} {{col|1|yellow|B}} {{col|1|red |C}} {{col|2|blue |D}} {{row end}}
Risultato:
Nell'esempio in alto è stata creata una riga, che contiene due colonne laterali da 2 slot, e due colonne centrali da 1 slot. Si ricorda che la riga supporta massimo 6 slot.
Utilizzo multi-riga
Esempio di utilizzo base nel wikitesto:
{{row}} {{col|6|purple|A}} {{row end}} {{row}} {{col|3|yellow|B}} {{col|3|red |C}} {{row end}} {{row}} {{col|2|blue |D}} {{col|2|green |E}} {{col|2|purple|F}} {{row end}}
Risultato:
Nell'esempio in alto sono state create tre righe:
- la prima riga ha una sola colonna da 6 slot (totale slot: 6)
- la seconda riga ha due colonne da 3 slot (totale slot: 6)
- la terza riga ha tre colonne da 2 slot (totale slot: 6)
Si ricorda che la riga supporta massimo 6 slot.
Utilizzi innestati
Esempio di utilizzo base nel wikitesto:
{{row}} {{col|6|purple|content= A {{row}} {{col|3|yellow|B}} {{col|3|red |C}} {{row end}} D }} {{col|6|yellow|content= E {{row}} {{col|3|blue |F}} {{col|3|green|G}} {{row end}} H }} {{row end}}
Nell'esempio in alto è stata creata una sola riga genitore che contiene direttamente solo due colonne. Al loro interno, queste due colonne contengono a loro volta del desto libero, un'altra riga con due colonne, e altro testo libero.
Nota: il testo libero non ha senso direttamente dentro ad una riga. Nell'esempio in alto infatti, ogni testo è direttamente inserito in una colonna.
Esempio di utilizzo base nel wikitesto con l'uso del parametro nopadding=
, a sinistra con sfondo viola e a destra con sfondo trasparente:
{{row}} {{col|6|purple|nopadding=1|content= A {{row}} {{col|3|yellow|B}} {{col|3|red |C}} {{row end}} D }} {{col|6|transparent|nopadding=1|content= E {{row}} {{col|3|blue |F}} {{col|3|green|G}} {{row end}} H }} {{row end}}
Utilizzi con immagini
Per le immagini c'è un template dedicato chiamato {{Col immagine}} che si invita ad approfondire, ma in breve si usa così:
{{row}} {{col |3|purple|content=Lorem ipsum}} {{col immagine|2|Mountains of Wadi Shawka denoised.jpg}} {{col |1|blue |content=Lorem ipsum}} {{row end}}
Risultato:
Non documentati
Esempio di utilizzo base nel wikitesto:
{{row}} {{col|6|purple|A}} {{col|6|yellow|B}} {{col|6|red |C}} {{col|6|blue |D}} {{col|6|green |E}} {{col|1|purple|F}} {{col|1|yellow|G}} {{col|1|red |H}} {{col|1|blue |I}} {{col|1|green |L}} {{row end}}
Risultato:
Nell'esempio soprastante è stata creata una sola riga che contiene diverse colonne. Le colonne sono troppe, occupano circa 35 slot mentre si ricorda che ogni riga dovrebbe avere massimo 6 slot.
Si raccomanda di non fare affidamento su questo comportamento perché potrebbe avere risultati imprevisti in futuro.
Risoluzione dei problemi
- Il template non funziona correttamente
- Verifica di aver rispettato tutte le regole di questo manuale. Analizza attentamente gli esempi e confrontali con il tuo codice.
- Non ho sbagliato nulla ma il template non funziona correttamente
- Prova ad utilizzare la versione avanzata, non quella semplice (quindi specificando il parametro
content
nella colonna).
Template correlati
- {{row}}
- {{Row-empty}}
- {{row end}}
- {{col immagine}} - per inserire un box contenente solo un'immagine