Template:Flexitem: Difference between revisions
From Bulbapedia, the community-driven Pokémon encyclopedia.
Jump to navigationJump to search
PikaTepig999 (talk | contribs) (Template version of long css code, to be used with {{Flexheader}} and {{Flexfooter}}) |
PikaTepig999 (talk | contribs) m (includeonly; category; description) |
||
Line 1: | Line 1: | ||
<div class="{{{class|}}}" style="background: #{{{background|ffffff00}}}; border: {{{border|none}}}; {{{extra-style|}}}">{{{content|{{{1|}}}}}}</div><noinclude> | <includeonly><div class="{{{class|}}}" style="background: #{{{background|ffffff00}}}; border: {{{border|none}}}; {{{extra-style|}}}">{{{content|{{{1|}}}}}}</div></includeonly><noinclude> | ||
<templatedata> | <templatedata> | ||
{ | { | ||
Line 39: | Line 39: | ||
} | } | ||
}, | }, | ||
"description": "{{flexitem}} creates a <div> item, which can be used inside a {{flexheader}} container or on its own", | |||
"paramOrder": [ | "paramOrder": [ | ||
"class", | "class", | ||
Line 49: | Line 50: | ||
</templatedata> | </templatedata> | ||
{{Documentation}} | {{Documentation}} | ||
[[category:Code templates]] | |||
</noinclude> | </noinclude> |
Latest revision as of 22:36, 16 April 2024
{{flexitem}} creates a <div> item, which can be used inside a {{flexheader}} container or on its own
Parameter | Description | Type | Status | |
---|---|---|---|---|
Class | class | Classes that should apply to this item. Separate multiple classes with spaces. | Line | suggested |
Background Color | background | A color template for the background. Needs color template or Hex Code
| Line | suggested |
Border | border | Border style for the time
| Line | suggested |
Extra Styles | extra-style | Any extra styles that should be applied. Need to be valid inline css styles. | Line | suggested |
Content | 1 content | The content of the flex item | String | required |
Template documentation
|
---|
Note: portions of the template sample may not be visible without values provided. |
View or edit this documentation. (About template documentation) |
{{Flexitem}}
is to create a </div>
item which can be placed inside a flexible container created by {{flexheader}}
, or by itself.
Usage
{{Flexheader}} {{Flexitem |class= |background= |border= |extra-style= | }} (include as many items as desired) {{Flexfooter}}
Template fields
- class - Any Bulbapedia CSS class that should be applied. Examples are
roundy
,blacklinks
,whitelinks
,c
,l
, etc. Separate multiple class with spaces. - background - Sets the background color. Can be a valid hex code or color template
- border - Sets the border color and style.
- extra-style - Any extra styles that need to be applied to the block. These need to be valid inline CSS styles. Separate multiple styles with a semi-colon (
;
).
- Examples include but are not limited to:
- margin - Space between this block and outside items.
- padding - Space between the block border and inside items.
- text-align -
left
,center
, etc. (This can also be set using thec
,l
etc. classes.) - overflow - When set to hidden, which not display anything which extends beyond the item's border. Useful for clipping edges of non-transparent images.
- 1(first unnamed parameter) or content - The content inside the flexitem.
Examples
- Simple Example
{{Flexheader}} {{Flexitem| [[File:0001Bulbasaur.png|x100px]] <br> {{p|Bulbasaur}} }} {{Flexitem| [[File:0004Charmander.png|x100px]] <br> {{p|Charmander}} }} {{Flexitem| [[File:0007Squirtle.png|x100px]] <br> {{p|Squirtle}} }} {{Flexfooter}}
- Fancy example
{{Flexheader|gap=10px|justify-content=space-evenly|class=roundy|extra-style=border: 2px solid #{{kanto color}}; padding:2px}} {{Flexitem|class=roundy|background={{grass color light}}|border=2px solid #{{grass color dark}}|extra-style=text-align: center| [[File:0001Bulbasaur.png|x100px]] <br> {{p|Bulbasaur}} }} {{Flexitem|class=roundy|background={{fire color light}}|border=2px solid #{{fire color dark}}|extra-style=text-align: center| [[File:0004Charmander.png|x100px]] <br> {{p|Charmander}} }} {{Flexitem|class=roundy|background={{water color light}}|border=2px solid #{{water color dark}}|extra-style=text-align: center| [[File:0007Squirtle.png|x100px]] <br> {{p|Squirtle}} }} {{Flexfooter}}