Difference between revisions of "Template:Responsive table header"
(MediaWiki doesn't use thead. A custom class is probably safer to use than assuming "... > tr:first-child" is the heading row.) |
(One parameter with each column on a new line, instead of a parameter per column.) |
||
| Line 1: | Line 1: | ||
| − | {| class="wikitable wikitable--responsive-labels sortable card-list" style="{{ # | + | <!-- |
| − | | | + | -->{{ #arraydefine: $columns | {{{columns<includeonly>|</includeonly>}}} | \n }}<!-- |
| − | | $ | + | -->{{ #vardefine: $column_number | 0 }}<!-- |
| − | | {{ # | + | |
| − | --column$column_number | + | -->{| class="wikitable wikitable--responsive-labels sortable card-list" style="{{ #arrayprint: $columns |
| − | + | | | |
| + | | $column$ | ||
| + | | <!-- | ||
| + | -->{{ #vardefine: $column_number | {{ #expr: {{ #var: $column_number }} + 1 }} }}<!-- | ||
| + | -->--column{{ #var: $column_number }}: {{unlink|{{ #explode: $column$ | ; }}}}; | ||
| | | | ||
}}" | }}" | ||
|- class="wikitable__heading" | |- class="wikitable__heading" | ||
| − | {{ # | + | <!-- |
| − | | | + | -->{{ #vardefine: $column_number | 0 }}<!-- #reset counter |
| − | | $ | + | -->{{ #arrayprint: $columns |
| − | | {{ # | + | | |
| − | ! scope="col" {{!}} {{ #explode: | + | | $column$ |
| − | + | | {{ #vardefine: $column_number | {{ #expr: {{ #var: $column_number }} + 1 }} }} | |
| + | ! scope="col" {{!}} {{ #explode: $column$ | ; | -1 }} | ||
|\n | |\n | ||
}} | }} | ||
Revision as of 15:33, 1 January 2020
| {{{columns}}} |
|---|
Template documentation{{Responsive table header}} and {{Responsive table footer}} are used to create the heading of a table in such a way that the table will restyle itself to fit better on the smaller screens of mobile devices.
Usage
Basic
The table has a columns parameter. This is used to define the text in the heading of each column. Put the text for each column on a new line.
Links, bold and italics will automatically be stripped from the column text when forming labels on mobile. These are not supported in the mobile set up.
{{Responsive table header
| columns =
Card
[[Attribute]]
[[Type]]
[[Level]]
[[ATK]]
[[DEF]]
}}
|-
| [[Blue-Eyes White Dragon]]
| [[LIGHT]]
| [[Dragon]]
| 8
| 3000
| 2500
|-
| [[Dark Magician]]
| [[DARK]]
| [[Spellcaster]]
| 7
| 2500
| 2100
{{Responsive table footer}}
| Card | Attribute | Type | Level | ATK | DEF |
|---|---|---|---|---|---|
| Blue-Eyes White Dragon | LIGHT | Dragon | 8 | 3000 | 2500 |
| Dark Magician | DARK | Spellcaster | 7 | 2500 | 2100 |
Different mobile and desktop text
If a label is to have different text on mobile and desktop, enter the mobile text, followed by a semicolon (;), followed by the desktop text.
{{Responsive table header
| columns =
Number; {{explain|#|Number}}
Card
[[Attribute]]
[[Type]]
[[Level]]
[[ATK]]
[[DEF]]
}}
|-
| [[Blue-Eyes White Dragon]]
| [[LIGHT]]
| [[Dragon]]
| 8
| 3000
| 2500
|-
| [[Dark Magician]]
| [[DARK]]
| [[Spellcaster]]
| 7
| 2500
| 2100
{{Responsive table footer}}
| # | Card | Attribute | Type | Level | ATK | DEF |
|---|---|---|---|---|---|---|
| 4007 | Blue-Eyes White Dragon | LIGHT | Dragon | 8 | 3000 | 2500 |
| 4041 | Dark Magician | DARK | Spellcaster | 7 | 2500 | 2100 |
Semantic query
Often, the table rows will be the result of an SMW query. In that scenario, the query should use |format=plain|template=Table row
{{Responsive table header
| columns =
Number; {{explain|#|Number}}
Internal number; {{explain|I#|Internal number}}
Card
[[Card type]]
Monster type
[[Attribute]]
Type
[[Level]]
[[ATK]]
[[DEF]]
[[Password]]
}}<!--
-->{{ #ask: [[Release::Yu-Gi-Oh! 7 Trials to Glory: World Championship Tournament 2005]]
|?Card number
|?Internal number
|?English name (linked)
|?Card type (short)
|?Monster type (short)
|?Attribute
|?Type
|?Level
|?ATK string
|?DEF string
|?Password
| limit = 3
| mainlabel = -
| searchlabel =
| sort = Card number
| format = plain
| template = table row
}}
{{Responsive table footer}}
| # | I# | Card | Card type | Monster type | Attribute | Type | Level | ATK | DEF | Password |
|---|---|---|---|---|---|---|---|---|---|---|
