View source for Template:OOO-Browser

<includeonly>
<div class="ooo-browser">

<div class="ooo-browser__listwrap">
<div class="ooo-browser__list">
{{{list|}}}
</div>
</div>

<div class="ooo-browser__panel">
{{{panels|}}}
</div>

</div>
</includeonly>

<noinclude>
== Documentation ==
Reusable two-column browser layout.

* Left column: clickable items (you provide the markup in <code>|list=</code>)
* Right column: panels (you provide the markup in <code>|panels=</code>)

This template only renders layout. It does not generate items or panels by itself.

=== Required classes ===
* Items (left): <code>ooo-browser__item</code>
* Panels (right): <code>ooo-browser__info</code>
* Default visible: add <code>is-active</code> to one item + one panel

Items must also have <code>data-target="panelId"</code> and panels must have <code>id="panelId"</code>.

=== Example ===
<pre>
{{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>
}}
</pre>

[[Category:OOO templates]]
</noinclude>