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><details></code> and <code><summary></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><details></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><details></code> element encapsulates the <code><summary></code> element. The <code><summary></code> becomes the 'label' for the <code><details></code> and acts like a button. When clicked, the attribute <code>open</code> is added to the <code><details></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