Flatlist/doc

From Eating Asturias, the Encyclopedia of Asturian Gastronomy
en>WOSlinker
(text)
m (1 revision imported)
 
(3 intermediate revisions by 2 users not shown)
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}}
<!-- Add categories where indicated at the bottom of this page and interwikis at Wikidata -->
<!-- PLEASE ADD CATEGORIES AND INTERWIKIS AT THE BOTTOM OF THIS PAGE -->
{{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]]
*[[Cookbook:Beverages|Beverages]]
*[[Cookbook:Bread Recipes|Bread]]
*[[Cookbook:Breakfast Recipes|Breakfast]]
*[[Cookbook:Confections|Confections]]
*[[Cookbook:Dessert|Desserts]]
*[[Cookbook:Meat Recipes|Meats]]
*[[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}}.


{{flatlist|
For navigation boxes using {{tl|navbox}}, one can set {{para|listclass|hlist}}, and achieve the same styling without using this template.
* [[cat]]
* [[dog]]
* [[horse]]
* [[cow]]
* [[sheep]]
* [[pig]]
}}


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===
 
<pre><nowiki>
== Parameters ==
{{flatlist |
{{#switch:{{NAMESPACE}}:{{ROOTPAGENAME}}|#default=
*[[Cookbook:Appetizers|Appetizers]]
{{Format TemplateData|<templatedata>
*[[Cookbook:Beverages|Beverages]]
{
*[[Cookbook:Bread Recipes|Bread]]
"description": {
*[[Cookbook:Breakfast Recipes|Breakfast]]
"en": "Used to create plain (i.e. unbulleted) lists."
*[[Cookbook:Confections|Confections]]
},
*[[Cookbook:Dessert|Desserts]]
"format": "inline",
*[[Cookbook:Meat Recipes|Meats]]
"params": {
*[[Cookbook:Pasta Recipes|Pasta]]
"1": {
*[[Cookbook:Rice Recipes|Rice]]
"label": {
*[[Cookbook:Salad Recipes|Salads]]
"en": "Content"
},
"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>


== Examples ==
{{flatlist |
<syntaxhighlight lang="text">
*[[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]]
}}
}}
</syntaxhighlight>


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


{{startflatlist}}
{{flatlist}}
* [[cat]]
*[[Cookbook:Appetizers|Appetizers]]
* [[dog]]
*[[Cookbook:Beverages|Beverages]]
* [[horse]]
*[[Cookbook:Bread Recipes|Bread]]
* [[cow]]
*[[Cookbook:Breakfast Recipes|Breakfast]]
* [[sheep]]
*[[Cookbook:Confections|Confections]]
* [[pig]]
*[[Cookbook:Dessert|Desserts]]
*[[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:
<syntaxhighlight lang="text">
<pre><nowiki>
{{flatlist|
{{flatlist | class=hnum |
# [[first]]
#[[Cookbook:Appetizers|Appetizers]]
# [[second]]
#[[Cookbook:Beverages|Beverages]]
# [[third]]
#[[Cookbook:Bread Recipes|Bread]]
# [[fourth]]
#[[Cookbook:Breakfast Recipes|Breakfast]]
# [[fifth]]
#[[Cookbook:Confections|Confections]]
# [[sixth]]
#[[Cookbook:Dessert|Desserts]]
}}
#[[Cookbook:Meat Recipes|Meats]]
</syntaxhighlight>
#[[Cookbook:Pasta Recipes|Pasta]]
 
#[[Cookbook:Rice Recipes|Rice]]
produces:
#[[Cookbook:Salad Recipes|Salads]]
 
{{flatlist|
# [[first]]
# [[second]]
# [[third]]
# [[fourth]]
# [[fifth]]
# [[sixth]]
}}
}}
</nowiki></pre>


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


produces:
===Parameters===
 
* '''class''' – adds a CSS class to the containing div.
{{flatlist |indent=2 |style=border:solid 1px silver; background:lightyellow; |class=nowraplinks |
* '''style''' – adds CSS style options.
* [[Alpine skiing at the 1936 Winter Olympics]]
::Example: {{para|<var>style</var>|<var>border:solid 1px silver; background:lightyellow</var>}}
* [[Alpine skiing at the 1948 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 1952 Winter Olympics]]
::Example: {{para|<var>indent</var>|<var>2</var>}}
* [[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|hlist}}
* {{tl|plainlist}}
* {{tl|plainlist}} and {{tl|unbulleted list}}
* {{tl|unbulleted list}}
* {{tl|bulleted list}}
<includeonly>{{#ifeq:{{SUBPAGENAME}}|sandbox||
* {{tl|ordered list}}
<!-- CATEGORIES AND INTERWIKIS HERE, THANKS -->
* {{tl|nowrap}}
[[ka:თარგი:Flatlist]]
* {{tl|pagelist}}
[[Category:List formatting templates|{{PAGENAME}}]]
* [[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>

Latest revision as of 18:17, 25 October 2022

Usage

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

The bottom margin is inherited from the current container. Normally this will be 0.5em. 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.

Examples

{{flatlist |
*[[Cookbook:Appetizers|Appetizers]]
*[[Cookbook:Beverages|Beverages]]
*[[Cookbook:Bread Recipes|Bread]]
*[[Cookbook:Breakfast Recipes|Breakfast]]
*[[Cookbook:Confections|Confections]]
*[[Cookbook:Dessert|Desserts]]
*[[Cookbook:Meat Recipes|Meats]]
*[[Cookbook:Pasta Recipes|Pasta]]
*[[Cookbook:Rice Recipes|Rice]]
*[[Cookbook:Salad Recipes|Salads]]
}}
Alternative syntax
{{flatlist}}
*[[Cookbook:Appetizers|Appetizers]]
*[[Cookbook:Beverages|Beverages]]
*[[Cookbook:Bread Recipes|Bread]]
*[[Cookbook:Breakfast Recipes|Breakfast]]
*[[Cookbook:Confections|Confections]]
*[[Cookbook:Dessert|Desserts]]
*[[Cookbook:Meat Recipes|Meats]]
*[[Cookbook:Pasta Recipes|Pasta]]
*[[Cookbook:Rice Recipes|Rice]]
*[[Cookbook:Salad Recipes|Salads]]
{{endflatlist}}
Syntax for ordered lists
{{flatlist | class=hnum |
#[[Cookbook:Appetizers|Appetizers]]
#[[Cookbook:Beverages|Beverages]]
#[[Cookbook:Bread Recipes|Bread]]
#[[Cookbook:Breakfast Recipes|Breakfast]]
#[[Cookbook:Confections|Confections]]
#[[Cookbook:Dessert|Desserts]]
#[[Cookbook:Meat Recipes|Meats]]
#[[Cookbook:Pasta Recipes|Pasta]]
#[[Cookbook:Rice Recipes|Rice]]
#[[Cookbook:Salad Recipes|Salads]]
}}

Parameters

  • class – adds a CSS class to the containing div.
  • style – adds CSS style options.
Example: |style=border:solid 1px silver; background:lightyellow
  • indent – indents the list by a number of standard indents (one indent being 1.6em), particularly handy for inclusion in an indented discussion thread.
Example: |indent=2

See also