nml/readme/Basic Layouts.html

1 line
7.8 KiB
HTML
Raw Normal View History

2024-11-03 14:12:43 +01:00
<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>NML | Basic Layouts</title><link rel="stylesheet" href="../style.css"></head><body><div class="layout"><input id="navbar-checkbox" class="toggle" type="checkbox" style="display:none" checked><div id="navbar"><ul><li class="navbar-entry"><a href="Getting Started.html">Getting Started</a></li><li class="navbar-entry"><a href="Sections.html">Sections</a></li><li class="navbar-entry"><a href="Variables.html">Variables</a></li><li class="navbar-entry"><a href="References.html">References</a></li><li class="navbar-entry"><a href="Imports.html">Imports</a></li><li class="navbar-entry"><a href="Raw.html">Raw</a></li><li class="navbar-entry"><a href="Comments.html">Comments</a></li><li><details><summary class="navbar-category">External Tools</summary><ul><li class="navbar-entry"><a href="Graphviz.html">Graphviz</a></li><li class="navbar-entry"><a href="LaTeX.html">LaTeX</a></li></ul></details></li><li><details><summary class="navbar-category">Blocks</summary><ul><li class="navbar-entry"><a href="Blockquotes.html">Blockquotes</a></li><li class="navbar-entry"><a href="Code.html">Code</a></li><li class="navbar-entry"><a href="Lists.html">Lists</a></li></ul></details></li><li><details><summary class="navbar-category">Lua</summary><ul><li class="navbar-entry"><a href="Lua Basics.html">Lua</a></li></ul></details></li><li><details open><summary class="navbar-category">Styles</summary><ul><li class="navbar-entry"><a href="Basic Styles.html">Basic</a></li><li class="navbar-entry-current"><a href="Basic Layouts.html">Layouts</a></li><li class="navbar-entry"><a href="User-Defined Styles.html">User-Defined</a></li></ul></details></li></ul></div><label for="navbar-checkbox" class="navbar-checkbox-label">&#9776;</label><div class="content"><div class="toc"><span>Table of Content</span><ol><li value="1"><a href="#Layouts">Layouts</a></li><li value="2"><a href="#Available_layouts">Available layouts</a></li><ol><li value="1"><a href="#Centered">Centered</a></li><li value="2"><a href="#Split">Split</a></li><li value="3"><a href="#Spoiler">Spoiler</a></li></div><h1 id="Layouts">1. Layouts <a class="section-link" href="#Layouts">🔗 </a> </h1><p>You can create layout blocks by using the following tokens:</p><ul><li><a class="inline-code"><code><span style="color:#c0c5ce;">#+LAYOUT_BEGIN &lt;layout_name&gt;</span></code></a> Starts layout <em>&lt;layout_name&gt;</em></li><li><a class="inline-code"><code><span style="color:#c0c5ce;">#+LAYOUT_NEXT</span></code></a> Advances layout to the next block</li><li><a class="inline-code"><code><span style="color:#c0c5ce;">#+LAYOUT_END</span></code></a> Ends last created layout</li></ul><p>Here's an example of what you can do using layouts (with flashy colors for show):</p><div class="split-container"><div class="split" style=background-color:#F00;flex:0.5><p>First</p><div class="centered" style=background-color:#FF0><p>Second</p></div></div><div class="split" style=background-color:#00F><p>Third</p><div class="split-container"><div class="split" style=background-color:#0FF><p>Fourth</p></div><div class="split" style=background-color:#0F0><p>Fifth</p></div></div></div></div><p>Given by the following code:</p><div class="code-block"><div class="code-block-content"><table cellspacing="0"><tr><td class="code-block-gutter"><pre><span>1</span></pre></td><td class="code-block-line"><pre><span style="color:#c0c5ce;">#+LAYOUT_BEGIN[style=background-color:#F00;flex:0.5] Split</span></pre></td></tr><tr><td class="code-block-gutter"><pre><span>2</span></pre></td><td class="code-block-line"><pre><span style="color:#c0c5ce;">First</span></pre></td></tr><tr><td class="code-block-gutter"><pre><span>3</span></pre></td><td class="code-block-line"><pre><span style="color:#c0c5ce;"> #+LAYOUT_BEGIN[style=background-color:#FF0] Centered</span></pre></td></tr><tr><td class="code-block-gutter"><pre><span>4</span></pre></td><td class="code-block-line"><pre><span style="color:#c0c5ce;"> Second</span></pre></td></tr><tr><td class="code-block-gutter"><pre><span>5</