Flatlist/doc

From Eating Asturias, the Encyclopedia of Asturian Gastronomy
en>David1010
No edit summary
 
en>WOSlinker
(text)
Line 1: Line 1:
{{redirect|Template:Inline list|a navbox listing templates used within lines of text to mark problems needing attention|Template:Inline cleanup tags}}
{{Documentation subpage}}
{{Documentation subpage}}
<!-- PLEASE ADD CATEGORIES AND INTERWIKIS AT THE BOTTOM OF THIS PAGE -->
<!-- Add categories where indicated at the bottom of this page and interwikis at Wikidata -->
{{used in system|in [[MediaWiki:Pageinfo-header]]}}
{{tlr|startflatlist|flt}}
This template provides a [[Web Content Accessibility Guidelines|WCAG]]/ISO-standards-compliant accessible alternative to comma- or dash- (or other single character-) separated lists, per [[WP:FLATLIST]] and [[WP:HLIST]].
{{TOC limit|3}}


===Usage===
== Usage ==
{{tl|Flatlist}} starts a horizontal list, such as:
{{tl|flatlist}} starts a horizontal list, such as:
{{flatlist}}
 
*[[Cookbook:Appetizers|Appetizers]]
{{flatlist|
*[[Cookbook:Beverages|Beverages]]
* [[cat]]
*[[Cookbook:Bread Recipes|Bread]]
* [[dog]]
*[[Cookbook:Breakfast Recipes|Breakfast]]
* [[horse]]
*[[Cookbook:Confections|Confections]]
* [[cow]]
*[[Cookbook:Dessert|Desserts]]
* [[sheep]]
*[[Cookbook:Meat Recipes|Meats]]
* [[pig]]
*[[Cookbook:Pasta Recipes|Pasta]]
}}
*[[Cookbook:Rice Recipes|Rice]]
*[[Cookbook:Salad Recipes|Salads]]
{{endflatlist}}
The bottom margin is inherited from the current container. Normally this will be 0.5em. This template can be used with or without {{tl|endflatlist}}.


For navigation boxes using {{tl|navbox}}, one can set {{para|listclass|hlist}}, and achieve the same styling without using this template.
This template can be used with or without {{tl|endflatlist}}. For navigation boxes using {{tl|navbox}}, one can set {{para|listclass|hlist}}, and achieve the same styling without using this template. For image captions, list (i.e. asterisk) markup does not work, so consider using {{tl|hlist}} instead.


===Examples===
== Parameters ==
<pre><nowiki>
{{#switch:{{NAMESPACE}}:{{ROOTPAGENAME}}|#default=
{{flatlist |
{{Format TemplateData|<templatedata>
*[[Cookbook:Appetizers|Appetizers]]
{
*[[Cookbook:Beverages|Beverages]]
"description": {
*[[Cookbook:Bread Recipes|Bread]]
"en": "Used to create plain (i.e. unbulleted) lists."
*[[Cookbook:Breakfast Recipes|Breakfast]]
},
*[[Cookbook:Confections|Confections]]
"format": "inline",
*[[Cookbook:Dessert|Desserts]]
"params": {
*[[Cookbook:Meat Recipes|Meats]]
"1": {
*[[Cookbook:Pasta Recipes|Pasta]]
"label": {
*[[Cookbook:Rice Recipes|Rice]]
"en": "Content"
*[[Cookbook:Salad Recipes|Salads]]
},
"description": {
"en": "The list to wrap."
},
"suggested": true,
"type": "content"
},
"class": {
"label": {
"en": "Extra Classes"
},
"description": {
"en": "Adds extra CSS classes to the containing div."
},
"type": "string"
},
"style": {
"label": {
"en": "CSS Style"
},
"description": {
"en": "Adds extra CSS properties to the containing div. Complex styles should not be used in articles (per [[MOS:DEVIATIONS]]) but may be acceptable on user, project and talk pages."
},
"example": "\n border: solid 1px silver;\n background: lightyellow;\n",
"type": "string"
},
"indent": {
"label": {
"en": "Indent"
},
"description": {
"en": "Indents the list by a number of standard indents (one indent being 1.6[[em (typography)|em]]). (Useful in an indented discussion thread.)"
},
"example": "2",
"type": "number"
}
},
"paramOrder": [
"class",
"style",
"indent",
"1"
]
}
</templatedata>}}
|Template:Endflatlist=
{{Format TemplateData|JSON=
{
"description": "Ends a flat list created by {{tl|flatlist}}.",
"format": "inline",
"params": {
}
}
}}
}}
}}
</nowiki></pre>


{{flatlist |
== Examples ==
*[[Cookbook:Appetizers|Appetizers]]
<syntaxhighlight lang="text">
*[[Cookbook:Beverages|Beverages]]
{{flatlist|
*[[Cookbook:Bread Recipes|Bread]]
* [[cat]]
*[[Cookbook:Breakfast Recipes|Breakfast]]
* [[dog]]
*[[Cookbook:Confections|Confections]]
* [[horse]]
*[[Cookbook:Dessert|Desserts]]
* [[cow]]
*[[Cookbook:Meat Recipes|Meats]]
* [[sheep]]
*[[Cookbook:Pasta Recipes|Pasta]]
* [[pig]]
*[[Cookbook:Rice Recipes|Rice]]
*[[Cookbook:Salad Recipes|Salads]]
}}
}}
</syntaxhighlight>


