Loading history…
Loading history…
| Line 1: | |
| <noinclude> | <noinclude> |
| Collapsible navbox. The header bar '''is''' the toggle — there is no separate | Collapsible navbox. The header bar '''is''' the toggle — there is no separate |
| … 3 unchanged lines … | |
| '''Parameters''' (all named, all must be quoted) | '''Parameters''' (all named, all must be quoted) |
| * <code>title</code> — header content. Any markup: text, images, divs, whatever the header needs. | * <code>title</code> — header content. Any markup: text, images, divs, whatever the header needs. Include <code><span class=\"hw-navbox-arrow\"></span></code> where the toggle arrow should sit. |
| Line 9: | |
| * <code>color</code> — master accent. Anything below that is left out falls back to this. Default <code>#333333</code>. | * <code>color</code> — master accent. Anything below that is left out falls back to this. Default <code>#333333</code>. |
| * <code>border</code> — outer border and header underline. Defaults to <code>color</code>. | * <code>border</code> — outer border and header underline. Defaults to <code>color</code>. |
| … 8 unchanged lines … | |
| * <code>hw-navbox-title</code> — bold, 1.15em | * <code>hw-navbox-title</code> — bold, 1.15em |
| * <code>hw-navbox-sub</code> — 0.82em, slightly dimmed | * <code>hw-navbox-sub</code> — 0.82em, slightly dimmed |
| * <code>hw-navbox-arrow</code> — the toggle arrow. Place it anywhere inside <code>title</code>; it points down when collapsed and up when expanded. | |
| Line 21: | |
| '''Example''' — icon stacked above a centred title | '''Example''' — icon stacked above a centred title |
| {{Navbox|color="#000000"|title="<div style=\"text-align: center;\">![[icon.svg|56px|alt=Icon]]<div class=\"hw-navbox-title\">Heading</div><div class=\"hw-navbox-sub\">Subheading</div></div>"}} | {{Navbox|color="#000000"|title="<div style=\"text-align: center;\">![[icon.svg|56px|alt=Icon]]<div class=\"hw-navbox-title\">Heading<span class=\"hw-navbox-arrow\"></span></div><div class=\"hw-navbox-sub\">Subheading</div></div>"}} |
| Line 25: | |
| |- | |- |
| | Row label | | Row label |
| | Row content | | Row content |
| {{Endnavbox}} | {{Endnavbox}} |
| Quotes inside a quoted parameter are escaped as <code>\"</code>. The arrow points down | Quotes inside a quoted parameter are escaped as <code>\"</code>. The arrow is driven by the |
| when collapsed and up when expanded, driven by the <code>hw-collapsed</code> class the | <code>hw-collapsed</code> class the engine sets on the collapsible div. Leave the span out |
| engine sets on the collapsible div. | and the navbox still works, but nothing marks it as collapsible. |
| Line 33: | |
| </noinclude><includeonly><style> | </noinclude><includeonly><style> |
| .hw-navbox { border-width: 2px; border-style: solid; border-collapse: collapse; margin: 0.4rem 0; } | .hw-navbox { border-width: 2px; border-style: solid; border-collapse: collapse; margin: 0.4rem 0; } |
| .hw-navbox-head { position: relative; box-sizing: border-box; padding: 10px 34px; user-select: none; cursor: pointer; border-bottom-width: 2px; border-bottom-style: solid; } | .hw-navbox-head { box-sizing: border-box; padding: 10px 14px; user-select: none; cursor: pointer; border-bottom-width: 2px; border-bottom-style: solid; } |
| Line 36: | |
| .hw-navbox-title { font-weight: bold; font-size: 1.15em; } | .hw-navbox-title { font-weight: bold; font-size: 1.15em; } |
| .hw-navbox-sub { font-size: 0.82em; opacity: 0.85; } | .hw-navbox-sub { font-size: 0.82em; opacity: 0.85; } |
| .hw-navbox-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 1.15em; line-height: 1; } | .hw-navbox-arrow { display: inline-block; margin-left: 0.35em; font-size: 0.75em; line-height: 1; vertical-align: middle; } |
| Line 39: | |
| .hw-navbox-arrow::after { content: "\25B4"; } | .hw-navbox-arrow::after { content: "\25B4"; } |
| .hw-navbox:has(> .hw-collapsible.hw-collapsed) .hw-navbox-arrow::after { content: "\25BE"; } | .hw-navbox:has(> .hw-collapsible.hw-collapsed) .hw-navbox-arrow::after { content: "\25BE"; } |
| </style><div class="hw-navbox" style="border-color: {{{border|{{{color|#333333}}}}}};"><div class="hw-customtoggle-{{{_uid}}} hw-navbox-head" style="background: {{{headerbg|transparent}}}; color: {{{textcolor|{{{color|#333333}}}}}}; border-bottom-color: {{{border|{{{color|#333333}}}}}};">{{{title|Navbox}}}<span class="hw-navbox-arrow"></span></div> | </style><div class="hw-navbox" style="border-color: {{{border|{{{color|#333333}}}}}};"><div class="hw-customtoggle-{{{_uid}}} hw-navbox-head" style="background: {{{headerbg|transparent}}}; color: {{{textcolor|{{{color|#333333}}}}}}; border-bottom-color: {{{border|{{{color|#333333}}}}}};">{{{title|Navbox}}}</div> |
| Line 42: | |
| <div class="hw-collapsible hw-collapsed" id="hw-customcollapsible-{{{_uid}}}"> | <div class="hw-collapsible hw-collapsed" id="hw-customcollapsible-{{{_uid}}}"> |
| {|style="width: 100%; border-collapse: collapse; {{{style|}}}" | {|style="width: 100%; border-collapse: collapse; {{{style|}}}" |
| </includeonly> | </includeonly> |