5,881
edits
Template:Flexheader: Difference between revisions
purpose and fixing template calls
m (Boblers moved page User:Boblers/flexheader to Template:Flexheader: mainspacing per request) |
(purpose and fixing template calls) |
||
| Line 1: | Line 1: | ||
<includeonly><div style="display:flex; flex-wrap:wrap; vertical-align:middle; align-items:start; justify-content:center;"></includeonly><noinclude> | <includeonly><div style="display:flex; flex-wrap:wrap; vertical-align:middle; align-items:start; justify-content:center;"></includeonly><noinclude> | ||
This template is to be used for listing info box items in a flexible set - the items will distribute horizontally on wider screens, and vertically on narrower screens. | |||
This must be used in combination with [[Template:Flexfooter]]. | |||
==Usage== | ==Usage== | ||
<pre>{{ | <pre>{{Flexheader}} | ||
(include as many inline-formatted items as desired) | (include as many inline-formatted items as desired) | ||
{{ | {{Flexfooter}}</pre> | ||
Functionality: | Functionality: | ||
* Between <nowiki>{{ | * Between <nowiki>{{Flexheader}}</nowiki> and <nowiki>{{Flexfooter}}</nowiki>, include a list of inline-formatted items (example: Instances of the <nowiki>{{BonusSegmentDisplay}}</nowiki> template). | ||
* The set of items will be formatted as a flex with wrapping, will be centered horizontally, and will be aligned vertically by the middle of each item. | * The set of items will be formatted as a flex with wrapping, will be centered horizontally, and will be aligned vertically by the middle of each item. | ||
* On wide screens such as on desktop, the items will display horizontally. If there are too many items to display horizontally given the screen size, they will wrap to the next row. | * On wide screens such as on desktop, the items will display horizontally. If there are too many items to display horizontally given the screen size, they will wrap to the next row. | ||
| Line 14: | Line 16: | ||
==Examples== | ==Examples== | ||
<pre> | <pre> | ||
{{ | {{Flexheader}} | ||
{{ | {{BonusSegmentDisplay | ||
|border=FFAAFF | |border=FFAAFF | ||
|background=AAFFAA | |background=AAFFAA | ||
|title='''[[Professor Oak's Big Pokémon Encyclopedia]]:''' {{p|Glaceon}} | |title='''[[Professor Oak's Big Pokémon Encyclopedia]]:''' {{p|Glaceon}} | ||
|images= | |images= | ||
{{ | {{BonusSegmentDisplay/Image|file=Professor Oak Lecture DP094.png|hovertext=Glaceon|caption=}} | ||
|descname1=Original (JP) | |descname1=Original (JP) | ||
|desc1=ゆきのなか にわかけまわれ グレイシア | |desc1=ゆきのなか にわかけまわれ グレイシア | ||
| Line 29: | Line 31: | ||
|notes=Add notes here | |notes=Add notes here | ||
}} | }} | ||
{{ | {{BonusSegmentDisplay | ||
|border={{Pearl color}} | |border={{Pearl color}} | ||
|background={{Diamond color}} | |background={{Diamond color}} | ||
|title='''[[Professor Oak's Big Pokémon Encyclopedia]]:''' {{p|Glaceon}} | |title='''[[Professor Oak's Big Pokémon Encyclopedia]]:''' {{p|Glaceon}} | ||
|images= | |images= | ||
{{ | {{BonusSegmentDisplay/Image|file=Professor Oak Lecture DP094.png|hovertext=Glaceon|caption=}} | ||
|descname1=Original (JP) | |descname1=Original (JP) | ||
|desc1=ゆきのなか にわかけまわれ グレイシア | |desc1=ゆきのなか にわかけまわれ グレイシア | ||
| Line 40: | Line 42: | ||
|desc2=''Yuki no naka, niwa kakemaware, gureishia.'' | |desc2=''Yuki no naka, niwa kakemaware, gureishia.'' | ||
}} | }} | ||
{{ | {{Flexfooter}} | ||
</pre> | </pre> | ||
{{ | {{Flexheader}} | ||
{{ | {{BonusSegmentDisplay | ||
|border=FFAAFF | |border=FFAAFF | ||
|background=AAFFAA | |background=AAFFAA | ||
|title='''[[Professor Oak's Big Pokémon Encyclopedia]]:''' {{p|Glaceon}} | |title='''[[Professor Oak's Big Pokémon Encyclopedia]]:''' {{p|Glaceon}} | ||
|images= | |images= | ||
{{ | {{BonusSegmentDisplay/Image|file=Professor Oak Lecture DP094.png|hovertext=Glaceon|caption=}} | ||
|descname1=Original (JP) | |descname1=Original (JP) | ||
|desc1=ゆきのなか にわかけまわれ グレイシア | |desc1=ゆきのなか にわかけまわれ グレイシア | ||
| Line 57: | Line 59: | ||
|notes=Add notes here | |notes=Add notes here | ||
}} | }} | ||
{{ | {{BonusSegmentDisplay | ||
|border={{Pearl color}} | |border={{Pearl color}} | ||
|background={{Diamond color}} | |background={{Diamond color}} | ||
|title='''[[Professor Oak's Big Pokémon Encyclopedia]]:''' {{p|Glaceon}} | |title='''[[Professor Oak's Big Pokémon Encyclopedia]]:''' {{p|Glaceon}} | ||
|images= | |images= | ||
{{ | {{BonusSegmentDisplay/Image|file=Professor Oak Lecture DP094.png|hovertext=Glaceon|caption=}} | ||
|descname1=Original (JP) | |descname1=Original (JP) | ||
|desc1=ゆきのなか にわかけまわれ グレイシア | |desc1=ゆきのなか にわかけまわれ グレイシア | ||
| Line 68: | Line 70: | ||
|desc2=''Yuki no naka, niwa kakemaware, gureishia.'' | |desc2=''Yuki no naka, niwa kakemaware, gureishia.'' | ||
}} | }} | ||
{{ | {{Flexfooter}} | ||
</noinclude> | </noinclude> | ||