;Alternative syntax:
produces:
<pre><nowiki>
 
{{flatlist}}
{{flatlist|
*[[Cookbook:Appetizers|Appetizers]]
* [[cat]]
*[[Cookbook:Beverages|Beverages]]
* [[dog]]
*[[Cookbook:Bread Recipes|Bread]]
* [[horse]]
*[[Cookbook:Breakfast Recipes|Breakfast]]
* [[cow]]
*[[Cookbook:Confections|Confections]]
* [[sheep]]
*[[Cookbook:Dessert|Desserts]]
* [[pig]]
*[[Cookbook:Meat Recipes|Meats]]
}}
*[[Cookbook:Pasta Recipes|Pasta]]
 
*[[Cookbook:Rice Recipes|Rice]]
=== Alternative syntax ===
*[[Cookbook:Salad Recipes|Salads]]
<syntaxhighlight lang="text">
{{startflatlist}}
* [[cat]]
* [[dog]]
* [[horse]]
* [[cow]]
* [[sheep]]
* [[pig]]
{{endflatlist}}
{{endflatlist}}
</nowiki></pre>
</syntaxhighlight>
 
produces:


{{flatlist}}
{{startflatlist}}
*[[Cookbook:Appetizers|Appetizers]]
* [[cat]]
*[[Cookbook:Beverages|Beverages]]
* [[dog]]
*[[Cookbook:Bread Recipes|Bread]]
* [[horse]]
*[[Cookbook:Breakfast Recipes|Breakfast]]
* [[cow]]
*[[Cookbook:Confections|Confections]]
* [[sheep]]
*[[Cookbook:Dessert|Desserts]]
* [[pig]]
*[[Cookbook:Meat Recipes|Meats]]
*[[Cookbook:Pasta Recipes|Pasta]]
*[[Cookbook:Rice Recipes|Rice]]
*[[Cookbook:Salad Recipes|Salads]]
{{endflatlist}}
{{endflatlist}}


;Syntax for ordered lists:
=== Syntax for ordered lists ===
<pre><nowiki>
<syntaxhighlight lang="text">
{{flatlist | class=hnum |
{{flatlist|
#[[Cookbook:Appetizers|Appetizers]]
# [[first]]
#[[Cookbook:Beverages|Beverages]]
# [[second]]
#[[Cookbook:Bread Recipes|Bread]]
# [[third]]
#[[Cookbook:Breakfast Recipes|Breakfast]]
# [[fourth]]
#[[Cookbook:Confections|Confections]]
# [[fifth]]
#[[Cookbook:Dessert|Desserts]]
# [[sixth]]
#[[Cookbook:Meat Recipes|Meats]]
}}
#[[Cookbook:Pasta Recipes|Pasta]]
</syntaxhighlight>
#[[Cookbook:Rice Recipes|Rice]]
 
#[[Cookbook:Salad Recipes|Salads]]
produces:
 
{{flatlist|
# [[first]]
# [[second]]
# [[third]]
# [[fourth]]
# [[fifth]]
# [[sixth]]
}}
}}
</nowiki></pre>


{{flatlist | class=hnum |
=== Using optional parameters ===
#[[Cookbook:Appetizers|Appetizers]]
<syntaxhighlight lang="text">
#[[Cookbook:Beverages|Beverages]]
{{flatlist |indent=2
#[[Cookbook:Bread Recipes|Bread]]
|style=border:solid 1px silver; background:lightyellow;
#[[Cookbook:Breakfast Recipes|Breakfast]]
|class=nowraplinks |
#[[Cookbook:Confections|Confections]]
* [[Alpine skiing at the 1936 Winter Olympics]]
#[[Cookbook:Dessert|Desserts]]
* [[Alpine skiing at the 1948 Winter Olympics]]
#[[Cookbook:Meat Recipes|Meats]]
* [[Alpine skiing at the 1952 Winter Olympics]]
#[[Cookbook:Pasta Recipes|Pasta]]
* [[Alpine skiing at the 1956 Winter Olympics]]
#[[Cookbook:Rice Recipes|Rice]]
* [[Alpine skiing at the 1960 Winter Olympics]]
#[[Cookbook:Salad Recipes|Salads]]
* [[Alpine skiing at the 1964 Winter Olympics]]
}}
}}
</syntaxhighlight>


===Parameters===
produces:
* '''class''' – adds a CSS class to the containing div.
 
