Tattecko at 11:48, 5 March 2026

2026-03-05T11:48:57Z

@@ Line 1: / Line 1: @@
-<includeonly><div class="ooo-browser">
+<includeonly>
 <div class="ooo-browser__list">
 {{{list|}}}
 </div>
 <div class="ooo-browser__panel">
 {{{panels|}}}
 </div>
 </div></includeonly><noinclude>
 == Documentation ==
 Reusable two-column browser layout.
@@ Line 39: / Line 48: @@
 </pre>
-=== TemplateData ===
+[[Category:OOO templates]]
 </noinclude>

Tattecko: Created page with "

{{{list|}}}

{{{panels|}}}

== 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. === R..."

2026-03-04T19:36:45Z

Created page with "<includeonly><div class="ooo-browser"> <div class="ooo-browser__list"> {{{list|}}} </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. === R..."

New page

<includeonly><div class="ooo-browser">
<div class="ooo-browser__list">
{{{list|}}}
</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>

=== TemplateData ===
<templatedata>
{
"description": "Two-column browser layout: left list + right details panel. Content is provided via parameters.",
"params": {
"list": {
"label": "Left list",
"description": "Markup for the clickable list. Use class ooo-browser__item and data-target pointing to a panel id.",
"type": "content",
"required": true
},
"panels": {
"label": "Right panels",
"description": "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.",
"type": "content",
"required": true
}
}
}
</templatedata>
</noinclude>

Template:OOO-Browser - Revision history

Tattecko at 11:48, 5 March 2026