Module:UtilsLayout — zelda

This module exports the following functions.

tabs

tabs(data, [options])

Parameters

data
label
Button text for the tab.
[tooltip]
Tooltip for the tab button
content
Content for the tab.
[options]
[default=1]
Index of default tab.
[align="\"left\""]
Horizontal alignment for tabs and their content.
[tabOptions]
Display options for the tabs themselves.
[position="\"top\""]
If top (default), the tabs are placed above their content. If bottom, then the opposite.
[collapse]
If truthy, tabs will not be rendered if there is only one tab. The content of that tab will simply be rendered instead.
[stretch]
If true, then tabs will stretch to fill the available space in their container.
[columns]
If specified, the tabs will attempt to arrange themselves in N columns of equal width. This option is not compatible with stretch.
[labelOptions]
Display options for the tab labels.
[alignVertical="\"center\""]
Vertical alignment of the label with respect to its tab. Options are: center (default) and bottom.
[contentOptions]
Display options for the tab contents.
[fixedContentWidth]
Width for the tab container in px. Or, if set to true, the tab container will assume the width of the largest tab. By default, the tab container assumes the width of the current tab.
[fixedContentHeight]
Height for the tab container in px. Or, if set to true, the tab container will assume the height of the largest tab. By default, the tab container assumes the height of the current tab.
[alignVertical="\"top\""]
Vertical alignment of tab contents with respect to the tab container. Useful only alonside fixedHeight.

Returns

HTML markup rendering tabs.

Examples

#	Input	Result
1	tabs({ { content = "Content1", label = "Tab1", }, { content = "Content2", label = "Tab2", }, })	Tab1Tab2 Content1 Content2
2	tabs( { { content = "Content1", label = "Tab1", }, { content = "Content2", label = "Tab2", }, }, { tabOptions = { stretch = true }, } )	Tab1Tab2 Content1 Content2
3	tabs( { { tooltip = "This is the first tab.", content = "Content1", label = "Tab1", }, { tooltip = "This is the second tab.", content = "Content2", label = "Tab2", }, { tooltip = "This is the third tab.", content = "Content3", label = "Tab3", }, }, { align = "center", default = 2, tabOptions = { position = "bottom" }, } )	Content1 Content2 Content3 Tab1Tab2Tab3
Tabs display even for a single tab unless `collapse` is set to true.
4	tabs({ { content = "Content", label = "Single Tab", }, })	Single Tab Content
5	tabs( { { content = "Content", label = "Single Tab", }, }, { tabOptions = { collapse = true }, } )	Content
`fixedContentWidth` and `fixedContentHeight` determine how the overall tab container is sized.
6	tabs({ { content = "meep", label = "Small Tab", }, { content = "meeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeep", label = "Wide Tab", }, { content = "m\ne\ne\ne\ne\np", label = "Tall tab", }, })	Small TabWide TabTall tab meep meeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeep m e e e e p
7	tabs( { { content = "meep", label = "Small Tab", }, { content = "meeeeeeeeeeeeeeeeeeeeeeeeeeep", label = "Wide Tab", }, { content = "m\ne\ne\ne\ne\np", label = "Tall tab", }, }, { contentOptions = { fixedWidth = true }, } )	Small TabWide TabTall tab meep meeeeeeeeeeeeeeeeeeeeeeeeeeep m e e e e p
8	tabs( { { content = "meep", label = "Small Tab", }, { content = "meeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeep", label = "Wide Tab", }, { content = "m\ne\ne\ne\ne\np", label = "Tall tab", }, }, { contentOptions = { fixedHeight = true }, } )	Small TabWide TabTall tab meep meeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeep m e e e e p
9	tabs( { { content = "meep", label = "Small Tab", }, { content = "meeeeeeeeeeeeeeeeeeeeeeeeeeep", label = "Wide Tab", }, { content = "m\ne\ne\ne\ne\np", label = "Tall tab", }, }, { contentOptions = { fixedWidth = true, alignVertical = "center", fixedHeight = true, }, } )	Small TabWide TabTall tab meep meeeeeeeeeeeeeeeeeeeeeeeeeeep m e e e e p
10	tabs( { { content = "meep", label = "Small Tab", }, { content = "meeeeeeeeeeeeeeeeeeeeeeeeeeep", label = "Wide Tab", }, { content = "m\ne\ne\ne\ne\np", label = "Tall tab", }, }, { contentOptions = { fixedWidth = 80, alignVertical = "center", fixedHeight = 80, }, } )	Small TabWide TabTall tab meep meeeeeeeeeeeeeeeeeeeeeeeeeeep m e e e e p
When images are used as tab labels, the label alignment options can be useful.
11	tabs( { { content = "Engines", label = "[[File:ST Engine Icon.png\|link=]]", }, { content = "Passenger Cars", label = "[[File:ST Passenger Car Icon.png\|link=]]", }, }, { labelOptions = { alignVertical = "bottom" }, } )	Engines Passenger Cars

