Template:OOO-Browser: Difference between revisions

VisualWikitext

Latest revision as of 11:48, 5 March 2026

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

@@ Line 1: / Line 1: @@
-<includeonly><div class="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>
+</div>
+</includeonly>
+<noinclude>
 == Documentation ==
 Reusable two-column browser layout.
@@ Line 39: / Line 48: @@
 </pre>
-=== TemplateData ===
+[[Category:OOO templates]]
-<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>