July 25, 2020

👭 Knight Challenge #11 👬

Want to try your hand at these challenges? There's a couple of things you can do!
From writing, to research, to images, find your preferred way to contribute with our eleventh theme: Couples!

Latest Announcements

Module:UtilsLayout

From Zelda Wiki, the Zelda encyclopedia
Jump to: navigation, search

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
InputResult
tabs({
  {
    content = "Content1",
    label = "Tab1",
  },
  {
    content = "Content2",
    label = "Tab2",
  },
})
Tab1Tab2
Content1
Content2
tabs(
  {
    {
      content = "Content1",
      label = "Tab1",
    },
    {
      content = "Content2",
      label = "Tab2",
    },
  },
  {
    tabOptions = { stretch = true },
  }
)
Tab1Tab2
Content1
Content2
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.
tabs({
  {
    content = "Content",
    label = "Single Tab",
  },
})
Single Tab
Content
tabs(
  {
    {
      content = "Content",
      label = "Single Tab",
    },
  },
  {
    tabOptions = { collapse = true },
  }
)
Content
fixedContentWidth and fixedContentHeight determine how the overall tab container is sized.
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
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
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
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
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.
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]
    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.
    [styles]
    Key-value pairs of CSS properties to apply to the <table> element.
    [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]
    [styles]
    Key-value pairs of CSS properties to apply to the cell. Overrides any conflicting row styles.
    content
    stringrows
    Wikitext content for the cell.
    Subvidisions for the cell. Think of it as a table within a table.
Returns
Examples
InputResult
Basic table with header and footer
table({
  rows = {
    {
      header = true,
      cells = {"column1", "column2", "column3"},
    },
    {
      cells = {"cell1", "cell2", "cell3"},
    },
    {
      cells = {"cell4", "cell5", "cell6"},
    },
    {
      footer = true,
      cells = {"foot1", "foot2", "foot2"},
    },
  },
})
column1column2column3
cell1cell2cell3
cell4cell5cell6
foot1foot2foot2
Shorthand syntax
table({
  headers = {"column1", "column2", "column3"},
  rows = {
    {"cell1", "cell2", "cell3"},
  },
})
column1column2column3
cell1cell2cell3
Works with pipe characters
table({
  rows = {
    {"cell | 1", "cell |} 2", "cell {| 3"},
  },
})
cell | 1cell |} 2cell {| 3
Cell spanning multiple columns
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
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
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.
table({
  rows = {
    {"centered", "centered"},
    {
      cells = {
        { content = "left-aligned" },
        {
          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
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
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",
	arg[1] .. "/Navbox",
})
Retrieved from "https://zelda.gamepedia.com/Module:UtilsLayout?oldid=836300"