table

table(data)

Parameters

data
A Lua table representing the desired wikitable.
[sortable]
If true renders a table that can be sorted by any of its columns.
[hideEmptyColumns]
If true, columns that are completely empty (except for header and footer rows) are omitted.
[hideEmptyRows]
If true, rows that are completely empty (except for header cells) are omitted.
[class="wikitable"]
Sets the table's class HTML attribute. Note that overrides the sortable option.
[styles]
Key-value pairs of CSS properties to apply to the <table> element. Consider instead using the class property and CSS stylesheets (e.g. MediaWiki:Templates.css).
[caption]
Wikitext for a table caption.
[headers]
An array of strings to serve as a header row.
rows
[header]
If true renders all cells in row as <th> elements.
[footer]
If true renders all cells in row as <th> elements.
[styles]
Key-value pairs of CSS properties to apply to each cell in the row.
[cells]
[header]
If true, renders the cell as a <th> element.
[colspan]
[rowspan]
[sortValue]
Sort value for the cell.
[class="wikitable"]
Sets the cell's class HTML attribute.
[styles]
Key-value pairs of CSS properties to apply to the cell. Overrides any conflicting row styles. Consider instead using the class property and CSS stylesheets (e.g. MediaWiki:Templates.css).
content
stringrows

Wikitext content for the cell.

Subvidisions for the cell. Think of it as a table within a table.
[header]
If true renders all cells in row as <th> elements.
[footer]
If true renders all cells in row as <th> elements.
[styles]
Key-value pairs of CSS properties to apply to each cell in the row.
[cells]

Returns

Wikitext for the table using XHTML syntax.

Examples

# Input Result

A table with header row, footer row, and caption

12

table({
  caption = "A table",
  rows = {
    {
      header = true,
      cells = {"column1", "column2", "column3"},
    },
    {
      cells = {"cell1", "cell2", "cell3"},
    },
    {
      cells = {"cell4", "cell5", "cell6"},
    },
    {
      footer = true,
      cells = {"foot1", "foot2", "foot2"},
    },
  },
})

A table
column1	column2	column3
cell1	cell2	cell3
cell4	cell5	cell6
foot1	foot2	foot2

Shorthand syntax

13

table({
  headers = {"column1", "column2", "column3"},
  rows = {
    {"cell1", "cell2", "cell3"},
    {"cell4", "cell5", "cell6"},
  },
})

column1	column2	column3
cell1	cell2	cell3
cell4	cell5	cell6

Works with pipe characters

14

table({
  rows = {
    {"cell | 1", "cell |} 2", "cell {| 3"},
  },
})

