Difference between revisions of "Template:Columns/doc"

From blackwiki
Jump to navigation Jump to search
imported>Sardanaphalus
m (→‎Syntax: <!--between-->)
imported>Sardanaphalus
(update)
Line 1: Line 1:
 
{{Documentation subpage}}
 
{{Documentation subpage}}
 
<!-- EDIT TEMPLATE DOCUMENTATION AFTER THIS LINE -->
 
<!-- EDIT TEMPLATE DOCUMENTATION AFTER THIS LINE -->
 +
{{tl|Columns}} may be used to create up to ten columns across a page.
  
Template <!-- ?: in the vein of navbox templates such as {{tl|Navbox}} --> to aid the creation of (up to ten) columns across a page.
+
== Syntax ==
  
== Syntax ==
+
Values for ''col1'' and ''col2'', i.e. the contents of the first and second columns, are expected.
  
 
<pre>
 
<pre>
 
{{Columns
 
{{Columns
| background =     <!-- Background colo(u)r (default is none) -->
+
| background =   <!-- Background (default is none) -->
| style =           <!-- Use to add extra overall CSS styling -->
+
| style =       <!-- Use to add extra overall CSS styling -->
| colwidth =       <!-- Width of each column (default 15.0em) -->
+
| colwidth =     <!-- Width of each column (default 15.0em) -->
| gap<!--between--> =     <!-- Gap (gutter) between each column (default 1.25em) -->
+
| gapbetween =   <!-- Gap (gutter) between each column (default 1.25em) -->
| col1width =       <!-- Use to set a different width for col1 -->
+
| col1width =   <!-- Use to set a custom width for col1 -->
| col1 =           <!-- First column's contents (mandatory) -->
+
| col1 =         <!-- (REQUIRED) First column's contents -->
| col2width =       <!-- Use to set a different width for col2 (and so on) -->
+
| col2width =   <!-- Use to set a custom width for col2 (and so on) -->
| col2 =           <!-- Second column's contents (mandatory) -->
+
| col2 =         <!-- (REQUIRED) Second column's contents -->
 
| col3width =  
 
| col3width =  
 
| col3 =  
 
| col3 =  
Line 28: Line 29:
 
== Examples ==
 
== Examples ==
  
; Code
+
; {{bigger|Code}}
 
<pre>
 
<pre>
 
{{Columns
 
{{Columns
Line 36: Line 37:
 
</pre>
 
</pre>
  
; Result
+
; {{bigger|Result}}
 
{{Columns{{#ifeq:{{SUBPAGENAME}}|sandbox |/sandbox}}
 
{{Columns{{#ifeq:{{SUBPAGENAME}}|sandbox |/sandbox}}
 
| col1 = This is a simple application of the columns template, demonstrating the default column widths
 
| col1 = This is a simple application of the columns template, demonstrating the default column widths
Line 45: Line 46:
 
<hr/>
 
<hr/>
  
; Code
+
; {{bigger|Code}}
 
<pre>
 
<pre>
 
{{Columns |background=beige |colwidth=8.5em |gap<!--between-->=3.25em
 
{{Columns |background=beige |colwidth=8.5em |gap<!--between-->=3.25em
Line 79: Line 80:
 
</pre>
 
</pre>
  
; Result
+
; {{bigger|Result}}
 
{{Columns{{#ifeq:{{SUBPAGENAME}}|sandbox |/sandbox}}
 
{{Columns{{#ifeq:{{SUBPAGENAME}}|sandbox |/sandbox}}
 
|background=beige |colwidth=8.5em |gap<!--between-->=3.25em
 
|background=beige |colwidth=8.5em |gap<!--between-->=3.25em

Revision as of 18:40, 28 June 2014

{{Columns}} may be used to create up to ten columns across a page.

Syntax

Values for col1 and col2, i.e. the contents of the first and second columns, are expected.

{{Columns
| background =   <!-- Background (default is none) -->
| style =        <!-- Use to add extra overall CSS styling -->
| colwidth =     <!-- Width of each column (default 15.0em) -->
| gapbetween =   <!-- Gap (gutter) between each column (default 1.25em) -->
| col1width =    <!-- Use to set a custom width for col1 -->
| col1 =         <!-- (REQUIRED) First column's contents -->
| col2width =    <!-- Use to set a custom width for col2 (and so on) -->
| col2 =         <!-- (REQUIRED) Second column's contents -->
| col3width = 
| col3 = 
...
| col10width = 
| col10 = 
}}

The parameters  colstyle  and  col1style  to  col10style  may also be used to tailor all and/or individual columns' CSS styling.

Examples

Code
{{Columns
| col1 = This is a simple application of the columns template, demonstrating the default column widths
| col2 = and gaps between columns. See the next example for a more customized use of the template.
}}
Result



Code
{{Columns |background=beige |colwidth=8.5em |gap<!--between-->=3.25em

| col1 =
* These
* columns
* are
* more
* complex

| col2 =
The<br/>background<br/>is<br/>beige

| col3 =
; Each : column
; is   : 8.5 [[Em (typography)|''em'']]
; wide

| col4 =
{{{!}}
!colspan="2"{{!}} and
{{!-}}
{{!}} the {{!!}} gap
{{!-}}
{{!}}colspan="2"{{!}} between
{{!-}}
{{!}} each {{!!}} is
{{!-}}
!colspan="2" align="center"{{!}} 3.25 ''em''
{{!}}}
}}
Result

See also

Column-generating template families

<section begin="table" />

Family Type
Handles wiki
 table code?Script error: No such module "If empty".
Responsive/
Mobile suited
Start template Column divider End template
"Col" Table Yes Yes {{Col-begin}},
{{Col-begin-fixed}} or
{{Col-begin-small}}
{{Col-break}} or
{{Col-2}} .. {{Col-5}}
{{Col-end}}
"Col-float" CSS float Yes Yes {{Col-float}} {{Col-float-break}} {{Col-float-end}}
"Columns" Table No Yes {{Columns}}
"Columns-list" CSS columns Yes Yes {{Columns-list}} (wrapper)
"Columns-start" CSS float Yes Yes {{Columns-start}} {{Column}} {{Columns-end}}
"Flex columns" CSS flexbox Yes Yes {{Flex columns}}
"Div col" CSS columns Yes Yes {{Div col}} {{Div col end}}

Script error: No such module "If empty". I.e., can the columns handle the wiki markup {| | || |- |} used to create tables? If not, templates that produce these elements (such as {{(!}}, {{!}}, {{!!}}, {{!-}}, {{!)}}) or HTML tags (<table>...</table>, <tr>...</tr>, etc.) will need to be used instead.<section end="table" />