Template:NavboxGroup/doc

Usage

With items as content

With only items present as content, a horizontal content formation is assumed.

{{NavboxGroup|Title here
  |{{NavboxItem|Laser Blaster}}
  |{{NavboxItem|Heavy Laser Blaster}}
}}

↓

@@__NavboxGroupMarker__@@

Title here

Laser Blaster•Heavy Laser Blaster

↓

'"`UNIQ--templatestyles-00000005-QINU`"'@@__NavboxGroupMarker__@@<div class="navbox-group navbox-group-with-items">
    <div class="navbox-group-title" style="
      background-color: color-mix(in srgb, var(--gray--light) 40%, transparent);
    ">Title here</div>
    <div class="navbox-group-content" style="flex-direction: row;
gap: .25rem;
padding: 0 .4rem;
align-items: center;"><span class="navbox-item" style="
  white-space: pre;
">[[Laser Blaster]]</span><span style="
    color: var(--gray--light); 
    /* more compact */
    margin: 0 -.1em;
">•</span><span class="navbox-item" style="
  white-space: pre;
">[[Heavy Laser Blaster]]</span></div>
</div>

With groups as content

With any group present as part of the content, a vertical content formation is assumed.

{{NavboxGroup|Title here
  |{{NavboxGroup|Subtitle here 1}}
  |{{NavboxGroup|Subtitle here 2}}
}}

↓

@@__NavboxGroupMarker__@@

Title here

@@__NavboxGroupMarker__@@

Subtitle here 1

@@__NavboxGroupMarker__@@

Subtitle here 2

↓

'"`UNIQ--templatestyles-00000010-QINU`"'@@__NavboxGroupMarker__@@<div class="navbox-group navbox-group-with-groups">
    <div class="navbox-group-title" style="
      background-color: color-mix(in srgb, var(--gray--light) 40%, transparent);
    ">Title here</div>
    <div class="navbox-group-content" style="flex-direction: column;
gap: .25rem;
padding-left: .25rem;">'"`UNIQ--templatestyles-0000000E-QINU`"'@@__NavboxGroupMarker__@@<div class="navbox-group navbox-group-with-items">
    <div class="navbox-group-title" style="
      background-color: color-mix(in srgb, var(--gray--light) 40%, transparent);
    ">Subtitle here 1</div>
    <div class="navbox-group-content" style="flex-direction: row;
gap: .25rem;
padding: 0 .4rem;
align-items: center;"></div>
</div>'"`UNIQ--templatestyles-0000000F-QINU`"'@@__NavboxGroupMarker__@@<div class="navbox-group navbox-group-with-items">
    <div class="navbox-group-title" style="
      background-color: color-mix(in srgb, var(--gray--light) 40%, transparent);
    ">Subtitle here 2</div>
    <div class="navbox-group-content" style="flex-direction: row;
gap: .25rem;
padding: 0 .4rem;
align-items: center;"></div>
</div></div>
</div>

Other

Script used to generate a bunch of parameters:

Code

(() => {
    let count = 100;
    let startFrom = 2;

    let items = [];
    let paramOrderItems = [];
    for (let i = startFrom; i <= count; i++) {
        const isFirst = i === startFrom;
        const isLast = i === count;

        const required = isFirst;
        const suggested = !isFirst;
        const itemName = `${i}`;
        items.push(`"${itemName}": { "label": "Item", "description": "An item to display.", "type": "content", "required": ${required}, "suggested": ${suggested} }${isLast ? '' : ','}`)
        paramOrderItems.push(`"${itemName}"`)
    }

    items.push('');
    items.push(`"paramOrder": [
${paramOrderItems.join(",\n")}
],`)
    download(items.join('\n'), 'res.txt', 'text')

    function download(content, filename, contentType) {
        if (!contentType) contentType = 'application/octet-stream';
        var a = document.createElement('a');
        var blob = new Blob([content], { 'type': contentType });
        a.href = window.URL.createObjectURL(blob);
        a.download = filename;
        a.click();
    }
})();