Template:Plainlist/doc

From Official Kodi Wiki
< Template:Plainlist
Revision as of 14:16, 10 September 2022 by RogueScholar (talk | contribs) (Add example using 'indent-wrap' parameter)
Jump to navigation Jump to search

This template creates plain lists, which retain their semantic distinction as HTML list objects, but without any symbolic prefix visually identifying them as such. The default layout is horizontal and uses bullet characters () as separators, but assigning a value to the |indent-wrap= parameter allows it to be switched to a vertical one (new line-delimited) with a hanging indent for each item instead. The list as a whole or each individual item in it may be styled with CSS3.

Usage

Basic usage

{{Plainlist|Item 1|Item 2|Item 3|…}}

Complete syntax

{{Plainlist|Item 1|Item 2|Item 3|…
 | class       = CSS classes for list box
 | style       = CSS styles for list box
 | list-style  = CSS styles for entire list
 | item-style  = CSS styles for all list items
 | item1-style = CSS styles for first list item only
 | item2-style = CSS styles for second list item
 | …
 | indent-all  = Set to any value to indent all list items from left margin
 | indent-wrap = Set to any value to switch to an unbulleted vertical list where list items that wrap onto multiple lines are indented
 | indent      = Amount of indentation as a number of tab-stops
}}

Parameters

  • |1=, |2=, |3=, … Positional parameters are the list items, they can be most any kind of wikitext or even wikilinks (assign using their number for values containing an equality sign).
  • |class= Custom CSS classes for the <div>...</div> tags surrounding the list.
  • |style= Custom CSS styles for the <div>...</div> tags surrounding the list, e.g. font-size: 0.9em;.
  • |list-style= Custom CSS styles for the <ul>...</ul> tags around the list. The format is the same as for the |style= parameter.
  • |item-style= Custom CSS styles for all of the list items (all of the <li>...</li> tags). The format is the same as for the |style= parameter.
  • |item1-style=, |item2-style=, |item3-style=, … Custom CSS styles for a single list item. The format is the same as for the |style= parameter.
  • |indent-all= When set to any value, indents the entire list from the left margin by indent tab stops.
  • |indent-wrap= When set to any value, switch list layout to vertical and indent list items that wrap to multiple lines by indent tab stops.
  • |indent= or |in= Amount of indentation from the left margin expressed as tab stops. Default value is 0.

Examples

Wiki markup Output generated
{{Plainlist|Item 1|Item 2|Item 3|Item 4|Item 5|Item 6|Item 7|Item 8|Item 9}}
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
Giant planets ({{Plainlist|[[w:Jupiter|J]]|[[w:Saturn|S]]|[[w:Uranus|U]]|[[w:Neptune|N]]}}). Giant planets (
).
Giant planets ({{Plainlist|[[w:Jupiter|J]]|[[w:Saturn|S]]|[[w:Uranus|U]]|[[w:Neptune|N]]|class=inline}}). Giant planets (
).
{{Plainlist|Winner|Runner-up|Third place|indent-all=yes|indent=2}}
  • Winner
  • Runner-up
  • Third place
{{Plainlist|Winner|Runner-up|Lorem dolum ipsum sit. Lorem dolum ipsum sit. Lorem dolum ipsum sit. Lorem dolum ipsum sit.|indent-wrap=yes}}
  • Winner
  • Runner-up
  • Lorem dolum ipsum sit. Lorem dolum ipsum sit. Lorem dolum ipsum sit. Lorem dolum ipsum sit.
{{Plainlist|Winner|Runner-up|Third place|item-style=color: blue;}}
  • Winner
  • Runner-up
  • Third place
{{Plainlist|Winner|Runner-up|Third place|item1-style=background-color: yellow;|item2-style=text-decoration: underline;}}
  • Winner
  • Runner-up
  • Third place

Avoiding Linter errors

{{Plainlist}} will produce Linter errors if placed inside a template that uses <span>...</span> tags, such as {{Small}}, {{Larger}}, etc. To avoid this, use the style declarations like the ones shown in the table below.

Incorrect markup Correct markup
{{Small|{{Plainlist|…}}}} {{Plainlist|…|style=font-size: 0.85em;}}
{{Resize|{{Plainlist|…}}}} {{Plainlist|…|style=font-size: 0.9em;}}
{{Larger|{{Plainlist|…}}}} {{Plainlist|…|style=font-size: 1.1em;}}
{{Large|{{Plainlist|…}}}} {{Plainlist|…|style=font-size: 1.125em;}}
{{Big|{{Plainlist|…}}}} {{Plainlist|…|style=font-size: 1.2em;}}
{{Huge|{{Plainlist|…}}}} {{Plainlist|…|style=font-size: 1.8em;}}
{{Resize|x%|{{Plainlist|…}}}} {{Plainlist|…|style=font-size: x%;}}
{{Nowrap|{{Plainlist|…}}}} {{Plainlist|…|style=white-space: nowrap;}}