Module:Tab bar

--[=[ Tab bars that emulates an OOUI frameless tab bar

Ideally: * Responsive (ie. they wrap sanely and work on mobile) * Fit in with the OOUI design paradigm * Accessible ]=]

local p = {} --p stands for package local getArgs = require('Module:Arguments').getArgs

--[=[ Generate a tab bar that emulates an OOUI frameless tab bar ]=] function p.tab_bar(frame) local args = getArgs(frame) local outer = mw.html.create('div') :addClass('wst-tabbar') :attr('role', 'tablist') :attr('aria-disabled', 'false')

if args['align'] then outer:css('text-align', args['align']) end local tabIndex = 0 while true do		tabIndex = tabIndex + 1 local link = args['link-' .. tabIndex] local text = args['tab-' .. tabIndex]

-- end of params if link == nil and text == nil then break end local wtext if link ~= nil then if text ~= nil then wtext =  .. text ..  else wtext =  .. link ..  end else wtext = text end local tab = outer:tag('div') :addClass('wst-tabbar-tab') :attr('role', 'tab') :attr('aria-disabled', 'false') local label = tab:tag('span') :addClass('wst-tabbar-label') :wikitext(wtext) local selected = false if args['selected'] then -- explicitly set selected = tonumber(args['selected']) == tabIndex else -- check for a link match selected = link == mw.title.getCurrentTitle.fullText end

if selected then tab:addClass('wst-tabbar-selected') :attr('aria-selected', 'true') else tab:attr('aria-selected', 'false') end outer:wikitext end return outer end

return p