|
|
| Line 1: |
Line 1: |
| <includeonly><div style="display:flex; flex-wrap:wrap; align-items:{{{align-items|start}}}; gap:{{{gap|4px}}}; justify-content:{{{justify-content|center}}};"></includeonly><noinclude> | | <includeonly><div style="display:flex; flex-flow:row wrap; align-items:{{{align-items|start}}}; gap:{{{gap|4px}}}; justify-content:{{{justify-content|center}}}; {{{extra-style|}}}"></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.
| | <templatedata> |
| | | { |
| This must be used in combination with [[Template:Flexfooter]].
| | "params": { |
| | | "align-items": { |
| ==Usage==
| | "label": "Align-Items", |
| <pre>{{Flexheader
| | "description": "Vertical alignment of the items", |
| |gap=
| | "type": "line", |
| |align-items=
| | "suggestedvalues": [ |
| |justify-content=
| | "start", |
| }}
| | "center", |
| (include as many inline-formatted items as desired)
| | "end", |
| {{Flexfooter}}</pre>
| | "stretch" |
| | | ], |
| Functionality:
| | "default": "start", |
| * Between <nowiki>{{Flexheader}}</nowiki> and <nowiki>{{Flexfooter}}</nowiki>, include a list of inline-formatted items (example: Instances of [[Template:TypeProperties]]).
| | "suggested": true |
| * The set of items will be formatted as a flex with wrapping, will be centered horizontally, and will be aligned vertically at the top edge of each item. This can be customized (see Template fields below).
| | }, |
| * 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.
| | "gap": { |
| | | "label": "Gap", |
| ==Template fields==
| | "description": "Desired gap between items", |
| * '''gap''' - The desired gap between items. Defaults to 4px. If an invalid value is provided, it uses 0px.
| | "type": "line", |
| * '''align-items''' - If the items have different heights, this determine how they are vertically aligned. This value is fed into the "align-items" CSS property. Valid values are described below:
| | "default": "4px", |
| ** '''start''' - Vertically align items along their top edges.
| | "suggested": true |
| ** '''center''' - Vertically align items along the middle of their heights.
| | }, |
| ** '''end''' - Vertically align items along their bottom edges.
| | "justify-content": { |
| ** '''stretch''' - Vertically stretch all small items to have the same height as the tallest item.
| | "label": "Justify-Content", |
| ** This field defaults to "'''start'''". If an invalid value is provided, it uses "'''stretch'''".
| | "description": "Horizontal alignment of the items", |
| * '''justify-content''' - Aligns items horizontally on the screen. This value is fed into the "justify-content" CSS property. Valid values are described below:
| | "type": "line", |
| ** '''start''' - Align items at the far left of the screen.
| | "suggestedvalues": [ |
| ** '''center''' - Align items at the horizontal center of the screen.
| | "start", |
| ** '''end''' - Align items at the far right of the screen.
| | "center", |
| ** This field defaults to "'''center'''". If an invalid value is provided, it uses "'''start'''".
| | "end", |
| | | "space-evenly" |
| ==Examples==
| | ], |
| <pre>
| | "default": "center", |
| {{Flexheader}}
| | "suggested": true |
| {{TypeProperties|type=Fighting|prop=Off
| | }, |
| |se={{TypeIcon|Ice}}{{TypeIcon|Normal}}{{TypeIcon|Rock}}
| | "extra-style": { |
| |nve={{TypeIcon|Bug}}{{TypeIcon|Fairy}}{{TypeIcon|Flying}}{{TypeIcon|Poison}}{{TypeIcon|Psychic}}
| | "label": "Extra Styles", |
| |immune={{TypeIcon|Ghost}}
| | "description": "Any extra styles that should be applied. Need to be valid inline css styles.", |
| }} | | "type": "line", |
| {{TypeProperties|type=Fighting|prop=Def | | "suggested": true |
| |se={{TypeIcon|Fairy}}{{TypeIcon|Flying}}{{TypeIcon|Psychic}}
| | } |
| |nve={{TypeIcon|Bug}}{{TypeIcon|Rock}}
| | }, |
| }}
| | "description": "{{flexheader}} is used for creating a flexible set - the items will distribute horizontally on wider screens, and vertically on narrower screens. It should be used along with {{flexfooter}}.\nThe content inside can be created with multiple {{flexitem}}s", |
| {{Flexfooter}}
| | "format": "inline" |
| </pre> | | }</templatedata> |
| {{Flexheader}} | | {{Documentation}} |
| {{TypeProperties|type=Fighting|prop=Off
| |
| |se={{TypeIcon|Ice}}{{TypeIcon|Normal}}{{TypeIcon|Rock}}
| |
| |nve={{TypeIcon|Bug}}{{TypeIcon|Fairy}}{{TypeIcon|Flying}}{{TypeIcon|Poison}}{{TypeIcon|Psychic}}
| |
| |immune={{TypeIcon|Ghost}}
| |
| }}
| |
| {{TypeProperties|type=Fighting|prop=Def
| |
| |se={{TypeIcon|Fairy}}{{TypeIcon|Flying}}{{TypeIcon|Psychic}}
| |
| |nve={{TypeIcon|Bug}}{{TypeIcon|Rock}}
| |
| }}
| |
| {{Flexfooter}}
| |
| | |
| [[category:Code templates]] | | [[category:Code templates]] |
| </noinclude> | | </noinclude> |