Template:OOO-Browser: Difference between revisions

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..."
 
mNo edit summary
 
Line 1: Line 1:
<includeonly><div class="ooo-browser">
<includeonly>
<div class="ooo-browser">
 
<div class="ooo-browser__listwrap">
<div class="ooo-browser__list">
<div class="ooo-browser__list">
{{{list|}}}
{{{list|}}}
</div>
</div>
</div>
<div class="ooo-browser__panel">
<div class="ooo-browser__panel">
{{{panels|}}}
{{{panels|}}}
</div>
</div>
</div></includeonly><noinclude>
 
</div>
</includeonly>
 
<noinclude>
== Documentation ==
== Documentation ==
Reusable two-column browser layout.
Reusable two-column browser layout.
Line 39: Line 48:
</pre>
</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>
</noinclude>