Modul:TestTabs: Unterschied zwischen den Versionen

Aus FürthWiki

Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(7 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 6: Zeile 6:


p.helloWorld = function()
p.helloWorld = function()
return [[<style>
local div = mw.html.create( 'details' )
details div {
div
    border-left: 2px solid #000;
    :attr( 'id', 'testdiv' )
    border-right: 2px solid #000;
    :css( 'width', '100%' )
    border-bottom: 2px solid #000;
    :wikitext( 'Some text' )
    padding: 1.5em;
    :tag( 'hr' )
}
return {expand=true, text=div}
 
-- Output: <div id="testdiv" style="width:100%;">Some text<hr /></div>
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
end



Aktuelle Version vom 3. Januar 2024, 13:45 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()
	local div = mw.html.create( 'details' )
div
     :attr( 'id', 'testdiv' )
     :css( 'width', '100%' )
     :wikitext( 'Some text' )
     :tag( 'hr' )
return {expand=true, text=div}
-- Output: <div id="testdiv" style="width:100%;">Some text<hr /></div>
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