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-active to 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>
}}