Template:Hlist/doc: Difference between revisions

Latest revision as of 20:52, 14 October 2022

Template:Strong for Template:Terminate sentence
It may contain usage information, categories and other content that is not part of the original template page.

This template is used in MediaWiki:Citethispage-content, and on approximately 215,000 pages.
Changes to it can cause immediate changes to the Wikipedia user interface.
To avoid major disruption and server load, any changes should be tested in the template's /sandbox or /testcases subpages, or in your own user subpage. The tested changes can be added to this page in a single edit. Please discuss changes on the talk page before implementing them.

File:Lua-Logo.svg

This template uses Lua:

Module:List

Redirects

This template creates horizontal lists. Each item in the list may be individually styled with CSS.

Usage

Basic usage

{{hlist|first item|second item|third item|...}}

All parameters

{{hlist
|first item|second item|third item|...
|class       = class for div tag
|style       = style for div tag
|list_style  = style for ul tag
|item_style  = style for all li tags
|item1_style = style for first li tag
|item2_style = style for second li tag
|...
|indent      = the number of tabs to indent
}}

Parameters

Positional parameters (1, 2, 3...): these are the list items. If no list items are present, the module will output nothing.
class: a custom class for the <div>...</div> tags surrounding the list. Set to inline when using {{hlist}} inside text.
style: a custom CSS style for the <div>...</div> tags surrounding the list, e.g. font-size: 90%;.
list_style: a custom CSS style for the <ul>...</ul> tags around the list. The format is the same as for the |style= parameter.
item_style: a custom CSS style for all of the list items (the <li>...</li> tags). The format is the same as for the |style= parameter.
item1_style, item2_style, item3_style...: custom CSS styles for each of the list items. The format is the same as for the |style= parameter.
indent: the number of tabs to indent the list. Default value is 0.

Examples

Markup	Renders as
{{hlist\|entry1\|entry2\|entry3\|entry4\|entry5\|entry6\|entry7\|entry8\|entry9}}	entry1 entry2 entry3 entry4 entry5 entry6 entry7 entry8 entry9
Giant planets ({{hlist\|[[Jupiter\|J]]\|[[Saturn\|S]]\|[[Uranus\|U]]\|[[Neptune\|N]]}}).	Giant planets ( J S U N ).
Giant planets ({{hlist\|class=inline\|[[Jupiter\|J]]\|[[Saturn\|S]]\|[[Uranus\|U]]\|[[Neptune\|N]]}}).	Giant planets ( J S U N ).
{{hlist\|Winner\|Runner-up\|Third place\|indent=2}}	Winner Runner-up Third place
{{hlist\|Winner\|Runner-up\|Third place\|item_style=color:blue;}}	Winner Runner-up Third place
{{hlist\|Winner\|Runner-up\|Third place\|item1_style=background-color:yellow;\|item2_style=background-color:silver;}}	Winner Runner-up Third place

Avoiding Linter errors

{{hlist}} will produce Linter errors if placed inside a template that uses <span>...</span> tags, such as {{small}}, {{larger}}, etc. To avoid this, use the substitutions from the table below:

Incorrect markup	Correct markup
`{{small\|{{hlist\|...}}}}`	`{{hlist\|...\|style=font-size:85%}}`
`{{resize\|{{hlist\|...}}}}`	`{{hlist\|...\|style=font-size:90%}}`
`{{midsize\|{{hlist\|...}}}}`	`{{hlist\|...\|style=font-size:92%}}`
`{{larger\|{{hlist\|...}}}}`	`{{hlist\|...\|style=font-size:110%}}`
`{{big\|{{hlist\|...}}}}`	`{{hlist\|...\|style=font-size:120%}}`
`{{large\|{{hlist\|...}}}}`	`{{hlist\|...\|style=font-size:large}}`
`{{huge\|{{hlist\|...}}}}`	`{{hlist\|...\|style=font-size:180%}}`
`{{resize\|x%\|{{hlist\|...}}}}`	`{{hlist\|...\|style=font-size:x%}}`
`{{font\|size=x%\|{{hlist\|...}}}}`	`{{hlist\|...\|style=font-size:x%}}`
`{{nowrap\|{{hlist\|...}}}}`	`{{hlist\|...\|style=white-space: nowrap}}`

@@ Line 1: / Line 1: @@
 {{Documentation subpage}}
-{{lua|Module:List}}
 <!-- Categories go at the bottom of this page and interwikis go in Wikidata. -->
+{{used in system|in [[MediaWiki:Citethispage-content]]}}
+{{Lua|Module:List}}
+{{tlr|clear=right|Horizontal list|dotlist|hlist1}}
-This template creates [[WP:HLIST|horizontal lists]]. Each item in the list may have [[CSS]] styles added to it individually, by appending a numbered parameter.
+This template creates [[WP:HLIST|horizontal lists]]. Each item in the list may be individually styled with [[CSS]].
+__TOC__
+{{-}}
 == Usage ==
 '''Basic usage'''
