Module:UtilsLayout/Tabs/Documentation

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

This is the documentation page for Module:UtilsLayout/Tabs

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
Retrieved from "https://zeldawiki.wiki/w/index.php?title=Module:UtilsLayout/Tabs/Documentation&oldid=791489"