Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Module:Flexbox: Difference between revisions

From Credoth
mNo edit summary
mNo edit summary
Line 1: Line 1:
local mArguments --initialize lazily
local getArgNums = require('Module:Common').getArgNums
local p = {}  -- Initialize the p table to hold functions
function p._flexbox(args, frame)
function p._flexbox(args, frame)
     if not args then
     if not args then

Revision as of 16:48, 28 December 2024

Documentation for this module may be created at Module:Flexbox/doc

local mArguments --initialize lazily
local getArgNums = require('Module:Common').getArgNums
local p = {}  -- Initialize the p table to hold functions

function p._flexbox(args, frame)
    if not args then
        return 'Missing arguments'
    end

    local html = mw.html.create('div'):addClass('template-flexbox')
    local columns = args['columns'] or 3  -- Default to 3 columns if not passed
    local rows = args['rows']
    local gap = args['gap'] or '0.5rem'
    local direction

    if columns then
        direction = 'row'
    elseif rows then
        direction = 'column'
    end

    html:css('--template-flexbox-columns', columns)  -- Set the number of columns
    html:css('--template-flexbox-direction', direction)
    html:css('--template-flexbox-gap', gap)

    for i, _ in ipairs(getArgNums('content', args)) do
        local num = tostring(i)
        local content = args['content' .. num]
        if not content then return end

        local item = mw.html.create('div'):addClass('template-flexbox-item')
        local span = args['span' .. num] or '1'
        item:css('--template-flexbox-item-span', span)
        item:css('--template-flexbox-item-width', 'calc(' .. span .. ' * 100% / ' .. columns .. ')')  -- Adjust the width based on span and columns
        item:wikitext(content)
        html:node(item)
    end

    return frame:extensionTag {
        name = 'templatestyles', args = { src = 'Module:Flexbox/styles.css' }
    } .. tostring(html)
end