Differenze tra le versioni di "Template:Col"

Da Wikimedia Italia.
Jump to navigation Jump to search
(introduzione)
(più esempi)
Riga 1: Riga 1:
<div class="col{{#if:{{{1|}}}|-}}{{#if:workaround-trim|{{{1|}}}}}{{#if:{{{2|}}}|<nowiki /> color-}}{{#if:workaround-trim|{{{2|}}}}}"><noinclude>
+
<includeonly><div class="col-{{#if:workaround-trim|{{{1|6}}}}}{{#if:{{{2|}}}|<nowiki /> color-}}{{#if:workaround-trim|{{{2|}}}}}"></includeonly><noinclude>
Il template {{Tl|col}} permette di disporre i contenuti in una griglia composta da 12 colonne utilizzabili a piacere.
+
Il template {{Tl|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.
 
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.
  
== Manuale ==
+
== Funzionamento ==
  
Ogni contenuto può essere disposto in una colonna, e ogni colonna può avere una dimensione da 1 a 12. Non ci possono essere più di 12 colonne in una sola riga
+
Ogni contenuto può essere disposto in una colonna {{Tl|col}} esprimendo una dimensione da 1 a 6.
  
=== Utilizzo base ===
+
Una colonna funziona soltanto in una riga {{Tl|row}} ... {{Tl|/row}}.
  
Utilizzo base nel wikitesto:
+
== Esempi ==
 +
 
 +
=== Esempio base a due colonne ===
 +
 
 +
Esempio di utilizzo base nel wikitesto:
  
 
<pre>
 
<pre>
 
{{row}}
 
{{row}}
{{col|12}}Colonna larga 12{{/col}}
+
{{col|3|violet}}A{{/col}}
{{col|5 }}Colonna larga 5{{/col}}
+
{{col|3|violet}}B{{/col}}
{{col|3 }}Colonna larga 3{{/col}}
 
{{col|4 }}Colonna larga 4{{/col}}
 
 
{{/row}}
 
{{/row}}
 
</pre>
 
</pre>
Riga 24: Riga 26:
  
 
{{row}}
 
{{row}}
{{col|12}}Colonna larga 12{{/col}}
+
{{col|3|violet}}A{{/col}}
{{col|5 }}Colonna larga 5{{/col}}
+
{{col|3|violet}}B{{/col}}
{{col|3 }}Colonna larga 3{{/col}}
+
{{/row}}
{{col|4 }}Colonna larga 4{{/col}}
+
 
 +
=== Esempio base multi-colonna ===
 +
 
 +
Esempio di utilizzo base nel wikitesto:
 +
 
 +
<pre>
 +
{{row}}
 +
{{col|1|violet}}A{{/col}}
 +
{{col|1|brown }}B{{/col}}
 +
{{col|1|red  }}C{{/col}}
 +
{{col|1|aqua  }}D{{/col}}
 +
{{col|1|green }}E{{/col}}
 +
{{/row}}
 +
</pre>
 +
 
 +
Risultato:
 +
 
 +
{{row}}
 +
{{col|1|violet}}A{{/col}}
 +
{{col|1|brown }}B{{/col}}
 +
{{col|1|red  }}C{{/col}}
 +
{{col|1|aqua  }}D{{/col}}
 +
{{col|1|green }}E{{/col}}
 +
{{/row}}
 +
 
 +
=== Altro esempio base ===
 +
 
 +
Esempio di utilizzo base nel wikitesto:
 +
 
 +
<pre>
 +
{{row}}
 +
{{col|2|violet}}A{{/col}}
 +
{{col|1|brown }}B{{/col}}
 +
{{col|1|red  }}C{{/col}}
 +
{{col|2|aqua  }}D{{/col}}
 +
{{/row}}
 +
</pre>
 +
 
 +
Risultato:
 +
 
 +
{{row}}
 +
{{col|2|violet}}A{{/col}}
 +
{{col|1|brown }}B{{/col}}
 +
{{col|1|red  }}C{{/col}}
 +
{{col|2|aqua  }}D{{/col}}
 +
{{/row}}
 +
 
 +
=== Utilizzo multi-riga ===
 +
 
 +
Esempio di utilizzo base nel wikitesto:
 +
 
 +
<pre>
 +
{{row}}
 +
{{col|6|violet}}A{{/col}}
 +
{{/row}}
 +
{{row}}
 +
{{col|3|brown }}B{{/col}}
 +
{{col|3|red  }}C{{/col}}
 +
{{/row}}
 +
{{row}}
 +
{{col|2|aqua  }}D{{/col}}
 +
{{col|2|green }}A{{/col}}
 +
{{col|2|violet}}B{{/col}}
 +
{{/row}}
 +
</pre>
 +
 
 +
Risultato:
 +
{{row}}
 +
{{col|6|violet}}A{{/col}}
 +
{{/row}}
 +
{{row}}
 +
{{col|3|brown }}B{{/col}}
 +
{{col|3|red  }}C{{/col}}
 +
{{/row}}
 +
{{row}}
 +
{{col|2|aqua  }}D{{/col}}
 +
{{col|2|green }}A{{/col}}
 +
{{col|2|violet}}B{{/col}}
 
{{/row}}
 
{{/row}}
  
=== Utilizzo con colori ===
+
=== Non documentati ===
  
Uso avanzato specificando la dimensione (espressa con un valore da 1 fino a 12) di ogni colonna e un colore:
+
Esempio di utilizzo base nel wikitesto:
  
 
<pre>
 
<pre>
 
{{row}}
 
{{row}}
{{col|12|yellow}}Colonna larga 12{{/col}}
+
{{col|6|violet}}A{{/col}}
{{col|5 |pink }}Colonna larga 5{{/col}}
+
{{col|6|brown }}B{{/col}}
{{col|3 |red  }}Colonna larga 3{{/col}}
+
{{col|6|red  }}C{{/col}}
{{col|4 |green }}Colonna larga 4{{/col}}
+
{{col|6|aqua }}D{{/col}}
 +
{{col|6|green }}E{{/col}}
 +
{{col|1|violet}}F{{/col}}
 +
{{col|1|brown }}G{{/col}}
 +
{{col|1|red  }}H{{/col}}
 +
{{col|1|aqua  }}I{{/col}}
 +
{{col|1|green }}L{{/col}}
 
{{/row}}
 
{{/row}}
 
</pre>
 
</pre>
Riga 46: Riga 131:
  
 
{{row}}
 
{{row}}
{{col|12|yellow}}Colonna larga 12{{/col}}
+
{{col|6|violet}}A{{/col}}
{{col|5 |pink }}Colonna larga 5{{/col}}
+
{{col|6|brown }}B{{/col}}
{{col|3 |red  }}Colonna larga 3{{/col}}
+
{{col|6|red  }}C{{/col}}
{{col|4 |green }}Colonna larga 4{{/col}}
+
{{col|6|aqua }}D{{/col}}
 +
{{col|6|green }}E{{/col}}
 +
{{col|1|violet}}F{{/col}}
 +
{{col|1|brown }}G{{/col}}
 +
{{col|1|red  }}H{{/col}}
 +
{{col|1|aqua  }}I{{/col}}
 +
{{col|1|green }}L{{/col}}
 
{{/row}}
 
{{/row}}
  
 
</noinclude>
 
</noinclude>

Versione delle 19:43, 17 mar 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

Ogni contenuto può essere disposto in una colonna {{col}} esprimendo una dimensione da 1 a 6.

Una colonna funziona soltanto in una riga {{row}} ... {{/row}}.

Esempi

Esempio base a due colonne

Esempio di utilizzo base nel wikitesto:

{{row}}
{{col|3|violet}}A{{/col}}
{{col|3|violet}}B{{/col}}
{{/row}}

Risultato:

ATemplate:Col/col
BTemplate:Col/col

Template:Col/row

Esempio base multi-colonna

Esempio di utilizzo base nel wikitesto:

{{row}}
{{col|1|violet}}A{{/col}}
{{col|1|brown }}B{{/col}}
{{col|1|red   }}C{{/col}}
{{col|1|aqua  }}D{{/col}}
{{col|1|green }}E{{/col}}
{{/row}}

Risultato:

ATemplate:Col/col
BTemplate:Col/col
CTemplate:Col/col
DTemplate:Col/col
ETemplate:Col/col

Template:Col/row

Altro esempio base

Esempio di utilizzo base nel wikitesto:

{{row}}
{{col|2|violet}}A{{/col}}
{{col|1|brown }}B{{/col}}
{{col|1|red   }}C{{/col}}
{{col|2|aqua  }}D{{/col}}
{{/row}}

Risultato:

ATemplate:Col/col
BTemplate:Col/col
CTemplate:Col/col
DTemplate:Col/col

Template:Col/row

Utilizzo multi-riga

Esempio di utilizzo base nel wikitesto:

{{row}}
{{col|6|violet}}A{{/col}}
{{/row}}
{{row}}
{{col|3|brown }}B{{/col}}
{{col|3|red   }}C{{/col}}
{{/row}}
{{row}}
{{col|2|aqua  }}D{{/col}}
{{col|2|green }}A{{/col}}
{{col|2|violet}}B{{/col}}
{{/row}}

Risultato:

ATemplate:Col/col

Template:Col/row

BTemplate:Col/col
CTemplate:Col/col

Template:Col/row

DTemplate:Col/col
ATemplate:Col/col
BTemplate:Col/col

Template:Col/row

Non documentati

Esempio di utilizzo base nel wikitesto:

{{row}}
{{col|6|violet}}A{{/col}}
{{col|6|brown }}B{{/col}}
{{col|6|red   }}C{{/col}}
{{col|6|aqua  }}D{{/col}}
{{col|6|green }}E{{/col}}
{{col|1|violet}}F{{/col}}
{{col|1|brown }}G{{/col}}
{{col|1|red   }}H{{/col}}
{{col|1|aqua  }}I{{/col}}
{{col|1|green }}L{{/col}}
{{/row}}

Risultato: