{"route":"/en-US-v0.13.1/reference/layout/direction/","title":"Direction","description":"Documentation for the Direction type.","part":null,"outline":[{"id":"summary","name":"Summary","children":[]},{"id":"definitions","name":"Definitions","children":[{"id":"definitions-axis","name":"Axis","children":[]},{"id":"definitions-start","name":"Start","children":[]},{"id":"definitions-end","name":"End","children":[]},{"id":"definitions-inv","name":"Inverse","children":[]}]}],"body":{"kind":"type","content":{"name":"direction","title":"Direction","keywords":[],"oneliner":"The four directions into which content can be laid out.","details":"<p>The four directions into which content can be laid out.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code>ltr</code>: Left to right.</li>\n<li><code>rtl</code>: Right to left.</li>\n<li><code>ttb</code>: Top to bottom.</li>\n<li><code>btt</code>: Bottom to top.</li>\n</ul>\n<p>These values are available globally and\nalso in the direction type's scope, so you can write either of the following\ntwo:</p>\n<div class=\"previewed-code\"><pre><code><span class=\"typ-func\">#</span><span class=\"typ-func\">stack</span><span class=\"typ-punct\">(</span>dir<span class=\"typ-punct\">:</span> rtl<span class=\"typ-punct\">)</span><span class=\"typ-punct\">[</span>A<span class=\"typ-punct\">]</span><span class=\"typ-punct\">[</span>B<span class=\"typ-punct\">]</span><span class=\"typ-punct\">[</span>C<span class=\"typ-punct\">]</span>\n<span class=\"typ-func\">#</span><span class=\"typ-func\">stack</span><span class=\"typ-punct\">(</span>dir<span class=\"typ-punct\">:</span> direction<span class=\"typ-punct\">.</span>rtl<span class=\"typ-punct\">)</span><span class=\"typ-punct\">[</span>A<span class=\"typ-punct\">]</span><span class=\"typ-punct\">[</span>B<span class=\"typ-punct\">]</span><span class=\"typ-punct\">[</span>C<span class=\"typ-punct\">]</span>\n</code></pre><div class=\"preview\"><img src=\"/en-US-v0.13.1/assets/e37ad93d1dfa28b65c7fc44b44b8d7d3.png\" alt=\"Preview\"></div></div>","constructor":null,"scope":[{"path":["direction"],"name":"axis","title":"Axis","keywords":[],"oneliner":"The axis this direction belongs to, either `{\"horizontal\"}` or","element":false,"contextual":false,"deprecation":null,"details":"<p>The axis this direction belongs to, either <code><span class=\"typ-str\">&quot;horizontal&quot;</span></code> or\n<code><span class=\"typ-str\">&quot;vertical&quot;</span></code>.</p>","example":"<div class=\"previewed-code\"><pre><code><span class=\"typ-pol\">#</span><span class=\"typ-pol\">ltr</span><span class=\"typ-punct\">.</span><span class=\"typ-func\">axis</span><span class=\"typ-punct\">(</span><span class=\"typ-punct\">)</span> <span class=\"typ-escape\">\\</span>\n<span class=\"typ-pol\">#</span><span class=\"typ-pol\">ttb</span><span class=\"typ-punct\">.</span><span class=\"typ-func\">axis</span><span class=\"typ-punct\">(</span><span class=\"typ-punct\">)</span>\n</code></pre><div class=\"preview\"><img src=\"/en-US-v0.13.1/assets/26b36c48fb881b3e5df87cafa4a96644.png\" alt=\"Preview\"></div></div>","self":true,"params":[],"returns":["str"],"scope":[]},{"path":["direction"],"name":"start","title":"Start","keywords":[],"oneliner":"The start point of this direction, as an alignment.","element":false,"contextual":false,"deprecation":null,"details":"<p>The start point of this direction, as an alignment.</p>","example":"<div class=\"previewed-code\"><pre><code><span class=\"typ-pol\">#</span><span class=\"typ-pol\">ltr</span><span class=\"typ-punct\">.</span><span class=\"typ-func\">start</span><span class=\"typ-punct\">(</span><span class=\"typ-punct\">)</span> <span class=\"typ-escape\">\\</span>\n<span class=\"typ-pol\">#</span><span class=\"typ-pol\">rtl</span><span class=\"typ-punct\">.</span><span class=\"typ-func\">start</span><span class=\"typ-punct\">(</span><span class=\"typ-punct\">)</span> <span class=\"typ-escape\">\\</span>\n<span class=\"typ-pol\">#</span><span class=\"typ-pol\">ttb</span><span class=\"typ-punct\">.</span><span class=\"typ-func\">start</span><span class=\"typ-punct\">(</span><span class=\"typ-punct\">)</span> <span class=\"typ-escape\">\\</span>\n<span class=\"typ-pol\">#</span><span class=\"typ-pol\">btt</span><span class=\"typ-punct\">.</span><span class=\"typ-func\">start</span><span class=\"typ-punct\">(</span><span class=\"typ-punct\">)</span>\n</code></pre><div class=\"preview\"><img src=\"/en-US-v0.13.1/assets/37d4500a4bb290d37816c260460d3a1a.png\" alt=\"Preview\"></div></div>","self":true,"params":[],"returns":["alignment"],"scope":[]},{"path":["direction"],"name":"end","title":"End","keywords":[],"oneliner":"The end point of this direction, as an alignment.","element":false,"contextual":false,"deprecation":null,"details":"<p>The end point of this direction, as an alignment.</p>","example":"<div class=\"previewed-code\"><pre><code><span class=\"typ-pol\">#</span><span class=\"typ-pol\">ltr</span><span class=\"typ-punct\">.</span><span class=\"typ-func\">end</span><span class=\"typ-punct\">(</span><span class=\"typ-punct\">)</span> <span class=\"typ-escape\">\\</span>\n<span class=\"typ-pol\">#</span><span class=\"typ-pol\">rtl</span><span class=\"typ-punct\">.</span><span class=\"typ-func\">end</span><span class=\"typ-punct\">(</span><span class=\"typ-punct\">)</span> <span class=\"typ-escape\">\\</span>\n<span class=\"typ-pol\">#</span><span class=\"typ-pol\">ttb</span><span class=\"typ-punct\">.</span><span class=\"typ-func\">end</span><span class=\"typ-punct\">(</span><span class=\"typ-punct\">)</span> <span class=\"typ-escape\">\\</span>\n<span class=\"typ-pol\">#</span><span class=\"typ-pol\">btt</span><span class=\"typ-punct\">.</span><span class=\"typ-func\">end</span><span class=\"typ-punct\">(</span><span class=\"typ-punct\">)</span>\n</code></pre><div class=\"preview\"><img src=\"/en-US-v0.13.1/assets/3438dca5e28598aaa80867ab9a5c7574.png\" alt=\"Preview\"></div></div>","self":true,"params":[],"returns":["alignment"],"scope":[]},{"path":["direction"],"name":"inv","title":"Inverse","keywords":[],"oneliner":"The inverse direction.","element":false,"contextual":false,"deprecation":null,"details":"<p>The inverse direction.</p>","example":"<div class=\"previewed-code\"><pre><code><span class=\"typ-pol\">#</span><span class=\"typ-pol\">ltr</span><span class=\"typ-punct\">.</span><span class=\"typ-func\">inv</span><span class=\"typ-punct\">(</span><span class=\"typ-punct\">)</span> <span class=\"typ-escape\">\\</span>\n<span class=\"typ-pol\">#</span><span class=\"typ-pol\">rtl</span><span class=\"typ-punct\">.</span><span class=\"typ-func\">inv</span><span class=\"typ-punct\">(</span><span class=\"typ-punct\">)</span> <span class=\"typ-escape\">\\</span>\n<span class=\"typ-pol\">#</span><span class=\"typ-pol\">ttb</span><span class=\"typ-punct\">.</span><span class=\"typ-func\">inv</span><span class=\"typ-punct\">(</span><span class=\"typ-punct\">)</span> <span class=\"typ-escape\">\\</span>\n<span class=\"typ-pol\">#</span><span class=\"typ-pol\">btt</span><span class=\"typ-punct\">.</span><span class=\"typ-func\">inv</span><span class=\"typ-punct\">(</span><span class=\"typ-punct\">)</span>\n</code></pre><div class=\"preview\"><img src=\"/en-US-v0.13.1/assets/9010ef0a4d8027d74f779654263c5c3a.png\" alt=\"Preview\"></div></div>","self":true,"params":[],"returns":["direction"],"scope":[]}]}}}