Modul:TestTabs: Unterschied zwischen den Versionen

Aus FürthWiki

keine Bearbeitungszusammenfassung
(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 'Hello, world!'
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
end