cell \| 1	cell \|} 2	cell {\| 3

Sortable table - note how Bosses sorts alphabetically but Temples sorts by in-game order due to sortValue.

15

table({
  sortable = true,
  headers = {"Temples", "Bosses"},
  rows = {
    {
      {
        content = "Forest Temple",
        sortValue = "1",
      },
      { content = "Gohma" },
    },
    {
      {
        content = "Fire Temple",
        sortValue = "2",
      },
      { content = "Volvagia" },
    },
    {
      {
        content = "Water Temple",
        sortValue = "3",
      },
      { content = "Morpha" },
    },
    {
      {
        content = "Shadow Temple",
        sortValue = "4",
      },
      { content = "Bongo Bongo" },
    },
  },
})

Temples	Bosses
Forest Temple	Gohma
Fire Temple	Volvagia
Water Temple	Morpha
Shadow Temple	Bongo Bongo

Cell spanning multiple columns

16

table({
  headers = {"col1", "col2", "col3", "col4", "col5"},
  rows = {
    {
      {
        colspan = 2,
        content = "spans 2 columns",
      },
      {
        colspan = 3,
        content = "spans 3 columns",
      },
    },
    {
      {
        colspan = -1,
        content = "spans all columns",
      },
    },
  },
})

col1	col2	col3	col4	col5
spans 2 columns		spans 3 columns
spans all columns

Option to hide columns when they're completely empty except for headers/footers

17

table({
  hideEmptyRows = true,
  hideEmptyColumns = true,
  rows = {
    {"row1", "", "row1"},
    {"row2", "", "row2"},
  },
  headers = {"not empty", "empty", "not empty"},
})

not empty	not empty
row1	row1
row2	row2

Option to hide rows when they're completely empty except for headers

18

table({
  hideEmptyRows = true,
  rows = {
    {
      {
        header = true,
        content = "Header1",
      },
      "not empty",
    },
    {
      {
        header = true,
        content = "Header2",
      },
      "",
    },
    {},
  },
})

Header1	not empty

Table styles are applied at the table level. Cell styles can be specified individually, or once for the entire row. The table class and cell class can be overridden.

19

table({
  class = "wikitable custom-element",
  rows = {
    {"centered", "centered"},
    {
      cells = {
        { content = "left-aligned" },
        {
          class = "custom-cell",
          content = "right-aligned",
          styles = { ["text-align"] = "right" },
        },
      },
      styles = { ["text-align"] = "left" },
    },
  },
  styles = {
    ["text-align"] = "center",
    width = "20em",
  },
})

centered	centered
left-aligned	right-aligned

Individual cells subdivided into multiple columns and rows

20

table({
  rows = {
    {
      header = true,
      cells = {"Column1", "Column2", "Column3"},
    },
    {
      "A",
      {
        {"B1"},
        {"B2"},
      },
      "C",
    },
    {
      {
        {"D1", "D2"},
      },
      {
        {"E1"},
        {
          {
            content = "E2",
            header = true,
          },
          "E3",
        },
      },
      {
        {"F1"},
        {"F2"},
        {"F3"},
      },
    },
    {
      {
        {"G1", "G2", "G3"},
      },
      "H",
      {
        {},
      },
    },
  },
  styles = { ["text-align"] = "center" },
})

Column1			Column2		Column3
A			B1		C
A			B2		C
D1	D2		E1		F1
			E2	E3	F2
			E2	E3	F3
G1	G2	G3	H

tabbedTable

tabbedTable(data)

Parameters

data
[headerRows]
Header rows common to every tab.
[headerRows]
Footer rows common to every tab.
tabs
label
Tab label
rows
Table rows for the tab. See table for format.

Returns

A series of wikitables displayed using tabs. Useful for representing data with three dimensions, or data with too many columns.

Examples

#

Input

Result

Tabbed table with shared headers and footers

21

tabbedTable({
  headerRows = {
    {"col1", "col2", "col3"},
  },
  tabs = {
    {
      label = "tab1",
      rows = {
        {"cell1", "cell2", "cell3"},
        {"cell4", "cell5", "cell6"},
      },
    },
    {
      label = "tab2",
      rows = {
        {"cell7", "cell8", "cell9"},
        {"cell10", "cell11", "cell12"},
      },
    },
  },
  footerRows = {
    {"foo12", "foot2", "foot3"},
  },
})

tab1tab2

col1	col2	col3
cell1	cell2	cell3
cell4	cell5	cell6
foo12	foot2	foot3

col1	col2	col3
cell7	cell8	cell9
cell10	cell11	cell12
foo12	foot2	foot3

local utilsPackage = require("Module:UtilsPackage")

return utilsPackage.submodules({
	arg[1] .. "/Tabs",
	arg[1] .. "/Table",
	arg[1] .. "/Navbox",
})