-{{pre2|<nowiki>{{</nowiki>hlist<nowiki>|</nowiki>''first item''<nowiki>|</nowiki>''second item''<nowiki>|</nowiki>''third item''<nowiki>|</nowiki>...<nowiki>}}</nowiki>}}
+{{pre|<nowiki>{{</nowiki>hlist<nowiki>|</nowiki>''first item''<nowiki>|</nowiki>''second item''<nowiki>|</nowiki>''third item''<nowiki>|</nowiki>...<nowiki>}}</nowiki>}}
 '''All parameters'''
-{{pre2|
+{{pre|
 <nowiki>{{</nowiki>hlist
 <nowiki>|</nowiki>''first item''<nowiki>|</nowiki>''second item''<nowiki>|</nowiki>''third item''<nowiki>|</nowiki>...
-<nowiki>|class     = </nowiki>''class''
+<nowiki>|class       = </nowiki>''class for div tag''
-<nowiki>|style     = </nowiki>''style''
+<nowiki>|style       = </nowiki>''style for div tag''
 <nowiki>|list_style  = </nowiki>''style for ul tag''
 <nowiki>|item_style  = </nowiki>''style for all li tags''
-<nowiki>|item1_style = </nowiki>''style for first li tag''<nowiki> |item2_style = </nowiki>''style for second li tag''<nowiki> |</nowiki>...
+<nowiki>|item1_style = </nowiki>''style for first li tag''
-<nowiki>|indent    = </nowiki>''indent for the list''
+<nowiki>|item2_style = </nowiki>''style for second li tag''
+<nowiki>|</nowiki>...
+<nowiki>|indent      = </nowiki>''the number of tabs to indent''
 <nowiki>}}</nowiki>
 }}
 == Parameters ==
-* Positional parameters (<code>1</code>, <code>2</code>, <code>3</code>...) - these are the list items. If no list items are present, the module will output nothing.
+* Positional parameters (<code>1</code>, <code>2</code>, <code>3</code>...): these are the list items. If no list items are present, the module will output nothing.
-* <code>class</code> - a custom class for the {{tag|div}} tags surrounding the list, e.g. <code>plainlinks</code>.
+* <code>class</code>: a custom class for the {{tag|div}} tags surrounding the list. Set to <code>inline</code> when using {{tlf|hlist}} inside text.
-* <code>style</code> - a custom css style for the {{tag|div}} tags surrounding the list, e.g. <code>font-size: 90%;</code>.
+* <code>style</code>: a custom CSS style for the {{tag|div}} tags surrounding the list, e.g. <code>font-size: 90%;</code>.
-* <code>list_style</code> - a custom css style for the {{tag|ul}} tags around the list. The format is the same as for the {{para|style}} parameter.
+* <code>list_style</code>: a custom CSS style for the {{tag|ul}} tags around the list. The format is the same as for the {{para|style}} parameter.
-* <code>item_style</code> - a custom css style for all of the list items (the {{tag|li}} tags). The format is the same as for the {{para|style}} parameter.
+* <code>item_style</code>: a custom CSS style for all of the list items (the {{tag|li}} tags). The format is the same as for the {{para|style}} parameter.
-* <code>item1_style</code>, <code>item2_style</code>, <code>item3_style</code>... - custom css styles for each of the list items. The format is the same as for the {{para|style}} parameter.
+* <code>item1_style</code>, <code>item2_style</code>, <code>item3_style</code>...: custom CSS styles for each of the list items. The format is the same as for the {{para|style}} parameter.
-* <code>indent</code> - this parameter indents the list. The value must be a number, e.g. <code>2</code>. The indent is calculated in [[Em (typography)|em]], and is 1.6 times the value specified. If no indent is specified, the default is zero.
+* <code>indent</code>: the number of tabs to indent the list. Default value is 0.
 == Examples ==
@@ Line 37: / Line 43: @@
 | <nowiki>{{hlist|entry1|entry2|entry3|entry4|entry5|entry6|entry7|entry8|entry9}}</nowiki>
 | {{hlist|entry1|entry2|entry3|entry4|entry5|entry6|entry7|entry8|entry9}}
+| <nowiki>Giant planets ({{hlist|[[Jupiter|J]]|[[Saturn|S]]|[[Uranus|U]]|[[Neptune|N]]}}).</nowiki>
+| Giant planets ({{hlist|[[Jupiter|J]]|[[Saturn|S]]|[[Uranus|U]]|[[Neptune|N]]}}).
+| <nowiki>Giant planets ({{hlist|class=inline|[[Jupiter|J]]|[[Saturn|S]]|[[Uranus|U]]|[[Neptune|N]]}}).</nowiki>
+| Giant planets ({{hlist|class=inline|[[Jupiter|J]]|[[Saturn|S]]|[[Uranus|U]]|[[Neptune|N]]}}).
+| <nowiki>{{hlist|Winner|Runner-up|Third place|indent=2}}</nowiki>
+| {{hlist|Winner|Runner-up|Third place|indent=2}}
 | <nowiki>{{hlist|Winner|Runner-up|Third place|item_style=color:blue;}}</nowiki>
 | {{hlist|Winner|Runner-up|Third place|item_style=color:blue;}}
-| <nowiki>{{hlist|Winner|Runner-up|Third place|item_style=color:blue;|indent=2}}</nowiki>
-| {{hlist|Winner|Runner-up|Third place|item_style=color:blue;|indent=2}}
 | <nowiki>{{hlist|Winner|Runner-up|Third place|item1_style=background-color:yellow;|item2_style=background-color:silver;}}</nowiki>
@@ Line 48: / Line 60: @@
 }}
