Difference between revisions of "Template:Columns-list/doc"

From blackwiki
Jump to navigation Jump to search
imported>Tlustulimu
m (interwiki)
imported>WOSlinker
m (change source to syntaxhighlight)
 
(57 intermediate revisions by 31 users not shown)
Line 1: Line 1:
 
{{Documentation subpage}}
 
{{Documentation subpage}}
<!-- PLEASE ADD CATEGORIES AND INTERWIKIS AT THE BOTTOM OF THIS PAGE -->
+
<!-- PLEASE ADD CATEGORIES AT THE END OF THIS PAGE -->
 +
{{Hatnote|{{tl|Collist}} redirects here. You may be looking for {{tl|Collapsible list}}.}}
 +
{{Tsh|cmn|collist|col-list}}
 +
{{Lua|Module:Check for unknown parameters}}
  
This template is intended to be used in a list in the article itself, rather than in a navigation template like [[Template:Navbox]]. Based on [[Template:Reflist]], but different in that the text to be displayed is manually created rather than a list of references.
+
This template is for use in a list in the body of an article, rather than in a navigation template like [[Template:Navbox]]. Based on [[Template:Reflist]], but different in that the text to be displayed is manually created rather than a list of references.
  
=== Usage ===
+
== Use ==
 
+
The width of each column may be specified using {{para|colwidth}} and a value in ems.
  <nowiki>{{</nowiki>columns-list|''number of columns''|
+
  <nowiki>{{</nowiki>columns-list|colwidth=''width''|
  ''text (usually a list)''
+
  ''Text (usually a list)''
 
  <nowiki>}}</nowiki>
 
  <nowiki>}}</nowiki>
 +
Here, ''width'' specifies the width of the columns, and determines dynamically the number of columns based on screen width; more columns will be shown on wider displays.
  
If the number of columns is omitted, two columns will be used.
+
If {{para|colwidth}} is not specified, the default width of 30em will be used.  
  
This template uses CSS3 multiple column layout and is not supported by all browsers.
+
This template uses [[CSS]]3 multiple-column layout, which is not supported by all [[WWW|Web]] [[Web&nbsp;browser|browsers]].
  
 
{{CSS3 multiple column layout}}
 
{{CSS3 multiple column layout}}
  
==== Example ====
+
=== Examples ===
 
+
Here is an example:
An example would be
+
<syntaxhighlight lang=text>{{columns-list|colwidth=35em|
 
+
* [[George Washington]]
<nowiki>{{columns-list|2|
+
* [[John Adams]]
  * [[George Washington]]
+
* [[Thomas Jefferson]]
  * [[John Adams]]
+
* [[James Madison]]
  * [[Thomas Jefferson]]
+
* [[James Monroe]]
  * [[James Madison]]
+
}}</syntaxhighlight>
  * [[James Monroe]]
 
}}</nowiki>
 
 
 
