Module:UtilsLayout

From Zelda Wiki, the Zelda encyclopedia
Jump to navigation Jump to search
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.
    [fixedWidth]
    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.
    [fixedHeight]
    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

#InputResult
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
fixedtWidth and fixedHeight 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" },
  }
)
ST Engine Icon.pngST Passenger Car Icon.png
Engines
Passenger Cars

table

table(data)

Parameters

  • data
    A Lua table representing the desired wikitable.
    [sortable]
    boolean{ number }
    If true, renders a table that can be sorted by any of its columns.
    An array of column indices to be made sortable.
    [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.
    [id]
    Sets the id attribute on the row element which makes the row clickable if MediaWiki:Gadget-Tables is enabled.
    [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]
    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.
    [id]
    Sets the id attribute on the row element which makes the row clickable if MediaWiki:Gadget-Tables is enabled.
    [styles]
    Key-value pairs of CSS properties to apply to each cell in the row.
    [cells]

Returns

Examples

#InputResult
A table with header row, footer row, and caption
12
table({
  caption = "A table",
  rows = {
    {
      header = true,
      cells = {"column1", "column2", "column3"},
    },
    {
      id = "row-1",
      cells = {"cell1", "cell2", "cell3"},
    },
    {
      id = "row-2",
      cells = {"cell4", "cell5", "cell6"},
    },
    {
      footer = true,
      cells = {"foot1", "foot2", "foot2"},
    },
  },
})
A table
column1column2column3
cell1cell2cell3
cell4cell5cell6
foot1foot2foot2
Shorthand syntax
13
table({
  headers = {"column1", "column2", "column3"},
  rows = {
    {"cell1", "cell2", "cell3"},
    {"cell4", "cell5", "cell6"},
  },
})
column1column2column3
cell1cell2cell3
cell4cell5cell6
Works with pipe characters
14
table({
  rows = {
    {"cell | 1", "cell |} 2", "cell {| 3"},
  },
})
cell | 1cell |} 2cell {| 3
Sortable table - note how Bosses sorts alphabetically but Temples sorts by in-game order due to sortValue.
15
table({
  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" },
    },
  },
  headers = {"Temples", "Bosses", "Unsortable"},
  sortable = {1, 2},
})
TemplesBossesUnsortable
Forest TempleGohma
Fire TempleVolvagia
Water TempleMorpha
Shadow TempleBongo 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",
      },
    },
  },
})
col1col2col3col4col5
spans 2 columnsspans 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 emptynot empty
row1row1
row2row2
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",
      },
      "",
    },
    {},
  },
})
Header1not 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",
  },
})
centeredcentered
left-alignedright-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" },
})
Column1Column2Column3
AB1C
B2
D1D2E1F1
E2E3F2
F3
G1G2G3H

tabbedTable

tabbedTable(data)

Parameters

Returns

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

Examples

#InputResult
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
col1col2col3
cell1cell2cell3
cell4cell5cell6
foo12foot2foot3
col1col2col3
cell7cell8cell9
cell10cell11cell12
foo12foot2foot3
local utilsPackage = require("Module:UtilsPackage")

return utilsPackage.submodules({
	arg[1] .. "/Tabs",
	arg[1] .. "/Table",
})
Retrieved from "https://zeldawiki.wiki/w/index.php?title=Module:UtilsLayout&oldid=971302"