Modul:TestTabs

Die Dokumentation für dieses Modul kann unter Modul:TestTabs/Doku erstellt werden

local p = {}

function p.unstrip(frame)
	return mw.text.unstrip(frame.args[1] or '')
end

p.helloWorld = function()
	return [[<style>
details div {
    border-left: 2px solid #000;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    padding: 1.5em;
}

details div > * + * {
    margin-top: 1.5em;
}

details + details {
    margin-top: .5rem;
}

summary {
    list-style: none;
}

summary::-webkit-details-marker {
    display: none;
}

summary {
    border: 2px solid #000;
    padding: .75em 1em;
    cursor: pointer;
    position: relative;
    padding-left: calc(1.75rem + .75rem + .75rem);
}

summary:before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: .75rem;
    content: "↓";
    width: 1.75rem;
    height: 1.75rem;
    background-color: #000;
    color: #FFF;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

details[open] summary {
    background-color: #eee;
}

details[open] summary:before {
    content: "+";
}

summary:hover {
    background-color: #eee;
}
</style>
<details open>
        <summary>
            How do you maen create an accordion?
        </summary>
        <div>
            Easy! As long as you don't have to support IE11 or older browsers you could use <code>&lt;details&gt;</code> and <code>&lt;summary&gt;</code> natively.
        </div>
    </details>
    <details>
        <summary>
            What if I have to support IE11 or older browsers?
        </summary>
        <div>
            No worries. The fallback for these elements is quite good. They will display as open. You won't get the open/close mechanism, but you won't lose any content either.
        </div>
    </details>
    <details>
        <summary>
            What type of content can I have inside one of these?
        </summary>
        <div>
            Almost anything you'd like. The <code>&lt;details&gt;</code> element allows all <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#flow_content" target="_blank">flow content</a>, which is basically everything.
        </div>
    </details>
    <details>
        <summary>
            How does it work?
        </summary>
        <div>
            The <code>&lt;details&gt;</code> element encapsulates the <code>&lt;summary&gt;</code> element. The <code>&lt;summary&gt;</code> becomes the 'label' for the <code>&lt;details&gt;</code> and acts like a button. When clicked, the attribute <code>open</code> is added to the <code>&lt;details&gt;</code> element, making it display. You can therefore style the open and closed states seperately if you'd like.
        </div>
</details>
]]
end

p.justFun = function(a)
	args = a.args
	return 'The name was ' .. tostring(args)
end

p.checkMac = function(a)
	args = a.args
	return 'Your check is Mc' .. args.name
end

p.preprocess = function(a)
	args = a.args
	f = mw.getCurrentFrame()
	--return mw.text.unstrip(a.text)
	return f:preprocess( args.text ) 
end
return p