Modul:TestTabs: Unterschied zwischen den Versionen

Aus FürthWiki
Zur Navigation springen Zur Suche springen
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 6: Zeile 6:


p.helloWorld = function()
p.helloWorld = function()
return [[<style>
-- create the table's header row
details div {
local tbl = mw.html.create('table')
    border-left: 2px solid #000;
:tag('tr')
    border-right: 2px solid #000;
:tag('th')
    border-bottom: 2px solid #000;
:wikitext("things that aren't as cute as kittens")
    padding: 1.5em;
:done()
}
:done()
-- now the current location in tbl is directly within the <table> tag


details div > * + * {
-- add further rows to the table
    margin-top: 1.5em;
for _, v in ipairs({ 'bunnies', 'puppies' }) do
}
tbl:tag('tr')
 
:tag('td')
details + details {
:wikitext(v)
    margin-top: .5rem;
end
}
return 'Knox off'
 
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
end



Version vom 3. Januar 2024, 13:28 Uhr

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()
	-- create the table's header row
local tbl = mw.html.create('table')
:tag('tr')
	:tag('th')
		:wikitext("things that aren't as cute as kittens")
	:done()
:done()
-- now the current location in tbl is directly within the <table> tag

-- add further rows to the table
for _, v in ipairs({ 'bunnies', 'puppies' }) do
	tbl:tag('tr')
		:tag('td')
			:wikitext(v)
end
	return 'Knox off'
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