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.

  [collapse]

  If truthy, tabs will not be rendered if there is only one tab. The content of that tab will simply be rendered instead.

  [format="\"top\""]

  If top, the tabs are placed above their content. If bottom, then the opposite.

  [align="\"left\""]

  Horizontal alignment for tabs and their content.

  [columns]

  If specified, the tabs will attempt to arrange themselves in N columns of equal width.

  [fixedWidth]

  If truthy, the tab container will always assume the width of the largest tab (as opposed to the width of the current tab).

Returns

• HTML markup rendering tabs.

Examples

#	Input	Result
1	tabs({ { content = "Content1", label = "Tab1", }, { content = "Content2", label = "Tab2", }, })	Tab1Tab2 Content1 Content2
2	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", format = "bottom", default = 2, } )	Content1 Content2 Content3 Tab1Tab2Tab3
3	tabs({ { content = "Content", label = "Single Tab", }, })	Single Tab Content
4	tabs( { { content = "Content", label = "Single Tab", }, }, { collapse = true } )	Content

---

local p = {}
local h = {}

function p.tabs(data, options)
	local options = options or {}
	local format = options.format or "top"
	local align = options.align or "left"
	local columns = options.columns
	local collapse = options.collapse
	local defaultTab = options.default or 1
	local fixedWidth = options.fixedWidth
	
	if #data == 1 and collapse then
		return data[1].content
	end
	
	local tabContainer = h.tabContainer(data, defaultTab, format, columns)
	local tabContents = h.tabContents(data, defaultTab, fixedWidth)
	local html = mw.html.create("div")
		:css("text-align", align)
	
	if format == "top" then
		html:node(tabContainer)
			:node(tabContents)
	else
		html:node(tabContents)
			:node(tabContainer)
	end
	return tostring(html)
end

function h.tabContainer(data, defaultTab, format, columns)
	local tabContainer = mw.html.create("div")
		:addClass("tabcontainer tabcontainer-" .. format)
	
	for i, tabData in ipairs(data) do
		local tab = mw.html.create("span")
			:addClass("tab explain")
			:attr("title", tabData.tooltip)
			:wikitext(tabData.label)
		if i == defaultTab then
			tab:addClass("active")
		end
		if columns then
			tab:addClass("tab--columns")
			tab:css({
				["max-width"] = "calc(100%/"..columns.." - "..columns.."%)"
			})
		end
		tabContainer:node(tab)
	end
	return tabContainer
end

function h.tabContents(data, defaultTab, fixedWidth)
	local tabContents = mw.html.create("div")
		:addClass("tabcontents")
		
	if fixedWidth then
		tabContents:addClass("tabcontents--fixed-width")
	end
		
	for i, tabData in ipairs(data) do
		local content = mw.html.create("div")
			:addClass("content")
			:wikitext(tabData.content)
		if i == defaultTab then
			content:addClass("content--active")
		end
		tabContents:node(content)
	end
	return tabContents
end

p.Schemas = {
	tabs = {
		data = {
			type = "array",
			required = true,
			items = {
				type = "record",
				properties = {
					{
						name = "label",
						type = "string",
						required = true,
						desc = "Button text for the tab."
					},
					{
						name = "tooltip",
						type = "string",
						desc = "Tooltip for the tab button",
					},
					{
						name = "content",
						type = "string",
						required = true,
						desc = "Content for the tab.",
					},
				}
			}
		},
		options = {
			type = "record",
			properties = {
				{
					name = "default",
					type = "number",
					default = 1,
					desc = "Index of default tab.",
				},
				{
					name = "collapse",
					type = "boolean",
					desc = "If truthy, tabs will not be rendered if there is only one tab. The content of that tab will simply be rendered instead."
				},
				{
					name = "format",
					type = "string",
					enum = {"top", "bottom"},
					default = mw.dumpObject("top"),
					desc = "If <code>top</code>, the tabs are placed above their content. If <code>bottom</code>, then the opposite."
				},
				{
					name = "align",
					type = "string",
					enum = {"left", "center", "right"},
					default = mw.dumpObject("left"),
					desc = "Horizontal alignment for tabs and their content.",
				},
				{
					name = "columns",
					type = "number",
					desc = "If specified, the tabs will attempt to arrange themselves in N columns of equal width."
				},
				{
					name = "fixedWidth",
					type = "boolean",
					desc = "If truthy, the tab container will always assume the width of the largest tab (as opposed to the width of the current tab)."
				},
			}
		},
	}
}

p.Documentation = {
	tabs = {
		params = {"data", "options"},
		returns = "HTML markup rendering tabs.",
		cases = {
			resultOnly = true,
			{
				args = {
					{
						{
							label = "Tab1",
							content = "Content1",
						},
						{
							label = "Tab2",
							content = "Content2"
						},
					},
				}
			},
			{
				args = {
					{
						{
							label = "Tab1",
							tooltip = "This is the first tab.",
							content = "Content1"
						},
						{
							label = "Tab2",
							tooltip = "This is the second tab.",
							content = "Content2"
						},
						{
							label = "Tab3",
							tooltip = "This is the third tab.",
							content = "Content3"
						}
					},
					{
						format = "bottom",
						align = "center",
						default = 2,
					}
				}
			},
			{
				args = {
					{{ label = "Single Tab", content = "Content" }}
				}
			},
			{
				args = {
					{{ label = "Single Tab", content = "Content" }},
					{ collapse = true }
				}
			},
		}
	}
}

return p