* '''style''' – adds CSS style options.
{{flatlist |indent=2 |style=border:solid 1px silver; background:lightyellow; |class=nowraplinks |
::Example: {{para|<var>style</var>|<var>border:solid 1px silver; background:lightyellow</var>}}
* [[Alpine skiing at the 1936 Winter Olympics]]
* '''indent''' – indents the list by a number of standard indents (one indent being 1.6em), particularly handy for inclusion in an indented discussion thread.
* [[Alpine skiing at the 1948 Winter Olympics]]
::Example: {{para|<var>indent</var>|<var>2</var>}}
* [[Alpine skiing at the 1952 Winter Olympics]]
* [[Alpine skiing at the 1956 Winter Olympics]]
* [[Alpine skiing at the 1960 Winter Olympics]]
* [[Alpine skiing at the 1964 Winter Olympics]]
}}
 
== Technical details ==
This template uses the <code>.hlist</code> [[Cascading Style Sheets|CSS]] class defined in [[MediaWiki:Common.css]] to generate horizontal lists. It causes ordinary html list items to be displayed inline (horizontally), where they would normally display as block elements (vertically). The class also generates the [[interpunct]]s between list items and parentheses around nested lists. Some of the CSS used is not compatible with some older browsers, notably Internet Explorer 6 and 7.
 
{| class="wikitable"
! Wikitext
! Expanded template
! HTML
|- style="vertical-align:top;"
| <pre>
{{flatlist|
* cat
* dog
* horse
* cow
* sheep
* pig
}}
</pre>
| {{nowiki2|tag=pre|
{{flatlist|
* cat
* dog
* horse
* cow
* sheep
* pig
}}
}}
| <syntaxhighlight lang="html">
<div class="hlist">
<ul><li>cat</li>
<li>dog</li>
<li>horse</li>
<li>cow</li>
<li>sheep</li>
<li>pig</li></ul>
</div>
</syntaxhighlight>
|}


===See also===
== See also ==
* {{tl|endflatlist}}
* {{tl|endflatlist}}
* {{tl|plainlist}}
* {{tl|hlist}}
* {{tl|unbulleted list}}
* {{tl|plainlist}} and {{tl|unbulleted list}}
<includeonly>{{#ifeq:{{SUBPAGENAME}}|sandbox||
* {{tl|bulleted list}}
<!-- CATEGORIES AND INTERWIKIS HERE, THANKS -->
* {{tl|ordered list}}
[[ka:თარგი:Flatlist]]
* {{tl|nowrap}}
[[Category:List formatting templates|{{PAGENAME}}]]
* {{tl|pagelist}}
* [[WP:HLIST]]
{{HTML lists}}
<includeonly>{{Sandbox other||
<!-- Categories below this line; interwikis at Wikidata -->
[[Category:Typing-aid templates|Flatlist]]
[[Category:List formatting and function templates|Flatlist]]
}}</includeonly>
}}</includeonly>

Revision as of 13:00, 2 October 2022

Template:Redirect

  1. REDIRECT Template:Template redirect

This template provides a WCAG/ISO-standards-compliant accessible alternative to comma- or dash- (or other single character-) separated lists, per WP:FLATLIST and WP:HLIST. Template:TOC limit

Usage

{{flatlist}} starts a horizontal list, such as:

This template can be used with or without {{endflatlist}}. For navigation boxes using {{navbox}}, one can set |listclass=hlist, and achieve the same styling without using this template. For image captions, list (i.e. asterisk) markup does not work, so consider using {{hlist}} instead.

Parameters

Template:Format TemplateData

Examples

{{flatlist|
* [[cat]]
* [[dog]]
* [[horse]]
* [[cow]]
* [[sheep]]
* [[pig]]
}}

produces:

Alternative syntax

{{startflatlist}}
* [[cat]]
* [[dog]]
* [[horse]]
* [[cow]]
* [[sheep]]
* [[pig]]
{{endflatlist}}

produces:

Syntax for ordered lists

{{flatlist|
# [[first]]
# [[second]]
# [[third]]
# [[fourth]]
# [[fifth]]
# [[sixth]]
}}

produces:

Using optional parameters

{{flatlist |indent=2 
|style=border:solid 1px silver; background:lightyellow; 
|class=nowraplinks |
* [[Alpine skiing at the 1936 Winter Olympics]]
* [[Alpine skiing at the 1948 Winter Olympics]]
* [[Alpine skiing at the 1952 Winter Olympics]]
* [[Alpine skiing at the 1956 Winter Olympics]]
* [[Alpine skiing at the 1960 Winter Olympics]]
* [[Alpine skiing at the 1964 Winter Olympics]]
}}

produces:

Technical details

This template uses the .hlist CSS class defined in MediaWiki:Common.css to generate horizontal lists. It causes ordinary html list items to be displayed inline (horizontally), where they would normally display as block elements (vertically). The class also generates the interpuncts between list items and parentheses around nested lists. Some of the CSS used is not compatible with some older browsers, notably Internet Explorer 6 and 7.

Wikitext Expanded template HTML
{{flatlist|
* cat
* dog
* horse
* cow
* sheep
* pig
}}
Template:Nowiki2
<div class="hlist">
<ul><li>cat</li>
<li>dog</li>
<li>horse</li>
<li>cow</li>
<li>sheep</li>
<li>pig</li></ul>
</div>

See also

Template:HTML lists