Character Vault
Any Concept / Any System
Compendium
Your System Come To Life
Roll20 for Android
Streamlined for your Tablet
Roll20 for iPad
Streamlined for your Tablet

Personal tools

PUGjs

From Roll20 Wiki

Revision as of 08:17, 21 February 2022 by Andreas J. (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Main Page: Sheet Author Tips#Frameworks

PUG is a template engine for generating HTML, where you can use various features & tool to write code more efficiently, such as using variables and loops, and has a simpler syntax.

//- Comment that only appears in PUG
- var pages = ["character", "skills", "inventory", "magic", "familiar", "background", "campaign", "vehicle", "settings"];
div
  span Page selection
  select(name="attr_sheetTab")
    each tab in pages
      option(value=`${tab}`)= tab[0].toUpperCase() + tab.slice(1)

Result HTML:

<div>
     <span>Page selection</span><select name="attr_sheetTab">
        <option value="character">Character</option>
        <option value="skills">Skills</option>
        <option value="inventory">Inventory</option>
        <option value="magic">Magic</option>
        <option value="familiar">Familiar</option>
        <option value="background">Background</option>
        <option value="campaign">Campaign</option>
        <option value="vehicle">Vehicle</option>
        <option value="settings">Settings</option>
    </select>
</div>

PUGjs.org

Examples, Sheets, & Sheet template made with PUG:

See Also