Bürokraten, Oberflächenadministratoren, SMW-Administratoren, SMW-Kuratoren, SMW-Editoren, Oversighter, Administratoren, Widget-Bearbeiter
204.491
Bearbeitungen
(Die Seite wurde neu angelegt: „local p = {} function p.unstrip(frame) return mw.text.unstrip(frame.args[1] or '') end p.helloWorld = function() return 'Hello, world!' end p.justFun = fu…“) |
Keine Bearbeitungszusammenfassung |
||
Zeile 6: | Zeile 6: | ||
p.helloWorld = function() | p.helloWorld = function() | ||
return ' | 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 | end | ||
Bearbeitungen