-== See also ==
+== Avoiding Linter errors ==
-* {{tl|flatlist}}
-* {{tl|plainlist}} and {{tl|unbulleted list}}
+{{tlf|hlist}} will produce [[Wikipedia:Linter|Linter]] [[Special:LintErrors/misc-tidy-replacement-issues|errors]] if placed inside a template that uses {{tag|span}} tags, such as {{tl|small}}, {{tl|larger}}, etc. To avoid this, use the substitutions from the table below:
-* {{tl|ordered list}} and {{tl|unordered list}}
-* {{tl|nowrap}}
+{| {{table}}
-* {{tl|pagelist}}
+! Incorrect markup !! Correct markup
+|-
+| <code><nowiki>{{small|{{hlist|...}}}}</nowiki></code> || <code><nowiki>{{hlist|...|style=font-size:85%}}</nowiki></code>
+|-
+| <code><nowiki>{{resize|{{hlist|...}}}}</nowiki></code> || <code><nowiki>{{hlist|...|style=font-size:90%}}</nowiki></code>
+|-
+| <code><nowiki>{{midsize|{{hlist|...}}}}</nowiki></code> || <code><nowiki>{{hlist|...|style=font-size:92%}}</nowiki></code>
+|-
+| <code><nowiki>{{larger|{{hlist|...}}}}</nowiki></code> || <code><nowiki>{{hlist|...|style=font-size:110%}}</nowiki></code>
+|-
+| <code><nowiki>{{big|{{hlist|...}}}}</nowiki></code> || <code><nowiki>{{hlist|...|style=font-size:120%}}</nowiki></code>
+|-
+| <code><nowiki>{{large|{{hlist|...}}}}</nowiki></code> || <code><nowiki>{{hlist|...|style=font-size:large}}</nowiki></code>
+|-
+| <code><nowiki>{{huge|{{hlist|...}}}}</nowiki></code> || <code><nowiki>{{hlist|...|style=font-size:180%}}</nowiki></code>
+|-
+| <code><nowiki>{{resize|x%|{{hlist|...}}}}</nowiki></code> || <code><nowiki>{{hlist|...|style=font-size:x%}}</nowiki></code>
+|-
+| <code><nowiki>{{font|size=x%|{{hlist|...}}}}</nowiki></code> || <code><nowiki>{{hlist|...|style=font-size:x%}}</nowiki></code>
+|-
+| <code><nowiki>{{nowrap|{{hlist|...}}}}</nowiki></code> || <code><nowiki>{{hlist|...|style=white-space: nowrap}}</nowiki></code>
+|}
-<includeonly>{{#ifeq:{{SUBPAGENAME}}|sandbox||
+{{navbox lists}}
+<includeonly>{{Sandbox other||
 <!-- Categories go here, and interwikis go in Wikidata -->
-[[Category:Wikipedia list formatting templates]]
+[[Category:List formatting and function templates]]
 }}</includeonly>

Incorrect markup	Correct markup
`{{small\|{{hlist\|...}}}}`	`{{hlist\|...\|style=font-size:85%}}`
`{{resize\|{{hlist\|...}}}}`	`{{hlist\|...\|style=font-size:90%}}`
`{{midsize\|{{hlist\|...}}}}`	`{{hlist\|...\|style=font-size:92%}}`
`{{larger\|{{hlist\|...}}}}`	`{{hlist\|...\|style=font-size:110%}}`
`{{big\|{{hlist\|...}}}}`	`{{hlist\|...\|style=font-size:120%}}`
`{{large\|{{hlist\|...}}}}`	`{{hlist\|...\|style=font-size:large}}`
`{{huge\|{{hlist\|...}}}}`	`{{hlist\|...\|style=font-size:180%}}`
`{{resize\|x%\|{{hlist\|...}}}}`	`{{hlist\|...\|style=font-size:x%}}`
`{{font\|size=x%\|{{hlist\|...}}}}`	`{{hlist\|...\|style=font-size:x%}}`
`{{nowrap\|{{hlist\|...}}}}`	`{{hlist\|...\|style=white-space: nowrap}}`