Template:OOO-Browser
Documentation
Reusable two-column browser layout.
- Left column: clickable items (you provide the markup in
|list=) - Right column: panels (you provide the markup in
|panels=)
This template only renders layout. It does not generate items or panels by itself.
Required classes
- Items (left):
ooo-browser__item - Panels (right):
ooo-browser__info - Default visible: add
is-activeto one item + one panel
Items must also have data-target="panelId" and panels must have id="panelId".
Example
{{OOO-Browser
|list=
<div class="ooo-browser__item is-active" data-target="woodblock">Wood Block</div>
<div class="ooo-browser__item" data-target="woodfloor">Wood Floor</div>
|panels=
<div id="woodblock" class="ooo-browser__info is-active">
{{OOOInfoBox|type=Buildings|art=400001}}
</div>
<div id="woodfloor" class="ooo-browser__info">
{{OOOInfoBox|type=Buildings|art=400002}}
</div>
}}
TemplateData
Two-column browser layout: left list + right details panel. Content is provided via parameters.
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| Left list | list | Markup for the clickable list. Use class ooo-browser__item and data-target pointing to a panel id. | Content | required |
| Right panels | panels | Markup for panels. Each panel must have class ooo-browser__info and an id matching a list item’s data-target. One should have is-active by default. | Content | required |