Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:Hlist/doc: Difference between revisions

Template page
No edit summary
No edit summary
 
(11 intermediate revisions by the same user not shown)
Line 2: Line 2:
{{Documentation subpage}}
{{Documentation subpage}}
<!-- Categories go at the bottom of this page and interwikis go in Wikidata. -->
<!-- Categories go at the bottom of this page and interwikis go in Wikidata. -->
{{used in system|in [[MediaWiki:Citethispage-content]]}}
{{cascade-protected template}}
{{cascade-protected template}}
{{Lua|Module:List}}
{{Lua|Module:List}}
{{Uses TemplateStyles}}
{{tlr|clear=right|Horizontal list|dotlist}}


This template creates [[WP:HLIST|horizontal lists]]. Each item in the list may be individually styled with [[CSS]].
This template creates horizontal lists. Each item in the list may be individually styled with CSS.


Lists output by {{tl|Flatlist}} and {{tl|Hlist}} are semantically and visually identical, and differ only in the wiki-markup used to create the lists.
Lists output by {{tl|Flatlist}} and {{tl|Hlist}} are semantically and visually identical, and differ only in the wiki-markup used to create the lists.


__TOC__
__TOC__
{{-}}
== Usage ==
== Usage ==
'''Basic usage'''
'''Basic usage'''


{{pre|<nowiki>{{</nowiki>hlist<nowiki>|</nowiki>''first item''<nowiki>|</nowiki>''second item''<nowiki>|</nowiki>''third item''<nowiki>|</nowiki>...<nowiki>}}</nowiki>}}
 


'''All parameters'''
'''All parameters'''


{{pre|
 
<nowiki>{{</nowiki>hlist
<nowiki>|</nowiki>''first item''<nowiki>|</nowiki>''second item''<nowiki>|</nowiki>''third item''<nowiki>|</nowiki>...
<nowiki>|class      = </nowiki>''class for div tag''
<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>|indent      = </nowiki>''the number of tabs to indent''
<nowiki>}}</nowiki>
}}


'''Example'''
'''Example'''
Line 51: Line 35:
* <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>: the number of tabs to indent the list. Default value is 0.
* <code>indent</code>: the number of tabs to indent the list. Default value is 0.
== Examples ==
{{markup
| <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|item1_style=background-color:yellow;|item2_style=background-color:silver;}}</nowiki>
| {{hlist|Winner|Runner-up|Third place|item1_style=background-color:yellow;|item2_style=background-color:silver;}}
}}


== Avoiding Linter errors ==
== Avoiding Linter errors ==


{{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:
{{tlf|hlist}} will produce Linter errors if placed inside a template that uses {{tag|span}} tags, such as {{tl|small}}, , etc. To avoid this, use the substitutions from the table below:


{| {{table}}
{| {{table}}
! {{no|}} {{cross}} Incorrect markup !! {{yes|}} {{tick}} Correct markup
!   Incorrect markup !! Correct markup
|-
|-
| <code><nowiki>{{small|{{hlist|...}}}}</nowiki></code> || <code><nowiki>{{hlist|...|style=font-size:85%}}</nowiki></code>
| <code><nowiki>{{small|{{hlist|...}}}}</nowiki></code> || <code><nowiki>{{hlist|...|style=font-size:85%}}</nowiki></code>
Line 86: Line 49:
| <code><nowiki>{{midsize|{{hlist|...}}}}</nowiki></code> || <code><nowiki>{{hlist|...|style=font-size:92%}}</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:120%}}</nowiki></code>
| <code><nowiki></nowiki></code> || <code><nowiki>{{hlist|...|style=font-size:120%}}</nowiki></code>
|-
|-
| <code><nowiki>{{big|{{hlist|...}}}}</nowiki></code> || <code><nowiki>{{hlist|...|style=font-size:120%}}</nowiki></code>
| <code><nowiki>{{big|{{hlist|...}}}}</nowiki></code> || <code><nowiki>{{hlist|...|style=font-size:120%}}</nowiki></code>
Line 101: Line 64:
|}
|}


{{navbox lists}}
<includeonly>{{Sandbox other||
<includeonly>{{Sandbox other||
<!-- Categories go here, and interwikis go in Wikidata -->
<!-- Categories go here, and interwikis go in Wikidata -->

Latest revision as of 06:19, 14 April 2025

This page uses Creative Commons Licensed content from Wikipedia (view authors).

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

Lists output by {{Flatlist}} and {{Hlist}} are semantically and visually identical, and differ only in the wiki-markup used to create the lists.

Usage

Basic usage


All parameters


Example

{{hlist|Jazz|rock|pop|rap}}

produces:

  • Jazz
  • rock
  • pop
  • rap

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.

Avoiding Linter errors

{{hlist}} will produce Linter errors if placed inside a template that uses <span>...</span> tags, such as {{small}}, , 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%}}
{{hlist|...|style=font-size:120%}}
{{big|{{hlist|...}}}} {{hlist|...|style=font-size:120%}}
{{large|{{hlist|...}}}} {{hlist|...|style=font-size:120%}}
{{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}}