Difference between revisions of "Template:Div col/doc"

From blackwiki
Jump to navigation Jump to search
imported>Edokter
imported>Izno
(tstyles)
 
(153 intermediate revisions by 56 users not shown)
Line 1: Line 1:
 
{{Documentation subpage}}
 
{{Documentation subpage}}
{{ombox | type=notice | text = Columns are currently supported only by newer versions of [[Gecko (layout engine)|Gecko]]-based browsers (such as [[Mozilla Firefox]]) and [[WebKit]]-based browsers (such as [[Google Chrome]] and [[Safari (web browser)|Safari]]).  '''All versions of [[Internet Explorer]] through to version 9 and [[Opera (web browser)|Opera]] through to version 11 do not support columns.'''  See [[Template:Reflist#Browser support for columns|here]] for more information.}}
+
<!-----------------------------------------------------------------------------
 +
  PLEASE ADD CATEGORIES WHERE INDICATED AT THE BOTTOM OF THIS PAGE
 +
------------------------------------------------------------------------------>
 +
{{#ifeq:{{FULLPAGENAME}}|Template:Div col|{{High-use| 269676 }}|{{#ifeq:{{FULLPAGENAME}}|Template:Div col end|{{High-use| 209292 }}}}}}
 +
{{Ombox |type=notice |text=Columns are not supported by some older browsers, most notably Internet Explorer 9 and earlier and Opera 11.0 and earlier. See {{section link|Template:Reflist#Browser support for columns}} for more information.}}
 
{{CSS3 multiple column layout}}
 
{{CSS3 multiple column layout}}
<!-- PLEASE ADD CATEGORIES AND INTERWIKIS AT THE BOTTOM OF THIS PAGE. -->
+
{{Lua|Module:Check for unknown parameters}}
 +
{{Uses TemplateStyles|Template:Div col/styles.css}}
  
This template is used to make a list into columns, with the option of specifying a smaller font. It has the advantage over other column templates (i.e. {{tl|col-begin}}) that it automatically breaks each column to an equal space, so you do not manually have to find the "half way" point on two columns, for instance.
+
{{tl|Div col}} formats a list into columns that wrap properly and compatibly with portable computer devices, especially PAD operating systems and small screens.  
  
This template can create multiple columns in [[web browser]]s which support one of the following [[CSS]] properties:
+
==Purpose==
* ''column-count'' (for [[Cascading Style Sheets#CSS 3|CSS3]] compliant browsers; see [http://www.w3.org/TR/css3-multicol/ CSS3 module: Multi-column layout])
+
It automatically breaks the available screen space into equal parts, meaning, for instance, that it is not necessary to guess how many columns to use and then figure out the dividing point(s), e.g., the halfway point to divide the list into two columns, or the one-third and two-thirds points to divide the list into three columns.
* ''-moz-column-count'' (for [[Mozilla application framework|Mozilla]]/[[Gecko (layout engine)|Gecko]] based browsers such as [[Firefox]])
+
* The list content is either provided by the {{para|content}} parameter (which can be restrictive of what content is allowed; e.g., wiki markup such as the {{!}} character must somehow be escaped), or terminated with {{tl|div col end}}. The {{tl|columns-list}} wrapper uses the parameter method for providing content (including its limitations).
* ''-webkit-column-count'' (for [[WebKit]] based browsers such as [[Safari (web browser)|Safari]] and [[Google Chrome]])
+
* The template system (family) also offers parameter options to set a smaller (90%) font-size parameter ({{para|small|yes}}), place vertical lines parameter ("rules") between the columns ({{para|rules}}) and to add other custom styling ({{para|style}}).
  
=== Usage ===
+
{{tl|Div col}} can create multiple columns in [[web browser]]s which support the following [[CSS]] properties:
; cols    =: Specifies the number of columnsDefaults to 2 columns.
+
* ''column-width'' (for [[Cascading Style Sheets#CSS 3|CSS3]]-compliant browsers; see [http://www.w3.org/TR/css3-multicol/ CSS3 module: Multi-column layout])
; colwidth =: Specifies the width of columns, and determines dynamically the number of columns based on screen  width; more columns will be shown on wider displays. This overrides the <tt>cols=</tt> setting.
+
   
; small    =: Specifies small font size (90%) if set to <tt>yes</tt>.
+
By default, the template creates columns that are [[Em (typography)|30em]] wide.
; style    =: Specify any custom styling.
 
  
=== Examples ===
+
==This template's parameters==
<pre>{{Div col}}
+
===Descriptions===
 +
There are six parameters for this template:
 +
; {{para|colwidth}} : Specifies the minimum width of the columns so that the number of columns is automatically based on screen width (that is, more columns will be shown on wider displays). Can be specified in any [[CSS#Length units|CSS unit of measure]], for instance, the [[Em (typography)|em]] (about the width of the capital "M" of the displayed typeface), e.g., <code>colwidth=20em</code>. If no value is supplied, the template uses a default of 30em.
 +
; {{para|rules}} : Adds vertical lines ("rules") between the columns if set to <code>yes</code> or some CSS styling (e.g. <code>1px dashed blue;</code>).
 +
; {{para|gap}} : Specifies the space between the content of adjacent columns. Specified in any CSS unit, e.g, <code>gap=2em</code>. The default spacing (set by browser) is 1em.
 +
; {{para|style}} : [[Cascading Style Sheets|CSS styling]] to apply to the columns.
 +
; {{para|small|yes}} : sets font size to 90%.
 +
; {{para|content}} : content to apply to the columns.
 +
 
 +
===Example of "colwidth" parameter===
 +
; Example with column width of 10em
 +
<pre>
 +
{{div col|colwidth=10em}}
 
* a
 
* a
 
* b
 
* b
Line 27: Line 43:
 
* g
 
* g
 
* h
 
* h
{{Div col end}}</pre>
+
{{div col end}}
 +
</pre>
 +
; produces:
 +
{{Div col|colwidth=10em}}
 +
* a
 +
* b
 +
* c
 +
* d
 +
* e
 +
* f
 +
* g
 +
* h
 +
{{Div col end}}
  
;Produces:
+
===Example of "rules" parameter===
{{Div col}}
+
; Example:
 +
<pre>
 +
{{Div col|colwidth=10em|rules=yes}}
 +
* a
 +
* b
 +
* c
 +
* d
 +
* e
 +
* f
 +
* g
 +
* h
 +
{{Div col end}}
 +
</pre>
 +
; produces:
 +
{{Div col|colwidth=10em|rules=yes}}
 
* a
 
* a
 
* b
 
* b
Line 41: Line 83:
 
{{Div col end}}
 
{{Div col end}}
  
<pre>{{Div col|cols=3}}
+
===Example of "gap" parameter===
 +
; Example:
 +
<pre>
 +
{{Div col|colwidth=10em|rules=yes|gap=2em}}
 +
* a
 +
* b
 +
* c
 +
* d
 +
* e
 +
* f
 +
* g
 +
* h
 +
{{Div col end}}
 +
</pre>
 +
; produces:
 +
{{Div col|colwidth=10em|rules=yes|gap=2em}}
 
* a
 
* a
 
* b
 
* b
Line 50: Line 107:
 
* g
 
* g
 
* h
 
* h
{{Div col end}}</pre>
+
{{Div col end}}
  
;Produces:
+
===Example of "small" parameter===
{{Div col|cols=3}}
+
; Example showing how setting "small" parameter to "yes" produces smaller font size (90% of the size that would otherwise be displayed)
 +
<pre>
 +
{{Div col|small=yes}}
 +
* a
 +
* b
 +
* c
 +
* d
 +
* e
 +
* f
 +
* g
 +
* h
 +
{{Div col end}}
 +
</pre>
 +
; produces:
 +
{{Div col|small=yes}}
 
* a
 
* a
 
* b
 
* b
Line 64: Line 135:
 
{{Div col end}}
 
{{Div col end}}
  
<pre>{{Div col|colwidth=10em}}
+
===Example of "content" parameter===
 +
; Example showing how to provide "content" parameter without using {{tlx|Div col end}}
 +
<pre>
 +
{{Div col|colwidth=10em|content=
 
* a
 
* a
 
* b
 
* b
Line 73: Line 147:
 
* g
 
* g
 
* h
 
* h
{{Div col end}}</pre>
+
}}
 +
</pre>
 +
; produces:
 +
{{Div col|colwidth=10em|content=
 +
* a
 +
* b
 +
* c
 +
* d
 +
* e
 +
* f
 +
* g
 +
* h
 +
}}
  
;Produces:
+
===Usage with multiple parameters===
{{div col|colwidth=10em}}
+
Parameters can be used in any order.
 +
'''Example: '''
 +
<pre>
 +
{{Div col|colwidth=10em|rules=yes|gap=2em|small=yes}}
 +
* a
 +
* b
 +
* c
 +
* d
 +
* e
 +
* f
 +
* g
 +
* h
 +
{{Div col end}}
 +
</pre>
 +
or
 +
<pre>
 +
{{Div col|rules=yes|gap=2em|small=yes|colwidth=10em}}
 +
* a
 +
* b
 +
* c
 +
* d
 +
* e
 +
* f
 +
* g
 +
* h
 +
{{Div col end}}
 +
</pre>
 +
; produces:
 +
{{Div col|colwidth=10em|rules=yes|gap=2em|small=yes}}
 +
* a
 +
* b
 +
* c
 +
* d
 +
* e
 +
* f
 +
* g
 +
* h
 +
{{Div col end}}
 +
and exactly the same result below
 +
{{Div col|rules=yes|gap=2em|small=yes|colwidth=10em}}
 
* a
 
* a
 
* b
 
* b
Line 87: Line 212:
 
{{Div col end}}
 
{{Div col end}}
  
<pre>{{Div col|small=yes}}
+
; Example with column width of 20em
 +
<pre>
 +
{{div col|colwidth=20em}}
 
* a
 
* a
 
* b
 
* b
Line 96: Line 223:
 
* g
 
* g
 
* h
 
* h
{{Div col end}}</pre>
+
{{div col end}}
 +
</pre>
 +
; produces:
 +
{{Div col|colwidth=20em}}
 +
* a
 +
* b
 +
* c
 +
* d
 +
* e
 +
* f
 +
* g
 +
* h
 +
{{Div col end}}
  
;Produces:
+
; Example with column width of 30em
{{Div col|small=yes}}
+
<pre>
 +
{{div col|colwidth=30em}}
 +
* a
 +
* b
 +
* c
 +
* d
 +
* e
 +
* f
 +
* g
 +
* h
 +
{{div col end}}
 +
</pre>
 +
; produces:
 +
{{Div col|colwidth=30em}}
 
* a
 
* a
 
* b
 
* b
Line 110: Line 262:
 
{{Div col end}}
 
{{Div col end}}
  
=== See also ===
+
; Example of how this template behaves if no [[•|bullets]] (generated by asterisk mark) are used. 
* {{tl|multicol}}
+
<pre>
* {{tl|col-begin}}
+
{{div col|colwidth=10em}}
* {{tl|columns-list}}
+
a
 +
b
 +
c
 +
d
 +
e
 +
f
 +
g
 +
h
 +
{{div col end}}
 +
</pre>
 +
; produces:
 +
{{Div col|colwidth=10em}}
 +
a
 +
b
 +
c
 +
d
 +
e
 +
f
 +
g
 +
h
 +
{{Div col end}}
  
<includeonly>
+
==Tracking categories==
<!-- PLEASE ADD CATEGORIES AND INTERWIKIS BELOW THIS LINE, THANK YOU. -->
+
* {{category link with count|Pages using div col with unknown parameters}} (for erroneous use of parameter names not documented here)
[[Category:Table and column templates|{{PAGENAME}}]]
+
* {{category link with count|Pages using div col with small parameter}}
 +
 
 +
==TemplateData==
 +
{{TemplateData header}}
 +
{{#switch: {{BASEPAGENAME}}
 +
|Div col=<templatedata>
 +
{
 +
"description": "Breaks a list into columns. It automatically breaks each column to an equal space, so you do not manually have to find the half way point on two columns. The list is provided by |content= or closed with {{div col end}}.",
 +
"params": {
 +
"colwidth": {
 +
"label": "Column width",
 +
"description": "Specifies the width of columns, and determines dynamically the number of columns based on screen width; more columns will be shown on wider displays.",
 +
"type": "string",
 +
"example": "30em"
 +
},
 +
"rules": {
 +
"label": "Rules",
 +
"description": "Produces vertical rules between the columns if set to yes.",
 +
"type": "string",
 +
"example": "'yes' or '1px dashed blue'"
 +
},
 +
"gap": {
 +
"label": "Gap size",
 +
"description": "Specifies the space between the content of adjacent columns.",
 +
"type": "string",
 +
"example": "2em"
 +
},
 +
"style": {
 +
"label": "CSS style",
 +
"description": "Specifies any custom styling.",
 +
"type": "string"
 +
},
 +
"content": {
 +
"label": "Content",
 +
"description": "Specifies the content to divide into columns",
 +
"type": "string"
 +
},
 +
"small": {
 +
"label": "Small font",
 +
"description": "Use a smaller font size (90%)",
 +
"example": "yes",
 +
"type": "string",
 +
"default": "no"
 +
}
 +
}
 +
}
 +
</templatedata>
 +
|Div col end=<templatedata>
 +
{
 +
    "description": "Ends a multi-column list started by {{div col}}. It takes no parameters.",
 +
    "params": {
 +
    }
 +
}
 +
</templatedata>
 +
}}
  
{{#switch:{{PAGENAME}}
+
==Redirects==
|Div col = [[ca:Plantilla:Div col]][[es:Plantilla:Div col]][[gl:Modelo:Div col]][[hr:Predložak:Div col]][[id:Templat:Div col]][[it:Template:Div col]][[ja:Template:Div col]][[pt:Predefinição:Div col]][[sv:Mall:Kolumner]][[uk:Шаблон:Div col]][[vi:Tiêu bản:Div col]][[zh:Template:Div col]]
+
{{#ifeq:{{ROOTPAGENAME}}|Div col|
|Div col end = [[gl:Modelo:Fin div col]][[hr:Predložak:Div col end]][[it:Template:Div col end]][[ja:Template:Div col end]][[pt:Predefinição:Div col fim]][[sv:Mall:Kolumner-slut]][[uk:Шаблон:Div col end]][[vi:Tiêu bản:Div col end]][[zh:Template:Div col end]]
+
* {{Tlx|Col div}}
 +
* {{Tlx|Colbegin}}  (but '''not''' {{Tlx|Col begin}} or {{Tlx|Col-begin}})
 +
* {{Tlx|Cols}}
 +
* {{Tlx|Div col start}}
 +
* {{Tlx|Div col begin}}
 +
* {{Tlx|Div-col}}
 +
* {{Tlx|Palmares start}}
 +
}}
 +
{{#ifeq:{{ROOTPAGENAME}}|Div col end|
 +
*{{Tlx|Col div end}}
 +
*{{Tlx|Colend}} (but '''not''' {{Tlx|Col end}})
 +
*{{Tlx|Div end}}
 +
*{{Tlx|Divcol-end}}
 +
*{{Tlx|Divcolend}}
 +
*{{Tlx|Divend}}
 +
*{{Tlx|End div col}}
 +
*{{Tlx|EndDivCol}}
 
}}
 
}}
</includeonly>
+
 
 +
==See also==
 +
{{Column-generating template families}}
 +
 
 +
<includeonly>{{Sandbox other|
 +
| <!-- CATEGORIES BELOW THIS LINE, PLEASE: -->
 +
[[Category:Multi-column templates]]
 +
[[Category:Templates that add a tracking category]]
 +
<!--?:-->{{#switch:{{PAGENAME}} |Div col= |Div col end=}}
 +
}}</includeonly>

Latest revision as of 20:50, 16 December 2020

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)

Script error: No such module "Uses TemplateStyles".

{{Div col}} formats a list into columns that wrap properly and compatibly with portable computer devices, especially PAD operating systems and small screens.

Purpose

It automatically breaks the available screen space into equal parts, meaning, for instance, that it is not necessary to guess how many columns to use and then figure out the dividing point(s), e.g., the halfway point to divide the list into two columns, or the one-third and two-thirds points to divide the list into three columns.

  • The list content is either provided by the |content= parameter (which can be restrictive of what content is allowed; e.g., wiki markup such as the | character must somehow be escaped), or terminated with {{div col end}}. The {{columns-list}} wrapper uses the parameter method for providing content (including its limitations).
  • The template system (family) also offers parameter options to set a smaller (90%) font-size parameter (|small=yes), place vertical lines parameter ("rules") between the columns (|rules=) and to add other custom styling (|style=).

{{Div col}} can create multiple columns in web browsers which support the following CSS properties:

By default, the template creates columns that are 30em wide.

This template's parameters

Descriptions

There are six parameters for this template:

|colwidth= 
Specifies the minimum width of the columns so that the number of columns is automatically based on screen width (that is, more columns will be shown on wider displays). Can be specified in any CSS unit of measure, for instance, the em (about the width of the capital "M" of the displayed typeface), e.g., colwidth=20em. If no value is supplied, the template uses a default of 30em.
|rules= 
Adds vertical lines ("rules") between the columns if set to yes or some CSS styling (e.g. 1px dashed blue;).
|gap= 
Specifies the space between the content of adjacent columns. Specified in any CSS unit, e.g, gap=2em. The default spacing (set by browser) is 1em.
|style= 
CSS styling to apply to the columns.
|small=yes 
sets font size to 90%.
|content= 
content to apply to the columns.

Example of "colwidth" parameter

Example with column width of 10em
{{div col|colwidth=10em}}
* a
* b
* c
* d
* e
* f
* g
* h
{{div col end}}
produces
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h

Example of "rules" parameter

Example
{{Div col|colwidth=10em|rules=yes}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}
produces
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h

Example of "gap" parameter

Example
{{Div col|colwidth=10em|rules=yes|gap=2em}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}
produces
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h

Example of "small" parameter

Example showing how setting "small" parameter to "yes" produces smaller font size (90% of the size that would otherwise be displayed)
{{Div col|small=yes}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}
produces
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h

Example of "content" parameter

Example showing how to provide "content" parameter without using {{Div col end}}
{{Div col|colwidth=10em|content=
* a
* b
* c
* d
* e
* f
* g
* h
}}
produces
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h

Usage with multiple parameters

Parameters can be used in any order. Example:

{{Div col|colwidth=10em|rules=yes|gap=2em|small=yes}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}

or

{{Div col|rules=yes|gap=2em|small=yes|colwidth=10em}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}
produces
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h

and exactly the same result below

  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h
Example with column width of 20em
{{div col|colwidth=20em}}
* a
* b
* c
* d
* e
* f
* g
* h
{{div col end}}
produces
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h
Example with column width of 30em
{{div col|colwidth=30em}}
* a
* b
* c
* d
* e
* f
* g
* h
{{div col end}}
produces
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h
Example of how this template behaves if no bullets (generated by asterisk mark) are used.
{{div col|colwidth=10em}}
a
b
c
d
e
f
g
h
{{div col end}}
produces

a b c d e f g h

Tracking categories

TemplateData

This is the TemplateData documentation for this template used by VisualEditor and other tools; see the monthly parameter usage report for this template.

TemplateData for Div col

Breaks a list into columns. It automatically breaks each column to an equal space, so you do not manually have to find the half way point on two columns. The list is provided by |content= or closed with {{div col end}}.

Template parameters

ParameterDescriptionTypeStatus
Column widthcolwidth

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

Example
30em
Stringoptional
Rulesrules

Produces vertical rules between the columns if set to yes.

Example
'yes' or '1px dashed blue'
Stringoptional
Gap sizegap

Specifies the space between the content of adjacent columns.

Example
2em
Stringoptional
CSS stylestyle

Specifies any custom styling.

Stringoptional
Contentcontent

Specifies the content to divide into columns

Stringoptional
Small fontsmall

Use a smaller font size (90%)

Default
no
Example
yes
Stringoptional

Redirects


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