which would render as
 
  
<!-- Substituted {{columns-list}} to prevent possible loop --><div {{#if: 2| style="-moz-column-count:2; -webkit-column-count:2; column-count:2 }};">
+
which would render as:
 +
{{clear}}<!-- just in case {{CSS3 multiple column layout}} pokes down this far -->
 +
{{columns-list|colwidth=35em|
 
* [[George Washington]]
 
* [[George Washington]]
 
* [[John Adams]]
 
* [[John Adams]]
Line 36: Line 38:
 
* [[James Madison]]
 
* [[James Madison]]
 
* [[James Monroe]]
 
* [[James Monroe]]
</div>
+
}}
  
 +
[[CSS]] styles can also be added with the {{para|style}} parameter. For example:
  
CSS styles can also be added after the number of columns. For example
+
<syntaxhighlight lang=text>{{columns-list|colwidth=15em|style=width: 600px; font-style: italic;|
  <nowiki>{{columns-list|2</nowiki>''';width:400px;font-style:italic'''<nowiki>|
+
* [[All About Lily Chou-Chou]]
  * [[New York, I Love You]]
+
* [[April Story]]
  * [[Hōtai Club]]
+
* [[Hana and Alice|Hana & Alice]]
  * [[The Kon Ichikawa Story]]
 
  * [[Rainbow Song]]
 
  * [[Hana and Alice|Hana & Alice]]
 
  * [[All About Lily Chou-Chou]]
 
  * [[April Story]]
 
  * [[Swallowtail Butterfly (film)|Swallowtail Butterfly]]
 
  * [[Picnic (1996 film)|Picnic]]
 
  * [[Fried Dragon Fish]]
 
}}</nowiki>
 
 
 
which would render as
 
 
 
<div {{#if: 2| style="-moz-column-count:2; -webkit-column-count:2; column-count:2; width:400px; font-style:italic }};">
 
* [[New York, I Love You]]
 
 
* [[Hōtai Club]]
 
* [[Hōtai Club]]
 
* [[The Kon Ichikawa Story]]
 
* [[The Kon Ichikawa Story]]
 +
* [[Love Letter (1995 film)|Love Letter]]
 +
* [[New York, I Love You]]
 +
* [[Picnic (1996 film)|Picnic]]
 
* [[Rainbow Song]]
 
* [[Rainbow Song]]
* [[Hana and Alice|Hana & Alice]]
+
* [[Swallowtail (film)|Swallowtail]]
 +
}}</syntaxhighlight>
 +
 
 +
which would render as:
 +
{{columns-list|colwidth=15em|style=width: 600px; font-style: italic;|
 
* [[All About Lily Chou-Chou]]
 
* [[All About Lily Chou-Chou]]
 
* [[April Story]]
 
* [[April Story]]
* [[Swallowtail Butterfly (film)|Swallowtail Butterfly]]
+
* [[Hana and Alice|Hana & Alice]]
 +
* [[Hōtai Club]]
 +
* [[The Kon Ichikawa Story]]
 +
* [[Love Letter (1995 film)|Love Letter]]
 +
* [[New York, I Love You]]
 
* [[Picnic (1996 film)|Picnic]]
 
* [[Picnic (1996 film)|Picnic]]
* [[Fried Dragon Fish]]
+
* [[Rainbow Song]]
</div>
+
* [[Swallowtail (film)|Swallowtail]]
 +
}}
  
=== Redirects ===
+
This template also works with numbered lists as its "text". For example:
* {{tl|cmn}} redirects here
 
  
=== Bugs ===
+
<syntaxhighlight lang=text>
The use of a raw link within the template will break the rendering:
+
{{columns-list|colwidth=35em|
 +
# [[George Washington]]
 +
# [[John Adams]]
 +
# [[Thomas Jefferson]]
 +
# [[James Madison]]
 +
# [[James Monroe]]
 +
}}
 +
</syntaxhighlight>
  
{{pre2|<nowiki>{{columns-list|2|
+
{{columns-list|colwidth=35em|
  * [[George Washington]]
+
# [[George Washington]]
  * [[John Adams]][http://www.example.org]
+
# [[John Adams]]
  * [[Thomas Jefferson]]
+
# [[Thomas Jefferson]]
  * [[James Madison]]
+
# [[James Madison]]
  * [[James Monroe]]
+
# [[James Monroe]]
}}</nowiki>}}
+
}}
  
Shows as:
+
The template, in fact, works with ''everything'' since all it does is wrap the text provided around a block to be divided into columns by CSS. Do not stop at wikitext lists &ndash; more advanced lists generated by [[Template:HTML lists|the HTML templates]] will work too!
  
{{columns-list|2|
+
==Error messages==
  * [[George Washington]]
+
Use of the no-longer-supported parameter {{para|cols}}, or use of the first unnamed parameter (aka {{para|1}}) along with {{para|2}} or a second unnamed parameter for the template's content, will generate a red error message. To fix this error, use {{para|colwidth}} instead of attempting to specify the number of columns.
  * [[John Adams]][http://www.example.org]
 
  * [[Thomas Jefferson]]
 
  * [[James Madison]]
 
  * [[James Monroe]]
 
}}
 
  
This can be resolved by converting to link to {{tag|ref|open}}
+
The presence of an equals sign within the template's content can also cause display problems and red error messages. To fix this problem, add {{para|1}} in front of the template's content.
  
=== See also ===
+
== Redirects ==
* {{tl|div col}}
+
* {{tl|cmn}}
* {{tl|columns}}
+
* {{tl|collist}}
* [[Template:Columns-list]]
+
* {{tl|col-list}}
* {{tl|Col-begin}} ({{tl|Col-start}}), {{tl|Col-begin-small}} {{lts/|Col-begin}}
+
* {{tl|Columnslist}}
** {{tl|Col-break}}
 
** {{tl|Col-2}} <small>({{tl|Col-1-of-2}}, {{tl|Col-2-of-2}})</small>
 
** {{tl|Col-3}} <small>({{tl|Col-1-of-3}}, {{tl|Col-2-of-3}}, {{tl|Col-3-of-3}})</small>
 
** {{tl|Col-4}} <small>({{tl|Col-1-of-4}}, {{tl|Col-2-of-4}}, {{tl|Col-3-of-4}}, {{tl|Col-4-of-4}})</small>
 
** {{tl|Col-5}} <small>({{tl|Col-1-of-5}}, {{tl|Col-2-of-5}}, {{tl|Col-3-of-5}}, {{tl|Col-4-of-5}}, {{tl|Col-5-of-5}})</small>
 
** {{tl|Col-break}}
 
* {{tl|Col-end}} ({{tl|End}})
 
* {{tl|Top}}, {{tl|Mid}}, {{tl|Bottom}}
 
* {{tl|Columns-start}}, {{tl|Column}}, {{tl|Columns-end}} {{lts/|Columns-start}}
 
* {{tl|Multicol}}, {{tl|Multicol-break}}, {{tl|Multicol-end}} {{lts/|Multicol}}
 
* {{tl|Div col}}, {{tl|Div col end}} {{lts/|Div col}}
 
  
=== References ===
+
== Tracking category ==
 +
* {{clc|Pages using columns-list with unknown parameters}} (for pages in article space only)
  
{{Reflist}}
+
== See also ==
 +
{{Column-generating template families}}
 +
{{HTML lists}}
 +
<!-- == References ==
 +
{{Reflist}} -->
  
<includeonly>
+
<includeonly>{{Sandbox other||
<!-- CATEGORIES AND INTERWIKIS HERE, THANKS -->
 
[[Category:Table and column templates]]
 
[[Category:Platform dependent templates]]
 
  
[[as:Template:Columns-list]]
+
<!-- Categories below this line, please; interwikis at Wikidata -->
[[ca:Plantilla:Llista de columnes]]
+
[[Category:Multi-column templates]]
[[eo:Ŝablono:Kolumnoj-listo]]
+
[[Category:List formatting and function templates]]
[[es:Plantilla:Lista de columnas]]
+
[[Category:Templates that add a tracking category]]
[[fa:الگو:فهرست ستونی]]
+
}}</includeonly>
[[ja:Template:Columns-list]]
 
[[ru:Шаблон:Columns-list]]
 
[[pl:Szablon:Kolumna-podział]]
 
[[pt:Predefinição:Colunas-lista]]
 
[[ro:Format:Columns-list]]
 
[[sl:Predloga:Columns-list]]
 
[[zh:Template:Columns-list]]
 
</includeonly>
 

Latest revision as of 12:56, 7 July 2020

This template is for use in a list in the body of an article, rather than in a navigation template like Template:Navbox. Based on Template:Reflist, but different in that the text to be displayed is manually created rather than a list of references.

Use

The width of each column may be specified using |colwidth= and a value in ems.

{{columns-list|colwidth=width|
Text (usually a list)
}}

Here, width specifies the width of the columns, and determines dynamically the number of columns based on screen width; more columns will be shown on wider displays.

If |colwidth= is not specified, the default width of 30em will be used.

This template uses CSS3 multiple-column layout, which is not supported by all Web browsers.

CSS3 multiple-column layout browser support
Property Internet
Explorer
Firefox Safari Chrome Opera
column-width
column-count
≥ 10
(2012)
≥ 1.5
(2005)
≥ 3
(2007)
≥ 1
(2008)
≥ 11.1
(2011)
columns ≥ 10
(2012)
≥ 9
(2011)
≥ 3
(2007)
≥ 1
(2008)
≥ 11.1
(2011)
break-before
break-after
break-inside
≥ 10
(2012)
≥ 65
(2019)
≥ 10
(2016)
≥ 65
(2016)
≥ 15
(2013)

Examples

Here is an example:

{{columns-list|colwidth=35em|
* [[George Washington]]
* [[John Adams]]
* [[Thomas Jefferson]]
* [[James Madison]]
* [[James Monroe]]
}}

which would render as:

CSS styles can also be added with the |style= parameter. For example:

{{columns-list|colwidth=15em|style=width: 600px; font-style: italic;|
* [[All About Lily Chou-Chou]]
* [[April Story]]
* [[Hana and Alice|Hana & Alice]]
* [[Hōtai Club]]
* [[The Kon Ichikawa Story]]
* [[Love Letter (1995 film)|Love Letter]]
* [[New York, I Love You]]
* [[Picnic (1996 film)|Picnic]]
* [[Rainbow Song]]
* [[Swallowtail (film)|Swallowtail]]
}}

which would render as:

This template also works with numbered lists as its "text". For example:

{{columns-list|colwidth=35em|
# [[George Washington]]
# [[John Adams]]
# [[Thomas Jefferson]]
# [[James Madison]]
# [[James Monroe]]
}}

The template, in fact, works with everything since all it does is wrap the text provided around a block to be divided into columns by CSS. Do not stop at wikitext lists – more advanced lists generated by the HTML templates will work too!

Error messages

Use of the no-longer-supported parameter |cols=, or use of the first unnamed parameter (aka |1=) along with |2= or a second unnamed parameter for the template's content, will generate a red error message. To fix this error, use |colwidth= instead of attempting to specify the number of columns.

The presence of an equals sign within the template's content can also cause display problems and red error messages. To fix this problem, add |1= in front of the template's content.

Redirects

Tracking category

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" />