Template:Flowlist/doc: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
mNo edit summary |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 31: | Line 31: | ||
== Examples == | == Examples == | ||
< | <div style="float:right;width:45%"> | ||
[[File:Books.png|left|thumb|100px|Animal Books]] List of animals: | [[File:Books.png|left|thumb|100px|Animal Books]] List of animals: | ||
{{flowlist| | {{flowlist| | ||
| Line 40: | Line 40: | ||
* [[sheep]] | * [[sheep]] | ||
* [[pig]] | * [[pig]] | ||
}} | }}</div> | ||
</ | |||
{{Pre| | |||
{{flowlist| | {{!(n(}}{{fcb|#4169e1|File}}:{{fcb|#2e8b57|Books.png}}|left|thumb|100px|Animal Books]] List of animals: | ||
* | {{((}}{{fcb|#4169e1|flowlist}}| | ||
* | * {{!(n(}}{{fcb|#2e8b57|cat}}]] | ||
* | * {{!(n(}}{{fcb|#2e8b57|dog}}]] | ||
* | * {{!(n(}}{{fcb|#2e8b57|horse}}]] | ||
* | * {{!(n(}}{{fcb|#2e8b57|cow}}]] | ||
* | * {{!(n(}}{{fcb|#2e8b57|sheep}}]] | ||
* {{!(n(}}{{fcb|#2e8b57|pig}}]] | |||
{{))}} | |||
}} | }} | ||
{{clear}} | {{clear}} | ||
;Alternative syntax: | ;Alternative syntax: | ||
< | <div style="float:right;width:45%"> | ||
[[File:Books.png|left|thumb|100px|Animal Books]] List of animals: | [[File:Books.png|left|thumb|100px|Animal Books]] List of animals: | ||
{{flowlist}} | {{flowlist}} | ||
| Line 64: | Line 65: | ||
* [[sheep]] | * [[sheep]] | ||
* [[pig]] | * [[pig]] | ||
{{endflowlist}} | {{endflowlist}}</div> | ||
</ | |||
{{Pre| | |||
{{flowlist}} | {{!(n(}}{{fcb|#4169e1|File}}:{{fcb|#2e8b57|Books.png}}|left|thumb|100px|Animal Books]] List of animals: | ||
* | {{((}}{{fcb|#4169e1|flowlist}}{{))}} | ||
* | * {{!(n(}}{{fcb|#2e8b57|cat}}]] | ||
* | * {{!(n(}}{{fcb|#2e8b57|dog}}]] | ||
* | * {{!(n(}}{{fcb|#2e8b57|horse}}]] | ||
* | * {{!(n(}}{{fcb|#2e8b57|cow}}]] | ||
* | * {{!(n(}}{{fcb|#2e8b57|sheep}}]] | ||
{{endflowlist}} | * {{!(n(}}{{fcb|#2e8b57|pig}}]] | ||
{{((}}{{fcb|#4169e1|endflowlist}}{{))}} | |||
}} | |||
{{clear}} | {{clear}} | ||
| Line 105: | Line 107: | ||
== TemplateData == | == TemplateData == | ||
<templatedata> | {{#switch: {{BASEPAGENAME}} | ||
|Flowlist=<templatedata> | |||
{ | { | ||
"description": "Create a list around left floating objects, like images and infoboxes.", | |||
"params": { | "params": { | ||
"class": { | "class": { | ||
"label": "Class", | "label": "Class", | ||
"description": "CSS class to containing <div> tag" | "description": "Adds a CSS class to the containing <div> tag." | ||
}, | }, | ||
"style": { | "style": { | ||
"label": "Style", | "label": "Style", | ||
"description": "CSS style" | "description": "Adds CSS style options." | ||
} | } | ||
} | } | ||
} | |||
</templatedata> | |||
|Endflowlist=<templatedata> | |||
{ | |||
"description": "Ends a flow list started by {{flowlist}}. It takes no parameters.", | |||
"params": {} | |||
} | } | ||
</templatedata> | </templatedata> | ||
}} | |||
| Line 129: | Line 135: | ||
<!-- Categories below this line, please --> | <!-- Categories below this line, please --> | ||
[[Category: | [[Category:List templates]] | ||
}}}}</includeonly> | }}}}</includeonly> | ||
Latest revision as of 02:20, 20 August 2023
|
It contains usage information, categories and other content that is not part of the original template page.
|
|---|
 | This template uses TemplateStyles: |
Usage
If you have this problem of list bullets and numbers overlapping with a left floating image or Infobox, for example:
List of animals:
then {{Flowlist}} enables lists to stay clear of these left floating objects. It effectively makes lists act as a block level element. It does however have a few side effects that you should take note of.
List of animals:
This template can be used with or without {{endflowlist}}.
Examples
[[File:Books.png|left|thumb|100px|Animal Books]] List of animals: {{flowlist| * [[cat]] * [[dog]] * [[horse]] * [[cow]] * [[sheep]] * [[pig]] }}
- Alternative syntax
[[File:Books.png|left|thumb|100px|Animal Books]] List of animals: {{flowlist}} * [[cat]] * [[dog]] * [[horse]] * [[cow]] * [[sheep]] * [[pig]] {{endflowlist}}
Parameters
|class=– adds a CSS class to the containing div.|style=– adds CSS style options.
Side effects
Using this technique has a side effect. If your list is longer than the floated element, then the list will not flow around the image like normal, but instead be one block, leaving white space below the floated element. This goes for both left and right side of the list.
This
List of animals:Will become
List of animals:See Also
- {{Hlist}}
- {{Bulleted list}}
- {{Ordered list}}
TemplateData
Create a list around left floating objects, like images and infoboxes.
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| Class | class | Adds a CSS class to the containing <div> tag. | Unknown | optional |
| Style | style | Adds CSS style options. | Unknown | optional |