|
|
| 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><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 |
|
| |
|