Difference between revisions of "Template:Columns-list/doc"
imported>Jerryobject m (Small WP:EoS WP:COPYEDIT. WP:LINK: fix-cut WP:NOPIPE.) |
imported>Matthiaspaul (Removed misleading documentation regarding deprecated cols= fixed column parameter and too narrow values for colwidths) |
||
| Line 9: | Line 9: | ||
== Use == | == Use == | ||
| + | The usage of fixed columns is '''deprecated''' and should be removed or replaced by the usage of colwidth (further below): | ||
| + | <s> | ||
<nowiki>{{</nowiki>columns-list|''number of columns''| | <nowiki>{{</nowiki>columns-list|''number of columns''| | ||
''Text (usually a list)'' | ''Text (usually a list)'' | ||
<nowiki>}}</nowiki> | <nowiki>}}</nowiki> | ||
| + | </s> | ||
| − | + | The width of each column may be specified using | |
<nowiki>{{</nowiki>columns-list|colwidth=''width''| | <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 | + | 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. |
This template uses [[CSS]]3 multiple column layout and is not supported by all [[WWW|Web]] [[Web browser|browsers]]. | This template uses [[CSS]]3 multiple column layout and is not supported by all [[WWW|Web]] [[Web browser|browsers]]. | ||
| Line 27: | Line 30: | ||
Here is an example: | Here is an example: | ||
| − | <source lang=text>{{columns-list| | + | <source lang=text>{{columns-list|colwidth=35em| |
* [[George Washington]] | * [[George Washington]] | ||
* [[John Adams]] | * [[John Adams]] | ||
| Line 37: | Line 40: | ||
which would render as: | which would render as: | ||
{{clear}}<!-- just in case {{CSS3 multiple column layout}} pokes down this far --> | {{clear}}<!-- just in case {{CSS3 multiple column layout}} pokes down this far --> | ||
| − | + | {{columns-list|colwidth=35em| | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | {{columns-list|colwidth= | ||
* [[George Washington]] | * [[George Washington]] | ||
* [[John Adams]] | * [[John Adams]] | ||
| Line 67: | Line 50: | ||
[[CSS]] styles can also be added after the number of columns. For example: | [[CSS]] styles can also be added after the number of columns. For example: | ||
| − | <source lang=text>{{columns-list| | + | <source lang=text>{{columns-list|colwidth=35em|style=width: 400px; font-style: italic;| |
* [[All About Lily Chou-Chou]] | * [[All About Lily Chou-Chou]] | ||
* [[April Story]] | * [[April Story]] | ||
| Line 82: | Line 65: | ||
which would render as: | which would render as: | ||
| − | {{columns-list| | + | {{columns-list|colwidth=35em|style=width: 400px; font-style: italic;| |
* [[All About Lily Chou-Chou]] | * [[All About Lily Chou-Chou]] | ||
* [[April Story]] | * [[April Story]] | ||
| Line 94: | Line 77: | ||
* [[Swallowtail (film)|Swallowtail]] | * [[Swallowtail (film)|Swallowtail]] | ||
}} | }} | ||
| − | |||
| − | |||
== Redirects == | == Redirects == | ||
Revision as of 16:59, 14 May 2017
| This is a documentation subpage for Template:Columns-list. It contains usage information, categories and other content that is not part of the original template page. |
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.
Contents
Use
The usage of fixed columns is deprecated and should be removed or replaced by the usage of colwidth (further below):
{{columns-list|number of columns|
Text (usually a list)
}}
The width of each column may be specified using
{{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.
This template uses CSS3 multiple column layout and is not supported by all Web browsers.
| 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 after the number of columns. For example:
{{columns-list|colwidth=35em|style=width: 400px; 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:
Redirects
- {{cmn}}
- {{collist}}
- {{col-list}}
- {{Columnslist}}
See also
Column-generating template families
| The templates listed here are not interchangeable. For example, using {{col-float}} with {{col-end}} instead of {{col-float-end}} would leave a HTML "div" (division) open, potentially harming any subsequent formatting. |
<section begin="table" />
| Family | Type | Handles wiki
table code? |
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}} |
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" />
References