FTXUI/module-dom.html
2025-06-20 14:18:44 +00:00

867 lines
136 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- HTML header for doxygen 1.9.8-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=11"/>
<meta name="generator" content="Doxygen 1.12.0"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>FTXUI: ftxui / dom</title>
<link href="tabs.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="dynsections.js"></script>
<script type="text/javascript" src="doxygen-awesome-fragment-copy-button.js"></script>
<script type="text/javascript" src="doxygen-awesome-paragraph-link.js"></script>
<script type="text/javascript" src="doxygen-awesome-interactive-toc.js"></script>
<script type="text/javascript" src="doxygen-awesome-tabs.js"></script>
<script type="module">
DoxygenAwesomeFragmentCopyButton.init()
DoxygenAwesomeParagraphLink.init()
DoxygenAwesomeInteractiveToc.init()
DoxygenAwesomeTabs.init()
await new Promise(r => window.addEventListener('DOMContentLoaded', r));
// Remove title when a img[alt='title-img'] is present.
// Find an image with the alt "img-title".
const img = document.querySelector("img[alt='title-img']");
const header = document.querySelector(".headertitle");
if (img && header) {
// Hide the header title progressively.
header.style.display = "none";
// Show progressively the image.
img.style.maxHeight = "40vh";
img.style.maxWidth = "100%";
img.style.objectFit = "contain";
}
// In the "examples.html" page. Turn every link with text
// "examples/<...>
//
// Add a "demo" link toward.
// https://arthursonzogni.github.io/FTXUI/examples/?file=<...>
const examples = document.querySelectorAll("a")
examples.forEach((example) => {
if (!example.textContent.startsWith("examples/")) {
return;
}
// Remove the ".cpp" extension from the example name.
const exampleName = example.textContent.replace("examples/", "").replace(".cpp", "");
const a = document.createElement("a");
a.textContent = "[demo]";
a.href = "https://arthursonzogni.github.io/FTXUI/examples/?file=" + exampleName;
a.style.marginRight= "1em";
a.style.fontWeight = "bold";
example.parentElement.insertBefore(a, example)
});
// If the current URL ends with -example.html, we can add a link to the demo
// as well using the div.title textContent.
const url = new URL(window.location.href);
if (url.pathname.endsWith("-example.html")) {
// Get the title text.
const title = document.querySelector("div.title").textContent;
const example = title.replace("examples/", "").replace(".cpp", "");
// Create a link to the demo.
const a = document.createElement("a");
a.textContent = "[demo]";
a.href = "https://arthursonzogni.github.io/FTXUI/examples/?file=" + example;
a.style.marginLeft = "1em";
a.style.fontWeight = "bold";
a.style.display = "inline-block";
// Insert the link after the title.
const titleDiv = document.querySelector("div.title");
if (titleDiv) {
titleDiv.insertBefore(a, titleDiv.nextSibling);
}
}
</script>
<script type="module">
// Click on the navtree, except for the main page where this is already done
// automatically.
let delay = 0;
while(true) {
const navtree = document.querySelector("div.item.selected");
if (!navtree) {
delay *= 2;
delay += 1;
await new Promise(resolve => setTimeout(resolve, delay));
continue;
}
// Include only selected navtree items.
console.log("navtree.textContent", navtree.textContent);
if (!navtree.textContent.includes("Getting Started") &&
!navtree.textContent.includes("Installation") &&
!navtree.textContent.includes("ftxui / screen") &&
!navtree.textContent.includes("ftxui / dom") &&
!navtree.textContent.includes("ftxui / component") &&
!navtree.textContent.includes("Reference")) {
break;
}
// Find the first link inside the navtree.
const link = navtree.querySelector("a");
if (link) {
// Simulate a click on the link.
link.click();
break;
}
}
</script>
<link href="navtree.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="navtreedata.js"></script>
<script type="text/javascript" src="navtree.js"></script>
<script type="text/javascript" src="resize.js"></script>
<script type="text/javascript" src="cookie.js"></script>
<link href="search/search.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="search/searchdata.js"></script>
<script type="text/javascript" src="search/search.js"></script>
<link href="doxygen.css" rel="stylesheet" type="text/css" />
<link href="doxygen-awesome.css" rel="stylesheet" type="text/css"/>
<link href="stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
<div id="titlearea">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr id="projectrow">
<td id="projectalign">
<div id="projectname">FTXUI<span id="projectnumber">&#160;6.1.9</span>
</div>
<div id="projectbrief">C++ functional terminal UI.</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- end header part -->
<!-- Generated by Doxygen 1.12.0 -->
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
var searchBox = new SearchBox("searchBox", "search/",'.html');
/* @license-end */
</script>
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
$(function() { codefold.init(0); });
/* @license-end */
</script>
<script type="text/javascript" src="menudata.js"></script>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
$(function() {
initMenu('',true,false,'search.php','Search',true);
$(function() { init_search(); });
});
/* @license-end */
</script>
<div id="main-nav"></div>
</div><!-- top -->
<div id="side-nav" class="ui-resizable side-nav-resizable">
<div id="nav-tree">
<div id="nav-tree-contents">
<div id="nav-sync" class="sync"></div>
</div>
</div>
<div id="splitbar" style="-moz-user-select:none;"
class="ui-resizable-handle">
</div>
</div>
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
$(function(){initNavTree('module-dom.html',''); initResizable(true); });
/* @license-end */
</script>
<div id="doc-content">
<!-- window showing the filter options -->
<div id="MSearchSelectWindow"
onmouseover="return searchBox.OnSearchSelectShow()"
onmouseout="return searchBox.OnSearchSelectHide()"
onkeydown="return searchBox.OnSearchSelectKey(event)">
</div>
<!-- iframe showing the search results (closed by default) -->
<div id="MSearchResultsWindow">
<div id="MSearchResults">
<div class="SRPage">
<div id="SRIndex">
<div id="SRResults"></div>
<div class="SRStatus" id="Loading">Loading...</div>
<div class="SRStatus" id="Searching">Searching...</div>
<div class="SRStatus" id="NoMatches">No Matches</div>
</div>
</div>
</div>
</div>
<div><div class="header">
<div class="headertitle"><div class="title">ftxui / dom</div></div>
</div><!--header-->
<div class="contents">
<div class="toc"><h3>Table of Contents</h3>
<ul>
<li class="level1">
<a href="#dom-text">text</a>
</li>
<li class="level1">
<a href="#dom-vtext">vtext</a>
</li>
<li class="level1">
<a href="#dom-paragraph">paragraph </a>
</li>
<li class="level1">
<a href="#dom-border">border</a>
</li>
<li class="level1">
<a href="#dom-window">window</a>
</li>
<li class="level1">
<a href="#dom-separator">separator</a>
</li>
<li class="level1">
<a href="#dom-gauge">gauge</a>
</li>
<li class="level1">
<a href="#dom-graph">graph</a>
</li>
<li class="level1">
<a href="#dom-colors">Colors</a>
<ul>
<li class="level2">
<a href="#dom-colors-palette-16">Palette16 </a>
</li>
<li class="level2">
<a href="#dom-colors-palette-256">Palette256 </a>
</li>
<li class="level2">
<a href="#dom-colors-true-color">TrueColor</a>
</li>
</ul>
</li>
<li class="level1">
<a href="#dom-linear-gradient">LinearGradient</a>
</li>
<li class="level1">
<a href="#dom-style">Style</a>
</li>
<li class="level1">
<a href="#dom-layout">Layout</a>
</li>
<li class="level1">
<a href="#dom-table">Table</a>
</li>
<li class="level1">
<a href="#dom-canvas">Canvas</a>
</li>
</ul>
</div>
<div class="textblock"><p><img src="https://nsm09.casimages.com/img/2025/05/31//2505310207423242518595347.png" alt="title-img" class="inline"/></p>
<p>This module defines a hierarchical set of <code><a class="el" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">ftxui::Element</a></code>. An element manages the layout and can be responsive to the terminal dimension changes. Note the following example where this module is used to create a simple layout with a number of operators:</p>
<p>The <a class="el" href="module-dom-examples.html">Example</a> section provides a collection of examples.</p>
<p><b>Example:</b> </p><div class="fragment"><div class="line"><span class="keyword">namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a> {</div>
<div class="line"> ...</div>
<div class="line"> </div>
<div class="line"><span class="comment">// Define the document</span></div>
<div class="line">Element document = <a class="code hl_function" href="group__dom.html#gafd28058f0ccbbdf34691a85a7cc9b2e3">vbox</a>({</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga75baaa2734ed76a9f478beaafa87ae57">text</a>(<span class="stringliteral">&quot;The window&quot;</span>) | bold | <a class="code hl_function" href="group__dom.html#gaf61b489da39ca5e24b68e6e1a2b09c0d">color</a>(<a class="code hl_enumvalue" href="group__screen.html#ae2b6d9670960e89c66d7b76167a0802faf5e09dd1da4088464f264b7a3118bff8">Color::Blue</a>),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gae0b8041a60629fd790716038738c93ce">gauge</a>(0.5)</div>
<div class="line"> text(&quot;The footer&quot;)</div>
<div class="line">});</div>
<div class="line"> </div>
<div class="line"><span class="comment">// Add a border, by calling the `ftxui::border` decorator function.</span></div>
<div class="line">document = border(document);</div>
<div class="line"> </div>
<div class="line"><span class="comment">// Add another border, using the pipe operator.</span></div>
<div class="line">document = document | border.</div>
<div class="line"> </div>
<div class="line"><span class="comment">// Add another border, using the |= operator.</span></div>
<div class="line">document |= border</div>
<div class="line"> </div>
<div class="line">...</div>
<div class="line">}</div>
<div class="ttc" id="agroup__dom_html_ga75baaa2734ed76a9f478beaafa87ae57"><div class="ttname"><a href="group__dom.html#ga75baaa2734ed76a9f478beaafa87ae57">ftxui::text</a></div><div class="ttdeci">Element text(std::wstring text)</div><div class="ttdoc">Display a piece of unicode text.</div><div class="ttdef"><b>Definition</b> <a href="text_8cpp_source.html#l00160">text.cpp:160</a></div></div>
<div class="ttc" id="agroup__dom_html_gae0b8041a60629fd790716038738c93ce"><div class="ttname"><a href="group__dom.html#gae0b8041a60629fd790716038738c93ce">ftxui::gauge</a></div><div class="ttdeci">Element gauge(float progress)</div><div class="ttdoc">Draw a high definition progress bar.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2gauge_8cpp_source.html#l00293">src/ftxui/dom/gauge.cpp:293</a></div></div>
<div class="ttc" id="agroup__dom_html_gaf61b489da39ca5e24b68e6e1a2b09c0d"><div class="ttname"><a href="group__dom.html#gaf61b489da39ca5e24b68e6e1a2b09c0d">ftxui::color</a></div><div class="ttdeci">Decorator color(Color)</div><div class="ttdoc">Decorate using a foreground color.</div><div class="ttdef"><b>Definition</b> <a href="dom_2color_8cpp_source.html#l00110">dom/color.cpp:110</a></div></div>
<div class="ttc" id="agroup__dom_html_gafd28058f0ccbbdf34691a85a7cc9b2e3"><div class="ttname"><a href="group__dom.html#gafd28058f0ccbbdf34691a85a7cc9b2e3">ftxui::vbox</a></div><div class="ttdeci">Element vbox(Elements)</div><div class="ttdoc">A container displaying elements vertically one by one.</div><div class="ttdef"><b>Definition</b> <a href="vbox_8cpp_source.html#l00096">vbox.cpp:96</a></div></div>
<div class="ttc" id="agroup__screen_html_ae2b6d9670960e89c66d7b76167a0802faf5e09dd1da4088464f264b7a3118bff8"><div class="ttname"><a href="group__screen.html#ae2b6d9670960e89c66d7b76167a0802faf5e09dd1da4088464f264b7a3118bff8">ftxui::Color::Blue</a></div><div class="ttdeci">@ Blue</div><div class="ttdef"><b>Definition</b> <a href="color_8hpp_source.html#l00058">color.hpp:58</a></div></div>
<div class="ttc" id="anamespaceftxui_html"><div class="ttname"><a href="namespaceftxui.html">ftxui</a></div><div class="ttdoc">The FTXUI ftxui:: namespace.</div><div class="ttdef"><b>Definition</b> <a href="animation_8hpp_source.html#l00010">animation.hpp:10</a></div></div>
</div><!-- fragment --><p><b>List of elements</b></p>
<p>The list of all elements are included and can be accessed by including the corresponding header file: </p><div class="fragment"><div class="line"><span class="preprocessor">#include &lt;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&gt;</span></div>
<div class="ttc" id="aelements_8hpp_html"><div class="ttname"><a href="elements_8hpp.html">elements.hpp</a></div></div>
</div><!-- fragment --><div class="fragment"><div class="line"><span class="comment">// Copyright 2020 Arthur Sonzogni. All rights reserved.</span></div>
<div class="line"><span class="comment">// Use of this source code is governed by the MIT license that can be found in</span></div>
<div class="line"><span class="comment">// the LICENSE file.</span></div>
<div class="line"><span class="preprocessor">#ifndef FTXUI_DOM_ELEMENTS_HPP</span></div>
<div class="line"><span class="preprocessor">#define FTXUI_DOM_ELEMENTS_HPP</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &lt;functional&gt;</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="canvas_8hpp.html">ftxui/dom/canvas.hpp</a>&quot;</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="direction_8hpp.html">ftxui/dom/direction.hpp</a>&quot;</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="flexbox__config_8hpp.html">ftxui/dom/flexbox_config.hpp</a>&quot;</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="linear__gradient_8hpp.html">ftxui/dom/linear_gradient.hpp</a>&quot;</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="box_8hpp.html">ftxui/screen/box.hpp</a>&quot;</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="color_8hpp.html">ftxui/screen/color.hpp</a>&quot;</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="terminal_8hpp.html">ftxui/screen/terminal.hpp</a>&quot;</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="ref_8hpp.html">ftxui/util/ref.hpp</a>&quot;</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a> {</div>
<div class="line"><span class="keyword">class </span>Node;</div>
<div class="line"><span class="keyword">using </span><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> = std::shared_ptr&lt;Node&gt;;</div>
<div class="line"><span class="keyword">using </span><a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a> = std::vector&lt;Element&gt;;</div>
<div class="line"><span class="keyword">using </span><a class="code hl_typedef" href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">Decorator</a> = std::function&lt;<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>)&gt;;</div>
<div class="line"><span class="keyword">using </span><a class="code hl_typedef" href="namespaceftxui.html#ab07cb9a766f38fc867f8fe736ce2e6e3">GraphFunction</a> = std::function&lt;std::vector&lt;int&gt;(<span class="keywordtype">int</span>, <span class="keywordtype">int</span>)&gt;;</div>
<div class="line"><span class="comment"></span> </div>
<div class="line"><span class="comment">/// @brief BorderStyle is an enumeration that represents the different styles</span></div>
<div class="line"><span class="comment">/// of borders that can be applied to elements in the terminal UI.</span></div>
<div class="line"><span class="comment">///</span></div>
<div class="line"><span class="comment">/// BorderStyle is an enumeration that represents the different styles of</span></div>
<div class="line"><span class="comment">/// borders that can be applied to elements in the terminal UI.</span></div>
<div class="line"><span class="comment">/// It is used to define the visual appearance of borders around elements,</span></div>
<div class="line"><span class="comment">/// such as windows, frames, or separators.</span></div>
<div class="line"><span class="comment">/// @ingroup dom</span></div>
<div class="line"><span class="comment"></span><span class="keyword">enum</span> <a class="code hl_enumeration" href="group__dom.html#gafe3103dd0b8240c5443892484ef5af9c">BorderStyle</a> {</div>
<div class="line"> <a class="code hl_enumvalue" href="group__dom.html#ggafe3103dd0b8240c5443892484ef5af9caf917d6c11c85b4ac32e30d1cc9da25eb">LIGHT</a>,</div>
<div class="line"> <a class="code hl_enumvalue" href="group__dom.html#ggafe3103dd0b8240c5443892484ef5af9ca830310bdfd296d7cd00c59773579b892">DASHED</a>,</div>
<div class="line"> <a class="code hl_enumvalue" href="group__dom.html#ggafe3103dd0b8240c5443892484ef5af9ca34cd68a92c52759ed9b545969a11c2da">HEAVY</a>,</div>
<div class="line"> <a class="code hl_enumvalue" href="group__dom.html#ggafe3103dd0b8240c5443892484ef5af9ca33465d1d419b1074fb259ef444609e92">DOUBLE</a>,</div>
<div class="line"> <a class="code hl_enumvalue" href="group__dom.html#ggafe3103dd0b8240c5443892484ef5af9ca655074b92b285adff7d18a45748bf493">ROUNDED</a>,</div>
<div class="line"> <a class="code hl_enumvalue" href="group__dom.html#ggafe3103dd0b8240c5443892484ef5af9ca2f0d18fc0d0fa4a6cd92dc328501874d">EMPTY</a>,</div>
<div class="line">};</div>
<div class="line"> </div>
<div class="line"><span class="comment">// Pipe elements into decorator togethers.</span></div>
<div class="line"><span class="comment">// For instance the next lines are equivalents:</span></div>
<div class="line"><span class="comment">// -&gt; text(&quot;ftxui&quot;) | bold | underlined</span></div>
<div class="line"><span class="comment">// -&gt; underlined(bold(text(&quot;FTXUI&quot;)))</span></div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="namespaceftxui.html#a65a2e15f64ae3bc205c485abc3a5aeb9">operator|</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>, <a class="code hl_typedef" href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">Decorator</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>&amp; <a class="code hl_function" href="namespaceftxui.html#ade35e69d695327db85be01c9787c39f8">operator|=</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>&amp;, <a class="code hl_typedef" href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">Decorator</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a> <a class="code hl_function" href="namespaceftxui.html#a65a2e15f64ae3bc205c485abc3a5aeb9">operator|</a>(<a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a>, <a class="code hl_typedef" href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">Decorator</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">Decorator</a> <a class="code hl_function" href="namespaceftxui.html#a65a2e15f64ae3bc205c485abc3a5aeb9">operator|</a>(<a class="code hl_typedef" href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">Decorator</a>, <a class="code hl_typedef" href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">Decorator</a>);</div>
<div class="line"> </div>
<div class="line"><span class="comment">// --- Widget ---</span></div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga75baaa2734ed76a9f478beaafa87ae57">text</a>(std::string text);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga9f9f7485a45aa9d432726ca9845d1eac">vtext</a>(std::string text);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gac1ef1cf6bf7cd0759ffa195071edb2a0">separator</a>();</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga37c2b93daf557f68064bc9fbf93ebde0">separatorLight</a>();</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga81f2d3256c0cfbc70f820129286f08c6">separatorDashed</a>();</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gaf0649e89a9960f1c2703e48c1817645b">separatorHeavy</a>();</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gadd376830fdb51b0bf52672ef17515989">separatorDouble</a>();</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga1934703e56ab66f6f259b9f8da331f1b">separatorEmpty</a>();</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga13cb559cfc7e409b3f211f0bb35ea7fa">separatorStyled</a>(<a class="code hl_enumeration" href="group__dom.html#gafe3103dd0b8240c5443892484ef5af9c">BorderStyle</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gac1ef1cf6bf7cd0759ffa195071edb2a0">separator</a>(Pixel);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga97a10482d591aade2958da0f2f19b371">separatorCharacter</a>(std::string);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="namespaceftxui.html#a50413065cee4757447b35c3a500667d3">separatorHSelector</a>(<span class="keywordtype">float</span> <a class="code hl_variable" href="screen_8cpp.html#a972107f15f3c0c099eb9fd605e7f51c6">left</a>,</div>
<div class="line"> <span class="keywordtype">float</span> <a class="code hl_variable" href="screen_8cpp.html#aa4b74e56e675912bbc06504407fc7a46">right</a>,</div>
<div class="line"> Color unselected_color,</div>
<div class="line"> Color selected_color);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="namespaceftxui.html#a1a0211233bacd4eb4d31a8e3d58b5f48">separatorVSelector</a>(<span class="keywordtype">float</span> up,</div>
<div class="line"> <span class="keywordtype">float</span> <a class="code hl_variable" href="screen_8cpp.html#a9cdd0454d64ec151b59fdd7d22ed505a">down</a>,</div>
<div class="line"> Color unselected_color,</div>
<div class="line"> Color selected_color);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gae0b8041a60629fd790716038738c93ce">gauge</a>(<span class="keywordtype">float</span> progress);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga97898b9f77b3edd330eaef22fce7cf2b">gaugeLeft</a>(<span class="keywordtype">float</span> progress);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga333d781a44885ed4b5ea8444015b86f7">gaugeRight</a>(<span class="keywordtype">float</span> progress);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga6e9a97b66c14404a2b3f95f4dae414c2">gaugeUp</a>(<span class="keywordtype">float</span> progress);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gafe537f915cac5613261580bae3a8fe33">gaugeDown</a>(<span class="keywordtype">float</span> progress);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga1265cc8a52448e1b98d7abe84a04681e">gaugeDirection</a>(<span class="keywordtype">float</span> progress, <a class="code hl_enumeration" href="group__dom.html#ga224b9163917ac32fc95a60d8c1eec3aa">Direction</a> direction);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gae8537acd423d47cf07e61bd774fb1098">border</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gaa074cdab57eeb47b99f1699bcc8addd8">borderLight</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga181c80f8ada12d1356f6bfa0ebb7219f">borderDashed</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga666c31419cc31cdadc9f8178ed63529e">borderHeavy</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga052b504344f3bc1ff86b3493cd934215">borderDouble</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga3cf2db223a5efaa370f0ca6bb405b80e">borderRounded</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gaf20f7d6fb275d109f0bdc01a2e4d3f3e">borderEmpty</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">Decorator</a> <a class="code hl_function" href="group__dom.html#gabc9db79957d4dd36deb8ca79938e4c41">borderStyled</a>(<a class="code hl_enumeration" href="group__dom.html#gafe3103dd0b8240c5443892484ef5af9c">BorderStyle</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">Decorator</a> <a class="code hl_function" href="group__dom.html#gabc9db79957d4dd36deb8ca79938e4c41">borderStyled</a>(<a class="code hl_enumeration" href="group__dom.html#gafe3103dd0b8240c5443892484ef5af9c">BorderStyle</a>, Color);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">Decorator</a> <a class="code hl_function" href="group__dom.html#gabc9db79957d4dd36deb8ca79938e4c41">borderStyled</a>(Color);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">Decorator</a> <a class="code hl_function" href="group__dom.html#gaa97cfcfbe6df92dac085454395ec7b2f">borderWith</a>(<span class="keyword">const</span> Pixel&amp;);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> title, <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> content, <a class="code hl_enumeration" href="group__dom.html#gafe3103dd0b8240c5443892484ef5af9c">BorderStyle</a> border = <a class="code hl_enumvalue" href="group__dom.html#ggafe3103dd0b8240c5443892484ef5af9ca655074b92b285adff7d18a45748bf493">ROUNDED</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga3b08e0030a0831d3ec3e2a505908273b">spinner</a>(<span class="keywordtype">int</span> charset_index, <span class="keywordtype">size_t</span> image_index);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="namespaceftxui.html#ac54cdd05db30871ce082a8fa650545da">paragraph</a>(<span class="keyword">const</span> std::string&amp; text);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gaa334a836eccc573e1137a1ba29d07d8a">paragraphAlignLeft</a>(<span class="keyword">const</span> std::string&amp; text);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga28a69f06a88c89fe7a507e33ab486411">paragraphAlignRight</a>(<span class="keyword">const</span> std::string&amp; text);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga6a105f6b0d07d7933379ff1ae9282fb8">paragraphAlignCenter</a>(<span class="keyword">const</span> std::string&amp; text);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gae4de548aa67ab77cb345e4ddec6b248b">paragraphAlignJustify</a>(<span class="keyword">const</span> std::string&amp; text);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="namespaceftxui.html#ae78c2b2b147e65701493465f8e3f4d89">graph</a>(<a class="code hl_typedef" href="namespaceftxui.html#ab07cb9a766f38fc867f8fe736ce2e6e3">GraphFunction</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga40451515a5b3049e7a1276cad8b9356c">emptyElement</a>();</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="namespaceftxui.html#a57d7bdf155e190de514a689abb4e9a35">canvas</a>(ConstRef&lt;Canvas&gt;);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="namespaceftxui.html#a57d7bdf155e190de514a689abb4e9a35">canvas</a>(<span class="keywordtype">int</span> width, <span class="keywordtype">int</span> height, std::function&lt;<span class="keywordtype">void</span>(Canvas&amp;)&gt;);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="namespaceftxui.html#a57d7bdf155e190de514a689abb4e9a35">canvas</a>(std::function&lt;<span class="keywordtype">void</span>(Canvas&amp;)&gt;);</div>
<div class="line"> </div>
<div class="line"><span class="comment">// -- Decorator ---</span></div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga353c769068e25303eb41fa2da565c604">bold</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gac6a3b77604739516e809369810896646">dim</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga8a8d190765de7bbd9e78f9e639c2a96d">italic</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga672456b8f2091b615a30ff755418b37b">inverted</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga5ad450c97c4d084b64ffb5b5ca942664">underlined</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga16d1b74107610750276499ddb3dde8da">underlinedDouble</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gad57613de5895e774218d91dea48d074b">blink</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga8594d70f0491def903370e86132fbf01">strikethrough</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">Decorator</a> <a class="code hl_function" href="group__dom.html#gaf61b489da39ca5e24b68e6e1a2b09c0d">color</a>(Color);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">Decorator</a> <a class="code hl_function" href="group__dom.html#ga01d4c5aaf0447e862246849111782245">bgcolor</a>(Color);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">Decorator</a> <a class="code hl_function" href="group__dom.html#gaf61b489da39ca5e24b68e6e1a2b09c0d">color</a>(<span class="keyword">const</span> LinearGradient&amp;);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">Decorator</a> <a class="code hl_function" href="group__dom.html#ga01d4c5aaf0447e862246849111782245">bgcolor</a>(<span class="keyword">const</span> LinearGradient&amp;);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gaf61b489da39ca5e24b68e6e1a2b09c0d">color</a>(Color, <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga01d4c5aaf0447e862246849111782245">bgcolor</a>(Color, <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gaf61b489da39ca5e24b68e6e1a2b09c0d">color</a>(<span class="keyword">const</span> LinearGradient&amp;, <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga01d4c5aaf0447e862246849111782245">bgcolor</a>(<span class="keyword">const</span> LinearGradient&amp;, <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">Decorator</a> <a class="code hl_function" href="group__dom.html#ga78447ba1ccb792963ad6d306f4ed1256">focusPosition</a>(<span class="keywordtype">int</span> x, <span class="keywordtype">int</span> y);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">Decorator</a> <a class="code hl_function" href="group__dom.html#ga13befad33cb4125e2143f2af3eddcc71">focusPositionRelative</a>(<span class="keywordtype">float</span> x, <span class="keywordtype">float</span> y);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gaca42bd6c44d8d366d5c1014330402086">automerge</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> child);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">Decorator</a> <a class="code hl_function" href="group__dom.html#gad0eac58eac9e6cd9a04879b20f8e123b">hyperlink</a>(std::string link);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gad0eac58eac9e6cd9a04879b20f8e123b">hyperlink</a>(std::string link, <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> child);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="namespaceftxui.html#aa7e1317c76cefc5018503de4f6e09ea3">selectionStyleReset</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">Decorator</a> <a class="code hl_function" href="namespaceftxui.html#a925a73b7f0eb4b5bc11af23f4ca18019">selectionColor</a>(Color foreground);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">Decorator</a> <a class="code hl_function" href="namespaceftxui.html#a6c965b8f6450a50a938120b5f6ddea96">selectionBackgroundColor</a>(Color foreground);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">Decorator</a> <a class="code hl_function" href="namespaceftxui.html#a5d98498c51cfbc03f37e46d46ec8acf5">selectionForegroundColor</a>(Color foreground);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">Decorator</a> <a class="code hl_function" href="namespaceftxui.html#a4080865d947eea48cf695531f66a5160">selectionStyle</a>(std::function&lt;<span class="keywordtype">void</span>(Pixel&amp;)&gt; style);</div>
<div class="line"> </div>
<div class="line"><span class="comment">// --- Layout is</span></div>
<div class="line"><span class="comment">// Horizontal, Vertical or stacked set of elements.</span></div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="namespaceftxui.html#a552ba6d33b3c9bec586b99fba4c243ac">hbox</a>(<a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gafd28058f0ccbbdf34691a85a7cc9b2e3">vbox</a>(<a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga901ab1b6b2e0e8c295552168ab206441">dbox</a>(<a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="namespaceftxui.html#a168a235aa438b6c72df5861322154be3">flexbox</a>(<a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a>, FlexboxConfig config = FlexboxConfig());</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="namespaceftxui.html#abcdf409d605edafd3191cd7ba47bcbd1">gridbox</a>(std::vector&lt;Elements&gt; lines);</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="namespaceftxui.html#a345b31919048562675615d5af78e6322">hflow</a>(<a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a>); <span class="comment">// Helper: default flexbox with row direction.</span></div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="namespaceftxui.html#ae0da51b614e95a0687727644b5898a23">vflow</a>(<a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a>); <span class="comment">// Helper: default flexbox with column direction.</span></div>
<div class="line"> </div>
<div class="line"><span class="comment">// -- Flexibility ---</span></div>
<div class="line"><span class="comment">// Define how to share the remaining space when not all of it is used inside a</span></div>
<div class="line"><span class="comment">// container.</span></div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga257acd2bd47bab7db879cca2c0e67e23">flex</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>); <span class="comment">// Expand/Minimize if possible/needed.</span></div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga81ed6b31f512e849247f13d249f6f20e">flex_grow</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>); <span class="comment">// Expand element if possible.</span></div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga4629196b5ffc280054d35f2a9977e829">flex_shrink</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>); <span class="comment">// Minimize element if needed.</span></div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga0dbba98e14f63f1dd5163cbdc4f42da8">xflex</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>); <span class="comment">// Expand/Minimize if possible/needed on X axis.</span></div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga1618cb15307f29eb3d531e7b44c280d3">xflex_grow</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>); <span class="comment">// Expand element if possible on X axis.</span></div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga95275a9271934cf76e970c6650cc224d">xflex_shrink</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>); <span class="comment">// Minimize element if needed on X axis.</span></div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga42c7a33df6d890de30fc1ebb2d1b3ca6">yflex</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>); <span class="comment">// Expand/Minimize if possible/needed on Y axis.</span></div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga7eac3f709e905af8f583aed52093b7ce">yflex_grow</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>); <span class="comment">// Expand element if possible on Y axis.</span></div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gaf7d0757f5965aa579bccc125ff909256">yflex_shrink</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>); <span class="comment">// Minimize element if needed on Y axis.</span></div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga845b0ea50d51024aa4e050447b46e1dd">notflex</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>); <span class="comment">// Reset the flex attribute.</span></div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gac2a9ed2d22ec3c8811b61f4a901ed367">filler</a>(); <span class="comment">// A blank expandable element.</span></div>
<div class="line"> </div>
<div class="line"><span class="comment">// -- Size override;</span></div>
<div class="line"><span class="keyword">enum</span> <a class="code hl_enumeration" href="namespaceftxui.html#a04711c04f28aabfa0e5928a35baaec53">WidthOrHeight</a> { <a class="code hl_enumvalue" href="namespaceftxui.html#a04711c04f28aabfa0e5928a35baaec53a73c0818986b7c462c2977f57afd00522">WIDTH</a>, <a class="code hl_enumvalue" href="namespaceftxui.html#a04711c04f28aabfa0e5928a35baaec53a38b9241136017b93ea2755a49cf0a000">HEIGHT</a> };</div>
<div class="line"><span class="keyword">enum</span> <a class="code hl_enumeration" href="namespaceftxui.html#ae09f44b989d381a387329fd0a0935926">Constraint</a> { <a class="code hl_enumvalue" href="namespaceftxui.html#ae09f44b989d381a387329fd0a0935926a41b05932cd237b2b133fff1ade85bed5">LESS_THAN</a>, <a class="code hl_enumvalue" href="namespaceftxui.html#ae09f44b989d381a387329fd0a0935926a59a84258a4cb9025b567ee5139455029">EQUAL</a>, <a class="code hl_enumvalue" href="namespaceftxui.html#ae09f44b989d381a387329fd0a0935926a5fae95457121bd697edd588d1b64cc7c">GREATER_THAN</a> };</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">Decorator</a> <a class="code hl_function" href="group__dom.html#ga201220986fbdc539e42efe067985cbdb">size</a>(<a class="code hl_enumeration" href="namespaceftxui.html#a04711c04f28aabfa0e5928a35baaec53">WidthOrHeight</a>, <a class="code hl_enumeration" href="namespaceftxui.html#ae09f44b989d381a387329fd0a0935926">Constraint</a>, <span class="keywordtype">int</span> value);</div>
<div class="line"> </div>
<div class="line"><span class="comment">// --- Frame ---</span></div>
<div class="line"><span class="comment">// A frame is a scrollable area. The internal area is potentially larger than</span></div>
<div class="line"><span class="comment">// the external one. The internal area is scrolled in order to make visible the</span></div>
<div class="line"><span class="comment">// focused element.</span></div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="namespaceftxui.html#ad0d6a96f6e1fb6d67d9fa6323062a737">frame</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="namespaceftxui.html#a2d0617c0912b732f059cf360ac951c49">xframe</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="namespaceftxui.html#a7ea9d3ceb2a977955125c6e4a6072325">yframe</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gaa2d7d671f184f85e0f396f2610fa6c2e">focus</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="namespaceftxui.html#a9e3e2988ed61a129d82d634ad66f7eb1">select</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> e); <span class="comment">// Deprecated - Alias for focus.</span></div>
<div class="line"> </div>
<div class="line"><span class="comment">// --- Cursor ---</span></div>
<div class="line"><span class="comment">// Those are similar to `focus`, but also change the shape of the cursor.</span></div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga509ef7e7f8913ea3de7efd45e3301ea1">focusCursorBlock</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gadda589914ba8fe863c905b6566557768">focusCursorBlockBlinking</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga4f89e72e7001064e3eb8189c8317e95b">focusCursorBar</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga085a7c997e7364c5a54e73c7b84145db">focusCursorBarBlinking</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga61e1fe02a18c2b18e31ccc9cd3943823">focusCursorUnderline</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga33637d59d1e52aa06dd2a94162adbfe9">focusCursorUnderlineBlinking</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"> </div>
<div class="line"><span class="comment">// --- Misc ---</span></div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga1974176e676afdb96d203e8e0f579219">vscroll_indicator</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga7f48136f949ccbde722dd93a6de4d0de">hscroll_indicator</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">Decorator</a> <a class="code hl_function" href="namespaceftxui.html#aaff8245861617a3d9e846e99de582a63">reflect</a>(Box&amp; box);</div>
<div class="line"><span class="comment">// Before drawing the |element| clear the pixel below. This is useful in</span></div>
<div class="line"><span class="comment">// combinaison with dbox.</span></div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga17a89519e6b87e12b1e5811a702f7847">clear_under</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> element);</div>
<div class="line"> </div>
<div class="line"><span class="comment">// --- Util --------------------------------------------------------------------</span></div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gaf7d0d1e44c1a5424e42a5cddceacf7f7">hcenter</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gad907a8a48bb9f9dfdb06402e9fc12316">vcenter</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga5b11656305fce8427b81daf1c35883f1">center</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga778e52afe28f1978f1f7ef065ed92d6d">align_right</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga1bfd3885ac8b40dc82a1103725003c07">nothing</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> element);</div>
<div class="line"> </div>
<div class="line"><span class="keyword">namespace </span>Dimension {</div>
<div class="line">Dimensions <a class="code hl_function" href="namespaceftxui_1_1Dimension.html#aee138f0b60ddc07682a785f55eb5fda6">Fit</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>&amp;, <span class="keywordtype">bool</span> extend_beyond_screen = <span class="keyword">false</span>);</div>
<div class="line">} <span class="comment">// namespace Dimension</span></div>
<div class="line"> </div>
<div class="line">} <span class="comment">// namespace ftxui</span></div>
<div class="line"> </div>
<div class="line"><span class="comment">// Make container able to take any number of children as input.</span></div>
<div class="line"><span class="preprocessor">#include &quot;ftxui/dom/take_any_args.hpp&quot;</span></div>
<div class="line"> </div>
<div class="line"><span class="comment">// Include old definitions using wstring.</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="dom_2deprecated_8hpp.html">ftxui/dom/deprecated.hpp</a>&quot;</span></div>
<div class="line"><span class="preprocessor">#endif </span><span class="comment">// FTXUI_DOM_ELEMENTS_HPP</span></div>
<div class="ttc" id="abox_8hpp_html"><div class="ttname"><a href="box_8hpp.html">box.hpp</a></div></div>
<div class="ttc" id="acanvas_8hpp_html"><div class="ttname"><a href="canvas_8hpp.html">canvas.hpp</a></div></div>
<div class="ttc" id="acolor_8hpp_html"><div class="ttname"><a href="color_8hpp.html">color.hpp</a></div></div>
<div class="ttc" id="adirection_8hpp_html"><div class="ttname"><a href="direction_8hpp.html">direction.hpp</a></div></div>
<div class="ttc" id="adom_2deprecated_8hpp_html"><div class="ttname"><a href="dom_2deprecated_8hpp.html">deprecated.hpp</a></div></div>
<div class="ttc" id="aflexbox__config_8hpp_html"><div class="ttname"><a href="flexbox__config_8hpp.html">flexbox_config.hpp</a></div></div>
<div class="ttc" id="agroup__dom_html_ga01d4c5aaf0447e862246849111782245"><div class="ttname"><a href="group__dom.html#ga01d4c5aaf0447e862246849111782245">ftxui::bgcolor</a></div><div class="ttdeci">Decorator bgcolor(Color)</div><div class="ttdoc">Decorate using a background color.</div><div class="ttdef"><b>Definition</b> <a href="dom_2color_8cpp_source.html#l00124">dom/color.cpp:124</a></div></div>
<div class="ttc" id="agroup__dom_html_ga03049def08fa7a5eaa4d5e897152bc1a"><div class="ttname"><a href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">ftxui::window</a></div><div class="ttdeci">Element window(Element title, Element content, BorderStyle border=ROUNDED)</div><div class="ttdoc">Draw window with a title and a border around the element.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2border_8cpp_source.html#l00507">src/ftxui/dom/border.cpp:507</a></div></div>
<div class="ttc" id="agroup__dom_html_ga052b504344f3bc1ff86b3493cd934215"><div class="ttname"><a href="group__dom.html#ga052b504344f3bc1ff86b3493cd934215">ftxui::borderDouble</a></div><div class="ttdeci">Element borderDouble(Element)</div><div class="ttdoc">Draw a double border around the element.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2border_8cpp_source.html#l00405">src/ftxui/dom/border.cpp:405</a></div></div>
<div class="ttc" id="agroup__dom_html_ga085a7c997e7364c5a54e73c7b84145db"><div class="ttname"><a href="group__dom.html#ga085a7c997e7364c5a54e73c7b84145db">ftxui::focusCursorBarBlinking</a></div><div class="ttdeci">Element focusCursorBarBlinking(Element)</div><div class="ttdoc">Same as focus, but set the cursor shape to be a blinking bar.</div><div class="ttdef"><b>Definition</b> <a href="frame_8cpp_source.html#l00189">frame.cpp:189</a></div></div>
<div class="ttc" id="agroup__dom_html_ga0dbba98e14f63f1dd5163cbdc4f42da8"><div class="ttname"><a href="group__dom.html#ga0dbba98e14f63f1dd5163cbdc4f42da8">ftxui::xflex</a></div><div class="ttdeci">Element xflex(Element)</div><div class="ttdoc">Expand/Minimize if possible/needed on the X axis.</div><div class="ttdef"><b>Definition</b> <a href="flex_8cpp_source.html#l00129">flex.cpp:129</a></div></div>
<div class="ttc" id="agroup__dom_html_ga1265cc8a52448e1b98d7abe84a04681e"><div class="ttname"><a href="group__dom.html#ga1265cc8a52448e1b98d7abe84a04681e">ftxui::gaugeDirection</a></div><div class="ttdeci">Element gaugeDirection(float progress, Direction direction)</div><div class="ttdoc">Draw a high definition progress bar progressing in specified direction.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2gauge_8cpp_source.html#l00169">src/ftxui/dom/gauge.cpp:169</a></div></div>
<div class="ttc" id="agroup__dom_html_ga13befad33cb4125e2143f2af3eddcc71"><div class="ttname"><a href="group__dom.html#ga13befad33cb4125e2143f2af3eddcc71">ftxui::focusPositionRelative</a></div><div class="ttdeci">Decorator focusPositionRelative(float x, float y)</div><div class="ttdoc">Used inside a frame, this force the view to be scrolled toward a a given position....</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2focus_8cpp_source.html#l00031">src/ftxui/dom/focus.cpp:31</a></div></div>
<div class="ttc" id="agroup__dom_html_ga13cb559cfc7e409b3f211f0bb35ea7fa"><div class="ttname"><a href="group__dom.html#ga13cb559cfc7e409b3f211f0bb35ea7fa">ftxui::separatorStyled</a></div><div class="ttdeci">Element separatorStyled(BorderStyle)</div><div class="ttdoc">Draw a vertical or horizontal separation in between two other elements.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2separator_8cpp_source.html#l00172">src/ftxui/dom/separator.cpp:172</a></div></div>
<div class="ttc" id="agroup__dom_html_ga1618cb15307f29eb3d531e7b44c280d3"><div class="ttname"><a href="group__dom.html#ga1618cb15307f29eb3d531e7b44c280d3">ftxui::xflex_grow</a></div><div class="ttdeci">Element xflex_grow(Element)</div><div class="ttdoc">Expand if possible on the X axis.</div><div class="ttdef"><b>Definition</b> <a href="flex_8cpp_source.html#l00147">flex.cpp:147</a></div></div>
<div class="ttc" id="agroup__dom_html_ga16d1b74107610750276499ddb3dde8da"><div class="ttname"><a href="group__dom.html#ga16d1b74107610750276499ddb3dde8da">ftxui::underlinedDouble</a></div><div class="ttdeci">Element underlinedDouble(Element)</div><div class="ttdoc">Apply a underlinedDouble to text.</div><div class="ttdef"><b>Definition</b> <a href="underlined__double_8cpp_source.html#l00017">underlined_double.cpp:17</a></div></div>
<div class="ttc" id="agroup__dom_html_ga17a89519e6b87e12b1e5811a702f7847"><div class="ttname"><a href="group__dom.html#ga17a89519e6b87e12b1e5811a702f7847">ftxui::clear_under</a></div><div class="ttdeci">Element clear_under(Element element)</div><div class="ttdoc">Before drawing |child|, clear the pixels below. This is useful in combination with dbox.</div><div class="ttdef"><b>Definition</b> <a href="clear__under_8cpp_source.html#l00038">clear_under.cpp:38</a></div></div>
<div class="ttc" id="agroup__dom_html_ga181c80f8ada12d1356f6bfa0ebb7219f"><div class="ttname"><a href="group__dom.html#ga181c80f8ada12d1356f6bfa0ebb7219f">ftxui::borderDashed</a></div><div class="ttdeci">Element borderDashed(Element)</div><div class="ttdoc">Draw a dashed border around the element.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2border_8cpp_source.html#l00300">src/ftxui/dom/border.cpp:300</a></div></div>
<div class="ttc" id="agroup__dom_html_ga1934703e56ab66f6f259b9f8da331f1b"><div class="ttname"><a href="group__dom.html#ga1934703e56ab66f6f259b9f8da331f1b">ftxui::separatorEmpty</a></div><div class="ttdeci">Element separatorEmpty()</div><div class="ttdoc">Draw a vertical or horizontal separation in between two other elements, using the EMPTY style.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2separator_8cpp_source.html#l00357">src/ftxui/dom/separator.cpp:357</a></div></div>
<div class="ttc" id="agroup__dom_html_ga1974176e676afdb96d203e8e0f579219"><div class="ttname"><a href="group__dom.html#ga1974176e676afdb96d203e8e0f579219">ftxui::vscroll_indicator</a></div><div class="ttdeci">Element vscroll_indicator(Element)</div><div class="ttdoc">Display a vertical scrollbar on the right. Colors follow the content.</div><div class="ttdef"><b>Definition</b> <a href="scroll__indicator_8cpp_source.html#l00021">scroll_indicator.cpp:21</a></div></div>
<div class="ttc" id="agroup__dom_html_ga1bfd3885ac8b40dc82a1103725003c07"><div class="ttname"><a href="group__dom.html#ga1bfd3885ac8b40dc82a1103725003c07">ftxui::nothing</a></div><div class="ttdeci">Element nothing(Element element)</div><div class="ttdoc">A decoration doing absolutely nothing.</div><div class="ttdef"><b>Definition</b> <a href="dom_2util_8cpp_source.html#l00028">dom/util.cpp:28</a></div></div>
<div class="ttc" id="agroup__dom_html_ga201220986fbdc539e42efe067985cbdb"><div class="ttname"><a href="group__dom.html#ga201220986fbdc539e42efe067985cbdb">ftxui::size</a></div><div class="ttdeci">Decorator size(WidthOrHeight, Constraint, int value)</div><div class="ttdoc">Apply a constraint on the size of an element.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2size_8cpp_source.html#l00089">src/ftxui/dom/size.cpp:89</a></div></div>
<div class="ttc" id="agroup__dom_html_ga224b9163917ac32fc95a60d8c1eec3aa"><div class="ttname"><a href="group__dom.html#ga224b9163917ac32fc95a60d8c1eec3aa">ftxui::Direction</a></div><div class="ttdeci">Direction</div><div class="ttdoc">Direction is an enumeration that represents the four cardinal directions.</div><div class="ttdef"><b>Definition</b> <a href="direction_8hpp_source.html#l00013">direction.hpp:13</a></div></div>
<div class="ttc" id="agroup__dom_html_ga257acd2bd47bab7db879cca2c0e67e23"><div class="ttname"><a href="group__dom.html#ga257acd2bd47bab7db879cca2c0e67e23">ftxui::flex</a></div><div class="ttdeci">Element flex(Element)</div><div class="ttdoc">Make a child element to expand proportionally to the space left in a container.</div><div class="ttdef"><b>Definition</b> <a href="flex_8cpp_source.html#l00123">flex.cpp:123</a></div></div>
<div class="ttc" id="agroup__dom_html_ga28a69f06a88c89fe7a507e33ab486411"><div class="ttname"><a href="group__dom.html#ga28a69f06a88c89fe7a507e33ab486411">ftxui::paragraphAlignRight</a></div><div class="ttdeci">Element paragraphAlignRight(const std::string &amp;text)</div><div class="ttdoc">Return an element drawing the paragraph on multiple lines, aligned on the right.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2paragraph_8cpp_source.html#l00060">src/ftxui/dom/paragraph.cpp:60</a></div></div>
<div class="ttc" id="agroup__dom_html_ga333d781a44885ed4b5ea8444015b86f7"><div class="ttname"><a href="group__dom.html#ga333d781a44885ed4b5ea8444015b86f7">ftxui::gaugeRight</a></div><div class="ttdeci">Element gaugeRight(float progress)</div><div class="ttdoc">Draw a high definition progress bar progressing from left to right.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2gauge_8cpp_source.html#l00191">src/ftxui/dom/gauge.cpp:191</a></div></div>
<div class="ttc" id="agroup__dom_html_ga33637d59d1e52aa06dd2a94162adbfe9"><div class="ttname"><a href="group__dom.html#ga33637d59d1e52aa06dd2a94162adbfe9">ftxui::focusCursorUnderlineBlinking</a></div><div class="ttdeci">Element focusCursorUnderlineBlinking(Element)</div><div class="ttdoc">Same as focus, but set the cursor shape to be a blinking underline.</div><div class="ttdef"><b>Definition</b> <a href="frame_8cpp_source.html#l00217">frame.cpp:217</a></div></div>
<div class="ttc" id="agroup__dom_html_ga353c769068e25303eb41fa2da565c604"><div class="ttname"><a href="group__dom.html#ga353c769068e25303eb41fa2da565c604">ftxui::bold</a></div><div class="ttdeci">Element bold(Element)</div><div class="ttdoc">Use a bold font, for elements with more emphasis.</div><div class="ttdef"><b>Definition</b> <a href="bold_8cpp_source.html#l00033">bold.cpp:33</a></div></div>
<div class="ttc" id="agroup__dom_html_ga37c2b93daf557f68064bc9fbf93ebde0"><div class="ttname"><a href="group__dom.html#ga37c2b93daf557f68064bc9fbf93ebde0">ftxui::separatorLight</a></div><div class="ttdeci">Element separatorLight()</div><div class="ttdoc">Draw a vertical or horizontal separation in between two other elements, using the LIGHT style.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2separator_8cpp_source.html#l00209">src/ftxui/dom/separator.cpp:209</a></div></div>
<div class="ttc" id="agroup__dom_html_ga3b08e0030a0831d3ec3e2a505908273b"><div class="ttname"><a href="group__dom.html#ga3b08e0030a0831d3ec3e2a505908273b">ftxui::spinner</a></div><div class="ttdeci">Element spinner(int charset_index, size_t image_index)</div><div class="ttdoc">Useful to represent the effect of time and/or events. This displays an ASCII art &quot;video&quot;.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2spinner_8cpp_source.html#l00282">src/ftxui/dom/spinner.cpp:282</a></div></div>
<div class="ttc" id="agroup__dom_html_ga3cf2db223a5efaa370f0ca6bb405b80e"><div class="ttname"><a href="group__dom.html#ga3cf2db223a5efaa370f0ca6bb405b80e">ftxui::borderRounded</a></div><div class="ttdeci">Element borderRounded(Element)</div><div class="ttdoc">Draw a rounded border around the element.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2border_8cpp_source.html#l00440">src/ftxui/dom/border.cpp:440</a></div></div>
<div class="ttc" id="agroup__dom_html_ga40451515a5b3049e7a1276cad8b9356c"><div class="ttname"><a href="group__dom.html#ga40451515a5b3049e7a1276cad8b9356c">ftxui::emptyElement</a></div><div class="ttdeci">Element emptyElement()</div><div class="ttdef"><b>Definition</b> <a href="dom_2util_8cpp_source.html#l00140">dom/util.cpp:140</a></div></div>
<div class="ttc" id="agroup__dom_html_ga42c7a33df6d890de30fc1ebb2d1b3ca6"><div class="ttname"><a href="group__dom.html#ga42c7a33df6d890de30fc1ebb2d1b3ca6">ftxui::yflex</a></div><div class="ttdeci">Element yflex(Element)</div><div class="ttdoc">Expand/Minimize if possible/needed on the Y axis.</div><div class="ttdef"><b>Definition</b> <a href="flex_8cpp_source.html#l00135">flex.cpp:135</a></div></div>
<div class="ttc" id="agroup__dom_html_ga4629196b5ffc280054d35f2a9977e829"><div class="ttname"><a href="group__dom.html#ga4629196b5ffc280054d35f2a9977e829">ftxui::flex_shrink</a></div><div class="ttdeci">Element flex_shrink(Element)</div><div class="ttdoc">Minimize if needed.</div><div class="ttdef"><b>Definition</b> <a href="flex_8cpp_source.html#l00159">flex.cpp:159</a></div></div>
<div class="ttc" id="agroup__dom_html_ga4f89e72e7001064e3eb8189c8317e95b"><div class="ttname"><a href="group__dom.html#ga4f89e72e7001064e3eb8189c8317e95b">ftxui::focusCursorBar</a></div><div class="ttdeci">Element focusCursorBar(Element)</div><div class="ttdoc">Same as focus, but set the cursor shape to be a still block.</div><div class="ttdef"><b>Definition</b> <a href="frame_8cpp_source.html#l00175">frame.cpp:175</a></div></div>
<div class="ttc" id="agroup__dom_html_ga509ef7e7f8913ea3de7efd45e3301ea1"><div class="ttname"><a href="group__dom.html#ga509ef7e7f8913ea3de7efd45e3301ea1">ftxui::focusCursorBlock</a></div><div class="ttdeci">Element focusCursorBlock(Element)</div><div class="ttdoc">Same as focus, but set the cursor shape to be a still block.</div><div class="ttdef"><b>Definition</b> <a href="frame_8cpp_source.html#l00147">frame.cpp:147</a></div></div>
<div class="ttc" id="agroup__dom_html_ga5ad450c97c4d084b64ffb5b5ca942664"><div class="ttname"><a href="group__dom.html#ga5ad450c97c4d084b64ffb5b5ca942664">ftxui::underlined</a></div><div class="ttdeci">Element underlined(Element)</div><div class="ttdoc">Underline the given element.</div><div class="ttdef"><b>Definition</b> <a href="underlined_8cpp_source.html#l00033">underlined.cpp:33</a></div></div>
<div class="ttc" id="agroup__dom_html_ga5b11656305fce8427b81daf1c35883f1"><div class="ttname"><a href="group__dom.html#ga5b11656305fce8427b81daf1c35883f1">ftxui::center</a></div><div class="ttdeci">Element center(Element)</div><div class="ttdoc">Center an element horizontally and vertically.</div><div class="ttdef"><b>Definition</b> <a href="composite__decorator_8cpp_source.html#l00031">composite_decorator.cpp:31</a></div></div>
<div class="ttc" id="agroup__dom_html_ga61e1fe02a18c2b18e31ccc9cd3943823"><div class="ttname"><a href="group__dom.html#ga61e1fe02a18c2b18e31ccc9cd3943823">ftxui::focusCursorUnderline</a></div><div class="ttdeci">Element focusCursorUnderline(Element)</div><div class="ttdoc">Same as focus, but set the cursor shape to be a still underline.</div><div class="ttdef"><b>Definition</b> <a href="frame_8cpp_source.html#l00203">frame.cpp:203</a></div></div>
<div class="ttc" id="agroup__dom_html_ga666c31419cc31cdadc9f8178ed63529e"><div class="ttname"><a href="group__dom.html#ga666c31419cc31cdadc9f8178ed63529e">ftxui::borderHeavy</a></div><div class="ttdeci">Element borderHeavy(Element)</div><div class="ttdoc">Draw a heavy border around the element.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2border_8cpp_source.html#l00370">src/ftxui/dom/border.cpp:370</a></div></div>
<div class="ttc" id="agroup__dom_html_ga672456b8f2091b615a30ff755418b37b"><div class="ttname"><a href="group__dom.html#ga672456b8f2091b615a30ff755418b37b">ftxui::inverted</a></div><div class="ttdeci">Element inverted(Element)</div><div class="ttdoc">Add a filter that will invert the foreground and the background colors.</div><div class="ttdef"><b>Definition</b> <a href="inverted_8cpp_source.html#l00034">inverted.cpp:34</a></div></div>
<div class="ttc" id="agroup__dom_html_ga6a105f6b0d07d7933379ff1ae9282fb8"><div class="ttname"><a href="group__dom.html#ga6a105f6b0d07d7933379ff1ae9282fb8">ftxui::paragraphAlignCenter</a></div><div class="ttdeci">Element paragraphAlignCenter(const std::string &amp;text)</div><div class="ttdoc">Return an element drawing the paragraph on multiple lines, aligned on the center.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2paragraph_8cpp_source.html#l00072">src/ftxui/dom/paragraph.cpp:72</a></div></div>
<div class="ttc" id="agroup__dom_html_ga6e9a97b66c14404a2b3f95f4dae414c2"><div class="ttname"><a href="group__dom.html#ga6e9a97b66c14404a2b3f95f4dae414c2">ftxui::gaugeUp</a></div><div class="ttdeci">Element gaugeUp(float progress)</div><div class="ttdoc">Draw a high definition progress bar progressing from bottom to top.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2gauge_8cpp_source.html#l00242">src/ftxui/dom/gauge.cpp:242</a></div></div>
<div class="ttc" id="agroup__dom_html_ga778e52afe28f1978f1f7ef065ed92d6d"><div class="ttname"><a href="group__dom.html#ga778e52afe28f1978f1f7ef065ed92d6d">ftxui::align_right</a></div><div class="ttdeci">Element align_right(Element)</div><div class="ttdoc">Align an element on the right side.</div><div class="ttdef"><b>Definition</b> <a href="composite__decorator_8cpp_source.html#l00039">composite_decorator.cpp:39</a></div></div>
<div class="ttc" id="agroup__dom_html_ga78447ba1ccb792963ad6d306f4ed1256"><div class="ttname"><a href="group__dom.html#ga78447ba1ccb792963ad6d306f4ed1256">ftxui::focusPosition</a></div><div class="ttdeci">Decorator focusPosition(int x, int y)</div><div class="ttdoc">Used inside a frame, this force the view to be scrolled toward a a given position....</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2focus_8cpp_source.html#l00069">src/ftxui/dom/focus.cpp:69</a></div></div>
<div class="ttc" id="agroup__dom_html_ga7eac3f709e905af8f583aed52093b7ce"><div class="ttname"><a href="group__dom.html#ga7eac3f709e905af8f583aed52093b7ce">ftxui::yflex_grow</a></div><div class="ttdeci">Element yflex_grow(Element)</div><div class="ttdoc">Expand if possible on the Y axis.</div><div class="ttdef"><b>Definition</b> <a href="flex_8cpp_source.html#l00153">flex.cpp:153</a></div></div>
<div class="ttc" id="agroup__dom_html_ga7f48136f949ccbde722dd93a6de4d0de"><div class="ttname"><a href="group__dom.html#ga7f48136f949ccbde722dd93a6de4d0de">ftxui::hscroll_indicator</a></div><div class="ttdeci">Element hscroll_indicator(Element)</div><div class="ttdoc">Display a horizontal scrollbar at the bottom. Colors follow the content.</div><div class="ttdef"><b>Definition</b> <a href="scroll__indicator_8cpp_source.html#l00076">scroll_indicator.cpp:76</a></div></div>
<div class="ttc" id="agroup__dom_html_ga81ed6b31f512e849247f13d249f6f20e"><div class="ttname"><a href="group__dom.html#ga81ed6b31f512e849247f13d249f6f20e">ftxui::flex_grow</a></div><div class="ttdeci">Element flex_grow(Element)</div><div class="ttdoc">Expand if possible.</div><div class="ttdef"><b>Definition</b> <a href="flex_8cpp_source.html#l00141">flex.cpp:141</a></div></div>
<div class="ttc" id="agroup__dom_html_ga81f2d3256c0cfbc70f820129286f08c6"><div class="ttname"><a href="group__dom.html#ga81f2d3256c0cfbc70f820129286f08c6">ftxui::separatorDashed</a></div><div class="ttdeci">Element separatorDashed()</div><div class="ttdoc">Draw a vertical or horizontal separation in between two other elements, using the DASHED style.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2separator_8cpp_source.html#l00246">src/ftxui/dom/separator.cpp:246</a></div></div>
<div class="ttc" id="agroup__dom_html_ga845b0ea50d51024aa4e050447b46e1dd"><div class="ttname"><a href="group__dom.html#ga845b0ea50d51024aa4e050447b46e1dd">ftxui::notflex</a></div><div class="ttdeci">Element notflex(Element)</div><div class="ttdoc">Make the element not flexible.</div><div class="ttdef"><b>Definition</b> <a href="flex_8cpp_source.html#l00177">flex.cpp:177</a></div></div>
<div class="ttc" id="agroup__dom_html_ga8594d70f0491def903370e86132fbf01"><div class="ttname"><a href="group__dom.html#ga8594d70f0491def903370e86132fbf01">ftxui::strikethrough</a></div><div class="ttdeci">Element strikethrough(Element)</div><div class="ttdoc">Apply a strikethrough to text.</div><div class="ttdef"><b>Definition</b> <a href="strikethrough_8cpp_source.html#l00017">strikethrough.cpp:17</a></div></div>
<div class="ttc" id="agroup__dom_html_ga8a8d190765de7bbd9e78f9e639c2a96d"><div class="ttname"><a href="group__dom.html#ga8a8d190765de7bbd9e78f9e639c2a96d">ftxui::italic</a></div><div class="ttdeci">Element italic(Element)</div><div class="ttdoc">Apply a underlinedDouble to text.</div><div class="ttdef"><b>Definition</b> <a href="italic_8cpp_source.html#l00017">italic.cpp:17</a></div></div>
<div class="ttc" id="agroup__dom_html_ga901ab1b6b2e0e8c295552168ab206441"><div class="ttname"><a href="group__dom.html#ga901ab1b6b2e0e8c295552168ab206441">ftxui::dbox</a></div><div class="ttdeci">Element dbox(Elements)</div><div class="ttdoc">Stack several element on top of each other.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2dbox_8cpp_source.html#l00055">src/ftxui/dom/dbox.cpp:55</a></div></div>
<div class="ttc" id="agroup__dom_html_ga95275a9271934cf76e970c6650cc224d"><div class="ttname"><a href="group__dom.html#ga95275a9271934cf76e970c6650cc224d">ftxui::xflex_shrink</a></div><div class="ttdeci">Element xflex_shrink(Element)</div><div class="ttdoc">Minimize if needed on the X axis.</div><div class="ttdef"><b>Definition</b> <a href="flex_8cpp_source.html#l00165">flex.cpp:165</a></div></div>
<div class="ttc" id="agroup__dom_html_ga97898b9f77b3edd330eaef22fce7cf2b"><div class="ttname"><a href="group__dom.html#ga97898b9f77b3edd330eaef22fce7cf2b">ftxui::gaugeLeft</a></div><div class="ttdeci">Element gaugeLeft(float progress)</div><div class="ttdoc">Draw a high definition progress bar progressing from right to left.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2gauge_8cpp_source.html#l00213">src/ftxui/dom/gauge.cpp:213</a></div></div>
<div class="ttc" id="agroup__dom_html_ga97a10482d591aade2958da0f2f19b371"><div class="ttname"><a href="group__dom.html#ga97a10482d591aade2958da0f2f19b371">ftxui::separatorCharacter</a></div><div class="ttdeci">Element separatorCharacter(std::string)</div><div class="ttdoc">Draw a vertical or horizontal separation in between two other elements.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2separator_8cpp_source.html#l00395">src/ftxui/dom/separator.cpp:395</a></div></div>
<div class="ttc" id="agroup__dom_html_ga9f9f7485a45aa9d432726ca9845d1eac"><div class="ttname"><a href="group__dom.html#ga9f9f7485a45aa9d432726ca9845d1eac">ftxui::vtext</a></div><div class="ttdeci">Element vtext(std::wstring text)</div><div class="ttdoc">Display a piece unicode text vertically.</div><div class="ttdef"><b>Definition</b> <a href="text_8cpp_source.html#l00220">text.cpp:220</a></div></div>
<div class="ttc" id="agroup__dom_html_gaa074cdab57eeb47b99f1699bcc8addd8"><div class="ttname"><a href="group__dom.html#gaa074cdab57eeb47b99f1699bcc8addd8">ftxui::borderLight</a></div><div class="ttdeci">Element borderLight(Element)</div><div class="ttdoc">Draw a light border around the element.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2border_8cpp_source.html#l00335">src/ftxui/dom/border.cpp:335</a></div></div>
<div class="ttc" id="agroup__dom_html_gaa2d7d671f184f85e0f396f2610fa6c2e"><div class="ttname"><a href="group__dom.html#gaa2d7d671f184f85e0f396f2610fa6c2e">ftxui::focus</a></div><div class="ttdeci">Element focus(Element)</div><div class="ttdoc">Set the child to be the one focused among its siblings.</div><div class="ttdef"><b>Definition</b> <a href="frame_8cpp_source.html#l00101">frame.cpp:101</a></div></div>
<div class="ttc" id="agroup__dom_html_gaa334a836eccc573e1137a1ba29d07d8a"><div class="ttname"><a href="group__dom.html#gaa334a836eccc573e1137a1ba29d07d8a">ftxui::paragraphAlignLeft</a></div><div class="ttdeci">Element paragraphAlignLeft(const std::string &amp;text)</div><div class="ttdoc">Return an element drawing the paragraph on multiple lines, aligned on the left.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2paragraph_8cpp_source.html#l00049">src/ftxui/dom/paragraph.cpp:49</a></div></div>
<div class="ttc" id="agroup__dom_html_gaa97cfcfbe6df92dac085454395ec7b2f"><div class="ttname"><a href="group__dom.html#gaa97cfcfbe6df92dac085454395ec7b2f">ftxui::borderWith</a></div><div class="ttdeci">Decorator borderWith(const Pixel &amp;)</div><div class="ttdoc">Same as border but with a constant Pixel around the element.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2border_8cpp_source.html#l00234">src/ftxui/dom/border.cpp:234</a></div></div>
<div class="ttc" id="agroup__dom_html_gabc9db79957d4dd36deb8ca79938e4c41"><div class="ttname"><a href="group__dom.html#gabc9db79957d4dd36deb8ca79938e4c41">ftxui::borderStyled</a></div><div class="ttdeci">Decorator borderStyled(BorderStyle)</div><div class="ttdoc">Same as border but with different styles.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2border_8cpp_source.html#l00243">src/ftxui/dom/border.cpp:243</a></div></div>
<div class="ttc" id="agroup__dom_html_gac1ef1cf6bf7cd0759ffa195071edb2a0"><div class="ttname"><a href="group__dom.html#gac1ef1cf6bf7cd0759ffa195071edb2a0">ftxui::separator</a></div><div class="ttdeci">Element separator()</div><div class="ttdoc">Draw a vertical or horizontal separation in between two other elements.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2separator_8cpp_source.html#l00134">src/ftxui/dom/separator.cpp:134</a></div></div>
<div class="ttc" id="agroup__dom_html_gac2a9ed2d22ec3c8811b61f4a901ed367"><div class="ttname"><a href="group__dom.html#gac2a9ed2d22ec3c8811b61f4a901ed367">ftxui::filler</a></div><div class="ttdeci">Element filler()</div><div class="ttdoc">An element that will take expand proportionally to the space left in a container.</div><div class="ttdef"><b>Definition</b> <a href="flex_8cpp_source.html#l00098">flex.cpp:98</a></div></div>
<div class="ttc" id="agroup__dom_html_gac6a3b77604739516e809369810896646"><div class="ttname"><a href="group__dom.html#gac6a3b77604739516e809369810896646">ftxui::dim</a></div><div class="ttdeci">Element dim(Element)</div><div class="ttdoc">Use a light font, for elements with less emphasis.</div><div class="ttdef"><b>Definition</b> <a href="dim_8cpp_source.html#l00033">dim.cpp:33</a></div></div>
<div class="ttc" id="agroup__dom_html_gaca42bd6c44d8d366d5c1014330402086"><div class="ttname"><a href="group__dom.html#gaca42bd6c44d8d366d5c1014330402086">ftxui::automerge</a></div><div class="ttdeci">Element automerge(Element child)</div><div class="ttdoc">Enable character to be automatically merged with others nearby.</div><div class="ttdef"><b>Definition</b> <a href="automerge_8cpp_source.html#l00017">automerge.cpp:17</a></div></div>
<div class="ttc" id="agroup__dom_html_gad0eac58eac9e6cd9a04879b20f8e123b"><div class="ttname"><a href="group__dom.html#gad0eac58eac9e6cd9a04879b20f8e123b">ftxui::hyperlink</a></div><div class="ttdeci">Decorator hyperlink(std::string link)</div><div class="ttdoc">Decorate using a hyperlink. The link will be opened when the user clicks on it. This is supported onl...</div><div class="ttdef"><b>Definition</b> <a href="hyperlink_8cpp_source.html#l00070">hyperlink.cpp:70</a></div></div>
<div class="ttc" id="agroup__dom_html_gad57613de5895e774218d91dea48d074b"><div class="ttname"><a href="group__dom.html#gad57613de5895e774218d91dea48d074b">ftxui::blink</a></div><div class="ttdeci">Element blink(Element)</div><div class="ttdoc">The text drawn alternates in between visible and hidden.</div><div class="ttdef"><b>Definition</b> <a href="blink_8cpp_source.html#l00033">blink.cpp:33</a></div></div>
<div class="ttc" id="agroup__dom_html_gad907a8a48bb9f9dfdb06402e9fc12316"><div class="ttname"><a href="group__dom.html#gad907a8a48bb9f9dfdb06402e9fc12316">ftxui::vcenter</a></div><div class="ttdeci">Element vcenter(Element)</div><div class="ttdoc">Center an element vertically.</div><div class="ttdef"><b>Definition</b> <a href="composite__decorator_8cpp_source.html#l00023">composite_decorator.cpp:23</a></div></div>
<div class="ttc" id="agroup__dom_html_gadd376830fdb51b0bf52672ef17515989"><div class="ttname"><a href="group__dom.html#gadd376830fdb51b0bf52672ef17515989">ftxui::separatorDouble</a></div><div class="ttdeci">Element separatorDouble()</div><div class="ttdoc">Draw a vertical or horizontal separation in between two other elements, using the DOUBLE style.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2separator_8cpp_source.html#l00320">src/ftxui/dom/separator.cpp:320</a></div></div>
<div class="ttc" id="agroup__dom_html_gadda589914ba8fe863c905b6566557768"><div class="ttname"><a href="group__dom.html#gadda589914ba8fe863c905b6566557768">ftxui::focusCursorBlockBlinking</a></div><div class="ttdeci">Element focusCursorBlockBlinking(Element)</div><div class="ttdoc">Same as focus, but set the cursor shape to be a blinking block.</div><div class="ttdef"><b>Definition</b> <a href="frame_8cpp_source.html#l00161">frame.cpp:161</a></div></div>
<div class="ttc" id="agroup__dom_html_gae4de548aa67ab77cb345e4ddec6b248b"><div class="ttname"><a href="group__dom.html#gae4de548aa67ab77cb345e4ddec6b248b">ftxui::paragraphAlignJustify</a></div><div class="ttdeci">Element paragraphAlignJustify(const std::string &amp;text)</div><div class="ttdoc">Return an element drawing the paragraph on multiple lines, aligned using a justified alignment....</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2paragraph_8cpp_source.html#l00085">src/ftxui/dom/paragraph.cpp:85</a></div></div>
<div class="ttc" id="agroup__dom_html_gae8537acd423d47cf07e61bd774fb1098"><div class="ttname"><a href="group__dom.html#gae8537acd423d47cf07e61bd774fb1098">ftxui::border</a></div><div class="ttdeci">Element border(Element)</div><div class="ttdoc">Draw a border around the element.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2border_8cpp_source.html#l00227">src/ftxui/dom/border.cpp:227</a></div></div>
<div class="ttc" id="agroup__dom_html_gaf0649e89a9960f1c2703e48c1817645b"><div class="ttname"><a href="group__dom.html#gaf0649e89a9960f1c2703e48c1817645b">ftxui::separatorHeavy</a></div><div class="ttdeci">Element separatorHeavy()</div><div class="ttdoc">Draw a vertical or horizontal separation in between two other elements, using the HEAVY style.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2separator_8cpp_source.html#l00283">src/ftxui/dom/separator.cpp:283</a></div></div>
<div class="ttc" id="agroup__dom_html_gaf20f7d6fb275d109f0bdc01a2e4d3f3e"><div class="ttname"><a href="group__dom.html#gaf20f7d6fb275d109f0bdc01a2e4d3f3e">ftxui::borderEmpty</a></div><div class="ttdeci">Element borderEmpty(Element)</div><div class="ttdoc">Draw an empty border around the element.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2border_8cpp_source.html#l00475">src/ftxui/dom/border.cpp:475</a></div></div>
<div class="ttc" id="agroup__dom_html_gaf7d0757f5965aa579bccc125ff909256"><div class="ttname"><a href="group__dom.html#gaf7d0757f5965aa579bccc125ff909256">ftxui::yflex_shrink</a></div><div class="ttdeci">Element yflex_shrink(Element)</div><div class="ttdoc">Minimize if needed on the Y axis.</div><div class="ttdef"><b>Definition</b> <a href="flex_8cpp_source.html#l00171">flex.cpp:171</a></div></div>
<div class="ttc" id="agroup__dom_html_gaf7d0d1e44c1a5424e42a5cddceacf7f7"><div class="ttname"><a href="group__dom.html#gaf7d0d1e44c1a5424e42a5cddceacf7f7">ftxui::hcenter</a></div><div class="ttdeci">Element hcenter(Element)</div><div class="ttdoc">Center an element horizontally.</div><div class="ttdef"><b>Definition</b> <a href="composite__decorator_8cpp_source.html#l00015">composite_decorator.cpp:15</a></div></div>
<div class="ttc" id="agroup__dom_html_gafe3103dd0b8240c5443892484ef5af9c"><div class="ttname"><a href="group__dom.html#gafe3103dd0b8240c5443892484ef5af9c">ftxui::BorderStyle</a></div><div class="ttdeci">BorderStyle</div><div class="ttdoc">BorderStyle is an enumeration that represents the different styles of borders that can be applied to ...</div><div class="ttdef"><b>Definition</b> <a href="elements_8hpp_source.html#l00035">elements.hpp:35</a></div></div>
<div class="ttc" id="agroup__dom_html_gafe537f915cac5613261580bae3a8fe33"><div class="ttname"><a href="group__dom.html#gafe537f915cac5613261580bae3a8fe33">ftxui::gaugeDown</a></div><div class="ttdeci">Element gaugeDown(float progress)</div><div class="ttdoc">Draw a high definition progress bar progressing from top to bottom.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2gauge_8cpp_source.html#l00271">src/ftxui/dom/gauge.cpp:271</a></div></div>
<div class="ttc" id="agroup__dom_html_ggafe3103dd0b8240c5443892484ef5af9ca2f0d18fc0d0fa4a6cd92dc328501874d"><div class="ttname"><a href="group__dom.html#ggafe3103dd0b8240c5443892484ef5af9ca2f0d18fc0d0fa4a6cd92dc328501874d">ftxui::EMPTY</a></div><div class="ttdeci">@ EMPTY</div><div class="ttdef"><b>Definition</b> <a href="elements_8hpp_source.html#l00041">elements.hpp:41</a></div></div>
<div class="ttc" id="agroup__dom_html_ggafe3103dd0b8240c5443892484ef5af9ca33465d1d419b1074fb259ef444609e92"><div class="ttname"><a href="group__dom.html#ggafe3103dd0b8240c5443892484ef5af9ca33465d1d419b1074fb259ef444609e92">ftxui::DOUBLE</a></div><div class="ttdeci">@ DOUBLE</div><div class="ttdef"><b>Definition</b> <a href="elements_8hpp_source.html#l00039">elements.hpp:39</a></div></div>
<div class="ttc" id="agroup__dom_html_ggafe3103dd0b8240c5443892484ef5af9ca34cd68a92c52759ed9b545969a11c2da"><div class="ttname"><a href="group__dom.html#ggafe3103dd0b8240c5443892484ef5af9ca34cd68a92c52759ed9b545969a11c2da">ftxui::HEAVY</a></div><div class="ttdeci">@ HEAVY</div><div class="ttdef"><b>Definition</b> <a href="elements_8hpp_source.html#l00038">elements.hpp:38</a></div></div>
<div class="ttc" id="agroup__dom_html_ggafe3103dd0b8240c5443892484ef5af9ca655074b92b285adff7d18a45748bf493"><div class="ttname"><a href="group__dom.html#ggafe3103dd0b8240c5443892484ef5af9ca655074b92b285adff7d18a45748bf493">ftxui::ROUNDED</a></div><div class="ttdeci">@ ROUNDED</div><div class="ttdef"><b>Definition</b> <a href="elements_8hpp_source.html#l00040">elements.hpp:40</a></div></div>
<div class="ttc" id="agroup__dom_html_ggafe3103dd0b8240c5443892484ef5af9ca830310bdfd296d7cd00c59773579b892"><div class="ttname"><a href="group__dom.html#ggafe3103dd0b8240c5443892484ef5af9ca830310bdfd296d7cd00c59773579b892">ftxui::DASHED</a></div><div class="ttdeci">@ DASHED</div><div class="ttdef"><b>Definition</b> <a href="elements_8hpp_source.html#l00037">elements.hpp:37</a></div></div>
<div class="ttc" id="agroup__dom_html_ggafe3103dd0b8240c5443892484ef5af9caf917d6c11c85b4ac32e30d1cc9da25eb"><div class="ttname"><a href="group__dom.html#ggafe3103dd0b8240c5443892484ef5af9caf917d6c11c85b4ac32e30d1cc9da25eb">ftxui::LIGHT</a></div><div class="ttdeci">@ LIGHT</div><div class="ttdef"><b>Definition</b> <a href="elements_8hpp_source.html#l00036">elements.hpp:36</a></div></div>
<div class="ttc" id="alinear__gradient_8hpp_html"><div class="ttname"><a href="linear__gradient_8hpp.html">linear_gradient.hpp</a></div></div>
<div class="ttc" id="anamespaceftxui_1_1Dimension_html_aee138f0b60ddc07682a785f55eb5fda6"><div class="ttname"><a href="namespaceftxui_1_1Dimension.html#aee138f0b60ddc07682a785f55eb5fda6">ftxui::Dimension::Fit</a></div><div class="ttdeci">Dimensions Fit(Element &amp;, bool extend_beyond_screen=false)</div></div>
<div class="ttc" id="anamespaceftxui_html_a04711c04f28aabfa0e5928a35baaec53"><div class="ttname"><a href="namespaceftxui.html#a04711c04f28aabfa0e5928a35baaec53">ftxui::WidthOrHeight</a></div><div class="ttdeci">WidthOrHeight</div><div class="ttdef"><b>Definition</b> <a href="elements_8hpp_source.html#l00161">elements.hpp:161</a></div></div>
<div class="ttc" id="anamespaceftxui_html_a04711c04f28aabfa0e5928a35baaec53a38b9241136017b93ea2755a49cf0a000"><div class="ttname"><a href="namespaceftxui.html#a04711c04f28aabfa0e5928a35baaec53a38b9241136017b93ea2755a49cf0a000">ftxui::HEIGHT</a></div><div class="ttdeci">@ HEIGHT</div><div class="ttdef"><b>Definition</b> <a href="elements_8hpp_source.html#l00161">elements.hpp:161</a></div></div>
<div class="ttc" id="anamespaceftxui_html_a04711c04f28aabfa0e5928a35baaec53a73c0818986b7c462c2977f57afd00522"><div class="ttname"><a href="namespaceftxui.html#a04711c04f28aabfa0e5928a35baaec53a73c0818986b7c462c2977f57afd00522">ftxui::WIDTH</a></div><div class="ttdeci">@ WIDTH</div><div class="ttdef"><b>Definition</b> <a href="elements_8hpp_source.html#l00161">elements.hpp:161</a></div></div>
<div class="ttc" id="anamespaceftxui_html_a164021903e9ac6f1357e4186582891e3"><div class="ttname"><a href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">ftxui::Decorator</a></div><div class="ttdeci">std::function&lt; Element(Element)&gt; Decorator</div><div class="ttdef"><b>Definition</b> <a href="elements_8hpp_source.html#l00024">elements.hpp:24</a></div></div>
<div class="ttc" id="anamespaceftxui_html_a168a235aa438b6c72df5861322154be3"><div class="ttname"><a href="namespaceftxui.html#a168a235aa438b6c72df5861322154be3">ftxui::flexbox</a></div><div class="ttdeci">Element flexbox(Elements, FlexboxConfig config=FlexboxConfig())</div><div class="ttdoc">A container displaying elements on row/columns and capable of wrapping on the next column/row when fu...</div><div class="ttdef"><b>Definition</b> <a href="flexbox_8cpp_source.html#l00251">flexbox.cpp:251</a></div></div>
<div class="ttc" id="anamespaceftxui_html_a1a0211233bacd4eb4d31a8e3d58b5f48"><div class="ttname"><a href="namespaceftxui.html#a1a0211233bacd4eb4d31a8e3d58b5f48">ftxui::separatorVSelector</a></div><div class="ttdeci">Element separatorVSelector(float up, float down, Color unselected_color, Color selected_color)</div><div class="ttdoc">Draw an vertical bar, with the area in between up/downcolored differently.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2separator_8cpp_source.html#l00512">src/ftxui/dom/separator.cpp:512</a></div></div>
<div class="ttc" id="anamespaceftxui_html_a2bc31f2d685189e5c61d2293a1f51b4f"><div class="ttname"><a href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">ftxui::Element</a></div><div class="ttdeci">std::shared_ptr&lt; Node &gt; Element</div><div class="ttdef"><b>Definition</b> <a href="elements_8hpp_source.html#l00022">elements.hpp:22</a></div></div>
<div class="ttc" id="anamespaceftxui_html_a2d0617c0912b732f059cf360ac951c49"><div class="ttname"><a href="namespaceftxui.html#a2d0617c0912b732f059cf360ac951c49">ftxui::xframe</a></div><div class="ttdeci">Element xframe(Element)</div><div class="ttdoc">Same as frame, but only on the x-axis.</div><div class="ttdef"><b>Definition</b> <a href="frame_8cpp_source.html#l00126">frame.cpp:126</a></div></div>
<div class="ttc" id="anamespaceftxui_html_a345b31919048562675615d5af78e6322"><div class="ttname"><a href="namespaceftxui.html#a345b31919048562675615d5af78e6322">ftxui::hflow</a></div><div class="ttdeci">Element hflow(Elements)</div><div class="ttdoc">A container displaying elements in rows from left to right. When filled, it starts on a new row below...</div><div class="ttdef"><b>Definition</b> <a href="flexbox_8cpp_source.html#l00269">flexbox.cpp:269</a></div></div>
<div class="ttc" id="anamespaceftxui_html_a4080865d947eea48cf695531f66a5160"><div class="ttname"><a href="namespaceftxui.html#a4080865d947eea48cf695531f66a5160">ftxui::selectionStyle</a></div><div class="ttdeci">Decorator selectionStyle(std::function&lt; void(Pixel &amp;)&gt; style)</div><div class="ttdoc">Set the style of an element when selected.</div><div class="ttdef"><b>Definition</b> <a href="selection__style_8cpp_source.html#l00086">selection_style.cpp:86</a></div></div>
<div class="ttc" id="anamespaceftxui_html_a50413065cee4757447b35c3a500667d3"><div class="ttname"><a href="namespaceftxui.html#a50413065cee4757447b35c3a500667d3">ftxui::separatorHSelector</a></div><div class="ttdeci">Element separatorHSelector(float left, float right, Color unselected_color, Color selected_color)</div><div class="ttdoc">Draw a horizontal bar, with the area in between left/right colored differently.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2separator_8cpp_source.html#l00442">src/ftxui/dom/separator.cpp:442</a></div></div>
<div class="ttc" id="anamespaceftxui_html_a552ba6d33b3c9bec586b99fba4c243ac"><div class="ttname"><a href="namespaceftxui.html#a552ba6d33b3c9bec586b99fba4c243ac">ftxui::hbox</a></div><div class="ttdeci">Element hbox(Elements)</div><div class="ttdoc">A container displaying elements horizontally one by one.</div><div class="ttdef"><b>Definition</b> <a href="hbox_8cpp_source.html#l00094">hbox.cpp:94</a></div></div>
<div class="ttc" id="anamespaceftxui_html_a57d7bdf155e190de514a689abb4e9a35"><div class="ttname"><a href="namespaceftxui.html#a57d7bdf155e190de514a689abb4e9a35">ftxui::canvas</a></div><div class="ttdeci">Element canvas(ConstRef&lt; Canvas &gt;)</div><div class="ttdoc">Produce an element from a Canvas, or a reference to a Canvas.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2canvas_8cpp_source.html#l00891">src/ftxui/dom/canvas.cpp:891</a></div></div>
<div class="ttc" id="anamespaceftxui_html_a5d4aa06ca6cc6a72e981bd5386f93f0a"><div class="ttname"><a href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">ftxui::Elements</a></div><div class="ttdeci">std::vector&lt; Element &gt; Elements</div><div class="ttdef"><b>Definition</b> <a href="elements_8hpp_source.html#l00023">elements.hpp:23</a></div></div>
<div class="ttc" id="anamespaceftxui_html_a5d98498c51cfbc03f37e46d46ec8acf5"><div class="ttname"><a href="namespaceftxui.html#a5d98498c51cfbc03f37e46d46ec8acf5">ftxui::selectionForegroundColor</a></div><div class="ttdeci">Decorator selectionForegroundColor(Color foreground)</div><div class="ttdoc">Set the foreground color of an element when selected. Note that the style is applied on top of the ex...</div><div class="ttdef"><b>Definition</b> <a href="selection__style_8cpp_source.html#l00069">selection_style.cpp:69</a></div></div>
<div class="ttc" id="anamespaceftxui_html_a65a2e15f64ae3bc205c485abc3a5aeb9"><div class="ttname"><a href="namespaceftxui.html#a65a2e15f64ae3bc205c485abc3a5aeb9">ftxui::operator|</a></div><div class="ttdeci">Component operator|(Component component, ComponentDecorator decorator)</div><div class="ttdef"><b>Definition</b> <a href="component_2util_8cpp_source.html#l00012">component/util.cpp:12</a></div></div>
<div class="ttc" id="anamespaceftxui_html_a6c965b8f6450a50a938120b5f6ddea96"><div class="ttname"><a href="namespaceftxui.html#a6c965b8f6450a50a938120b5f6ddea96">ftxui::selectionBackgroundColor</a></div><div class="ttdeci">Decorator selectionBackgroundColor(Color foreground)</div><div class="ttdoc">Set the background color of an element when selected. Note that the style is applied on top of the ex...</div><div class="ttdef"><b>Definition</b> <a href="selection__style_8cpp_source.html#l00061">selection_style.cpp:61</a></div></div>
<div class="ttc" id="anamespaceftxui_html_a7ea9d3ceb2a977955125c6e4a6072325"><div class="ttname"><a href="namespaceftxui.html#a7ea9d3ceb2a977955125c6e4a6072325">ftxui::yframe</a></div><div class="ttdeci">Element yframe(Element)</div><div class="ttdoc">Same as frame, but only on the y-axis.</div><div class="ttdef"><b>Definition</b> <a href="frame_8cpp_source.html#l00134">frame.cpp:134</a></div></div>
<div class="ttc" id="anamespaceftxui_html_a925a73b7f0eb4b5bc11af23f4ca18019"><div class="ttname"><a href="namespaceftxui.html#a925a73b7f0eb4b5bc11af23f4ca18019">ftxui::selectionColor</a></div><div class="ttdeci">Decorator selectionColor(Color foreground)</div><div class="ttdoc">Set the color of an element when selected.</div><div class="ttdef"><b>Definition</b> <a href="selection__style_8cpp_source.html#l00078">selection_style.cpp:78</a></div></div>
<div class="ttc" id="anamespaceftxui_html_a9e3e2988ed61a129d82d634ad66f7eb1"><div class="ttname"><a href="namespaceftxui.html#a9e3e2988ed61a129d82d634ad66f7eb1">ftxui::select</a></div><div class="ttdeci">Element select(Element e)</div><div class="ttdoc">Set the child to be the one focused among its siblings.</div><div class="ttdef"><b>Definition</b> <a href="frame_8cpp_source.html#l00108">frame.cpp:108</a></div></div>
<div class="ttc" id="anamespaceftxui_html_aa7e1317c76cefc5018503de4f6e09ea3"><div class="ttname"><a href="namespaceftxui.html#aa7e1317c76cefc5018503de4f6e09ea3">ftxui::selectionStyleReset</a></div><div class="ttdeci">Element selectionStyleReset(Element)</div><div class="ttdoc">Reset the selection style of an element.</div><div class="ttdef"><b>Definition</b> <a href="selection__style_8cpp_source.html#l00055">selection_style.cpp:55</a></div></div>
<div class="ttc" id="anamespaceftxui_html_aaff8245861617a3d9e846e99de582a63"><div class="ttname"><a href="namespaceftxui.html#aaff8245861617a3d9e846e99de582a63">ftxui::reflect</a></div><div class="ttdeci">Decorator reflect(Box &amp;box)</div><div class="ttdef"><b>Definition</b> <a href="reflect_8cpp_source.html#l00043">reflect.cpp:43</a></div></div>
<div class="ttc" id="anamespaceftxui_html_ab07cb9a766f38fc867f8fe736ce2e6e3"><div class="ttname"><a href="namespaceftxui.html#ab07cb9a766f38fc867f8fe736ce2e6e3">ftxui::GraphFunction</a></div><div class="ttdeci">std::function&lt; std::vector&lt; int &gt;(int, int)&gt; GraphFunction</div><div class="ttdef"><b>Definition</b> <a href="elements_8hpp_source.html#l00025">elements.hpp:25</a></div></div>
<div class="ttc" id="anamespaceftxui_html_abcdf409d605edafd3191cd7ba47bcbd1"><div class="ttname"><a href="namespaceftxui.html#abcdf409d605edafd3191cd7ba47bcbd1">ftxui::gridbox</a></div><div class="ttdeci">Element gridbox(std::vector&lt; Elements &gt; lines)</div><div class="ttdoc">A container displaying a grid of elements.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2gridbox_8cpp_source.html#l00173">src/ftxui/dom/gridbox.cpp:173</a></div></div>
<div class="ttc" id="anamespaceftxui_html_ac54cdd05db30871ce082a8fa650545da"><div class="ttname"><a href="namespaceftxui.html#ac54cdd05db30871ce082a8fa650545da">ftxui::paragraph</a></div><div class="ttdeci">Elements paragraph(std::wstring text)</div></div>
<div class="ttc" id="anamespaceftxui_html_ad0d6a96f6e1fb6d67d9fa6323062a737"><div class="ttname"><a href="namespaceftxui.html#ad0d6a96f6e1fb6d67d9fa6323062a737">ftxui::frame</a></div><div class="ttdeci">Element frame(Element)</div><div class="ttdoc">Allow an element to be displayed inside a 'virtual' area. It size can be larger than its container....</div><div class="ttdef"><b>Definition</b> <a href="frame_8cpp_source.html#l00118">frame.cpp:118</a></div></div>
<div class="ttc" id="anamespaceftxui_html_ade35e69d695327db85be01c9787c39f8"><div class="ttname"><a href="namespaceftxui.html#ade35e69d695327db85be01c9787c39f8">ftxui::operator|=</a></div><div class="ttdeci">Component &amp; operator|=(Component &amp;component, ComponentDecorator decorator)</div><div class="ttdef"><b>Definition</b> <a href="component_2util_8cpp_source.html#l00022">component/util.cpp:22</a></div></div>
<div class="ttc" id="anamespaceftxui_html_ae09f44b989d381a387329fd0a0935926"><div class="ttname"><a href="namespaceftxui.html#ae09f44b989d381a387329fd0a0935926">ftxui::Constraint</a></div><div class="ttdeci">Constraint</div><div class="ttdef"><b>Definition</b> <a href="elements_8hpp_source.html#l00162">elements.hpp:162</a></div></div>
<div class="ttc" id="anamespaceftxui_html_ae09f44b989d381a387329fd0a0935926a41b05932cd237b2b133fff1ade85bed5"><div class="ttname"><a href="namespaceftxui.html#ae09f44b989d381a387329fd0a0935926a41b05932cd237b2b133fff1ade85bed5">ftxui::LESS_THAN</a></div><div class="ttdeci">@ LESS_THAN</div><div class="ttdef"><b>Definition</b> <a href="elements_8hpp_source.html#l00162">elements.hpp:162</a></div></div>
<div class="ttc" id="anamespaceftxui_html_ae09f44b989d381a387329fd0a0935926a59a84258a4cb9025b567ee5139455029"><div class="ttname"><a href="namespaceftxui.html#ae09f44b989d381a387329fd0a0935926a59a84258a4cb9025b567ee5139455029">ftxui::EQUAL</a></div><div class="ttdeci">@ EQUAL</div><div class="ttdef"><b>Definition</b> <a href="elements_8hpp_source.html#l00162">elements.hpp:162</a></div></div>
<div class="ttc" id="anamespaceftxui_html_ae09f44b989d381a387329fd0a0935926a5fae95457121bd697edd588d1b64cc7c"><div class="ttname"><a href="namespaceftxui.html#ae09f44b989d381a387329fd0a0935926a5fae95457121bd697edd588d1b64cc7c">ftxui::GREATER_THAN</a></div><div class="ttdeci">@ GREATER_THAN</div><div class="ttdef"><b>Definition</b> <a href="elements_8hpp_source.html#l00162">elements.hpp:162</a></div></div>
<div class="ttc" id="anamespaceftxui_html_ae0da51b614e95a0687727644b5898a23"><div class="ttname"><a href="namespaceftxui.html#ae0da51b614e95a0687727644b5898a23">ftxui::vflow</a></div><div class="ttdeci">Element vflow(Elements)</div><div class="ttdoc">A container displaying elements in rows from top to bottom. When filled, it starts on a new columns o...</div><div class="ttdef"><b>Definition</b> <a href="flexbox_8cpp_source.html#l00289">flexbox.cpp:289</a></div></div>
<div class="ttc" id="anamespaceftxui_html_ae78c2b2b147e65701493465f8e3f4d89"><div class="ttname"><a href="namespaceftxui.html#ae78c2b2b147e65701493465f8e3f4d89">ftxui::graph</a></div><div class="ttdeci">Element graph(GraphFunction)</div><div class="ttdoc">Draw a graph using a GraphFunction.</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2graph_8cpp_source.html#l00071">src/ftxui/dom/graph.cpp:71</a></div></div>
<div class="ttc" id="anode_8hpp_html"><div class="ttname"><a href="node_8hpp.html">node.hpp</a></div></div>
<div class="ttc" id="aref_8hpp_html"><div class="ttname"><a href="ref_8hpp.html">ref.hpp</a></div></div>
<div class="ttc" id="ascreen_8cpp_html_a972107f15f3c0c099eb9fd605e7f51c6"><div class="ttname"><a href="screen_8cpp.html#a972107f15f3c0c099eb9fd605e7f51c6">left</a></div><div class="ttdeci">std::uint8_t left</div><div class="ttdef"><b>Definition</b> <a href="screen_8cpp_source.html#l00129">screen.cpp:129</a></div></div>
<div class="ttc" id="ascreen_8cpp_html_a9cdd0454d64ec151b59fdd7d22ed505a"><div class="ttname"><a href="screen_8cpp.html#a9cdd0454d64ec151b59fdd7d22ed505a">down</a></div><div class="ttdeci">std::uint8_t down</div><div class="ttdef"><b>Definition</b> <a href="screen_8cpp_source.html#l00132">screen.cpp:132</a></div></div>
<div class="ttc" id="ascreen_8cpp_html_aa4b74e56e675912bbc06504407fc7a46"><div class="ttname"><a href="screen_8cpp.html#aa4b74e56e675912bbc06504407fc7a46">right</a></div><div class="ttdeci">std::uint8_t right</div><div class="ttdef"><b>Definition</b> <a href="screen_8cpp_source.html#l00131">screen.cpp:131</a></div></div>
<div class="ttc" id="aterminal_8hpp_html"><div class="ttname"><a href="terminal_8hpp.html">terminal.hpp</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="dom-text"></a>
text</h1>
<p>The most simple widget. It displays a text. </p><div class="fragment"><div class="line">text(<span class="stringliteral">&quot;I am a piece of text&quot;</span>);</div>
</div><!-- fragment --> <div class="fragment"><div class="line">I am a piece of text.</div>
</div><!-- fragment --><h1><a class="anchor" id="dom-vtext"></a>
vtext</h1>
<p>Identical to <code>ftxui::text</code>, but displayed vertically.</p>
<p>Code: </p><div class="fragment"><div class="line">vtext(<span class="stringliteral">&quot;HELLO&quot;</span>);</div>
</div><!-- fragment --><p>Terminal output: </p><div class="fragment"><div class="line">H</div>
<div class="line">E</div>
<div class="line">L</div>
<div class="line">L</div>
<div class="line">O</div>
</div><!-- fragment --><h1><a class="anchor" id="dom-paragraph"></a>
paragraph </h1>
<p>Similar to <code>ftxui::text</code>, but the individual word are wrapped along multiple lines, depending on the width of its container.</p>
<p>Sample Code: </p><div class="fragment"><div class="line">paragraph(<span class="stringliteral">&quot;A very long text&quot;</span>)</div>
</div><!-- fragment --><p><img src="https://user-images.githubusercontent.com/4759106/147251370-983a06e7-6f41-4113-92b8-942f43d34d06.gif" alt="ezgif com-gif-maker (4)" class="inline"/></p>
<p>For a more detailed example refer to <a href="https://arthursonzogni.github.io/FTXUI/examples_2dom_2paragraph_8cpp-example.html">detailed example</a>. Paragraph also includes a number of other variants as shown below: </p><div class="fragment"><div class="line"><span class="keyword">namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a> {</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="namespaceftxui.html#ac54cdd05db30871ce082a8fa650545da">paragraph</a>(std::string text);</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gaa334a836eccc573e1137a1ba29d07d8a">paragraphAlignLeft</a>(std::string text);</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga28a69f06a88c89fe7a507e33ab486411">paragraphAlignRight</a>(std::string text);</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga6a105f6b0d07d7933379ff1ae9282fb8">paragraphAlignCenter</a>(std::string text);</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gae4de548aa67ab77cb345e4ddec6b248b">paragraphAlignJustify</a>(std::string text);</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="dom-border"></a>
border</h1>
<p>Adds a border around an element.</p>
<p>Code: </p><div class="fragment"><div class="line">border(text(<span class="stringliteral">&quot;The element&quot;</span>))</div>
</div><!-- fragment --><p>Terminal output: </p><div class="fragment"><div class="line">┌───────────┐</div>
<div class="line">│The element│</div>
<div class="line">└───────────┘</div>
</div><!-- fragment --><dl class="section note"><dt>Note</dt><dd>You can achieve the same behavior by using the pipe operator. <br />
<br />
Code: <div class="fragment"><div class="line">text(<span class="stringliteral">&quot;The element&quot;</span>) | border</div>
</div><!-- fragment --></dd></dl>
<p>Border also comes in a variety of styles as shown below: </p><div class="fragment"><div class="line"><span class="keyword">namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a> {</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gae8537acd423d47cf07e61bd774fb1098">border</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gaa074cdab57eeb47b99f1699bcc8addd8">borderLight</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga666c31419cc31cdadc9f8178ed63529e">borderHeavy</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga052b504344f3bc1ff86b3493cd934215">borderDouble</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga3cf2db223a5efaa370f0ca6bb405b80e">borderRounded</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gaf20f7d6fb275d109f0bdc01a2e4d3f3e">borderEmpty</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>);</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">Decorator</a> <a class="code hl_function" href="group__dom.html#gabc9db79957d4dd36deb8ca79938e4c41">borderStyled</a>(<a class="code hl_enumeration" href="group__dom.html#gafe3103dd0b8240c5443892484ef5af9c">BorderStyle</a>);</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">Decorator</a> <a class="code hl_function" href="group__dom.html#gaa97cfcfbe6df92dac085454395ec7b2f">borderWith</a>(Pixel);</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="dom-window"></a>
window</h1>
<p>A <code>ftxui::window</code> is a <code>ftxui::border</code>, but with an additional header. To add a window around an element, wrap it and specify a string as the header. Code: </p><div class="fragment"><div class="line">window(<span class="stringliteral">&quot;The window&quot;</span>, text(<span class="stringliteral">&quot;The element&quot;</span>))</div>
</div><!-- fragment --><p>Terminal output: </p><div class="fragment"><div class="line">┌The window─┐</div>
<div class="line">│The element│</div>
<div class="line">└───────────┘</div>
</div><!-- fragment --><h1><a class="anchor" id="dom-separator"></a>
separator</h1>
<p>Displays a vertical/horizontal line to visually split the content of a container in two.</p>
<p>Code: </p><div class="fragment"><div class="line">border(</div>
<div class="line"> hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;Left&quot;</span>), </div>
<div class="line"> separator(),</div>
<div class="line"> text(<span class="stringliteral">&quot;Right&quot;</span>)</div>
<div class="line"> })</div>
<div class="line">)</div>
</div><!-- fragment --><p>Terminal output: </p><div class="fragment"><div class="line">┌────┬─────┐</div>
<div class="line">│left│right│</div>
<div class="line">└────┴─────┘</div>
</div><!-- fragment --><p>Separators come in a variety of flavors as shown below: </p><div class="fragment"><div class="line"><span class="keyword">namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a> {</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gac1ef1cf6bf7cd0759ffa195071edb2a0">separator</a>(<span class="keywordtype">void</span>);</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga37c2b93daf557f68064bc9fbf93ebde0">separatorLight</a>();</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gaf0649e89a9960f1c2703e48c1817645b">separatorHeavy</a>();</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gadd376830fdb51b0bf52672ef17515989">separatorDouble</a>();</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga1934703e56ab66f6f259b9f8da331f1b">separatorEmpty</a>();</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga13cb559cfc7e409b3f211f0bb35ea7fa">separatorStyled</a>(<a class="code hl_enumeration" href="group__dom.html#gafe3103dd0b8240c5443892484ef5af9c">BorderStyle</a>);</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#gac1ef1cf6bf7cd0759ffa195071edb2a0">separator</a>(Pixel);</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="group__dom.html#ga97a10482d591aade2958da0f2f19b371">separatorCharacter</a>(std::string);</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="namespaceftxui.html#a50413065cee4757447b35c3a500667d3">separatorHSelector</a>(<span class="keywordtype">float</span> <a class="code hl_variable" href="screen_8cpp.html#a972107f15f3c0c099eb9fd605e7f51c6">left</a>,</div>
<div class="line"> <span class="keywordtype">float</span> <a class="code hl_variable" href="screen_8cpp.html#aa4b74e56e675912bbc06504407fc7a46">right</a>,</div>
<div class="line"> Color background,</div>
<div class="line"> Color foreground);</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> <a class="code hl_function" href="namespaceftxui.html#a1a0211233bacd4eb4d31a8e3d58b5f48">separatorVSelector</a>(<span class="keywordtype">float</span> up,</div>
<div class="line"> <span class="keywordtype">float</span> <a class="code hl_variable" href="screen_8cpp.html#a9cdd0454d64ec151b59fdd7d22ed505a">down</a>,</div>
<div class="line"> Color background,</div>
<div class="line"> Color foreground);</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="dom-gauge"></a>
gauge</h1>
<p>This is a visual element that represents a ratio of progress.</p>
<p>Code: </p><div class="fragment"><div class="line">border(gauge(0.5))</div>
</div><!-- fragment --><p>Terminal output: </p><div class="fragment"><div class="line">┌────────────────────────────────────────────────────────────────────────────┐</div>
<div class="line">│██████████████████████████████████████ │</div>
<div class="line">└────────────────────────────────────────────────────────────────────────────┘</div>
</div><!-- fragment --><p>Gauges can be displayed in many orientations as shown below: </p><div class="fragment"><div class="line"><span class="keyword">namespace </span>{</div>
<div class="line"> Element gauge(<span class="keywordtype">float</span> ratio);</div>
<div class="line"> Element gaugeLeft(<span class="keywordtype">float</span> ratio);</div>
<div class="line"> Element gaugeRight(<span class="keywordtype">float</span> ratio);</div>
<div class="line"> Element gaugeUp(<span class="keywordtype">float</span> ratio);</div>
<div class="line"> Element gaugeDown(<span class="keywordtype">float</span> ratio);</div>
<div class="line"> Element gaugeDirection(<span class="keywordtype">float</span> ratio, GaugeDirection);</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="dom-graph"></a>
graph</h1>
<p>
<script id="asciicast-223726" src="https://asciinema.org/a/223726.js" async></script>
</p>
<p>See: </p><div class="fragment"><div class="line">Element graph(GraphFunction);</div>
</div><!-- fragment --><h1><a class="anchor" id="dom-colors"></a>
Colors</h1>
<p>Most terminal consoles can display colored text and colored backgrounds. FTXUI supports every color palette: </p><div class="fragment"><div class="line">Decorator color(Color);</div>
<div class="line">Decorator bgcolor(Color);</div>
</div><!-- fragment --><p>Color <a href="https://arthursonzogni.github.io/FTXUI/examples_2dom_2color_gallery_8cpp-example.html">gallery</a>: <img src="https://user-images.githubusercontent.com/4759106/147248595-04c7245a-5b85-4544-809d-a5984fc6f9e7.png" alt="image" class="inline"/></p>
<h2><a class="anchor" id="dom-colors-palette-16"></a>
Palette16 </h2>
<p>On most terminals the following colors are supported:</p><ul>
<li>Default</li>
<li>Black</li>
<li>GrayDark</li>
<li>GrayLight</li>
<li>White</li>
<li>Blue</li>
<li>BlueLight</li>
<li>Cyan</li>
<li>CyanLight</li>
<li>Green</li>
<li>GreenLight</li>
<li>Magenta</li>
<li>MagentaLight</li>
<li>Red</li>
<li>RedLight</li>
<li>Yellow</li>
<li>YellowLight</li>
</ul>
<p>Example use of the above colors using the pipe operator: </p><div class="fragment"><div class="line">text(<span class="stringliteral">&quot;Blue foreground&quot;</span>) | color(Color::Blue);</div>
<div class="line">text(<span class="stringliteral">&quot;Blue background&quot;</span>) | bgcolor(Color::Blue);</div>
<div class="line">text(<span class="stringliteral">&quot;Black on white&quot;</span>) | color(Color::Black) | bgcolor(Color::White);</div>
</div><!-- fragment --><h2><a class="anchor" id="dom-colors-palette-256"></a>
Palette256 </h2>
<p>On terminal supporting 256 colors.
<script id="asciicast-OAUc3n6QrkmrLt7XEEb8AzbLt" src="https://asciinema.org/a/OAUc3n6QrkmrLt7XEEb8AzbLt.js" async></script>
</p>
<div class="fragment"><div class="line">text(<span class="stringliteral">&quot;HotPink&quot;</span>) | color(Color::HotPink);</div>
</div><!-- fragment --><h2><a class="anchor" id="dom-colors-true-color"></a>
TrueColor</h2>
<p>On terminal supporting trueColor, you can directly use the 24bit RGB color space:</p>
<p>Use the constructors below to specify the <b>RGB</b> or <b>HSV</b> values for your color:</p>
<p>There are two constructors: </p><div class="fragment"><div class="line"><a class="code hl_function" href="group__screen.html#aacec69e0aa1063fbec2cc305e7b076dd">ftxui::Color::RGB</a>(uint8_t red, uint8_t green, uint8_t blue);</div>
<div class="line"><a class="code hl_function" href="group__screen.html#a1a119fd00beafc7d2aa5f94518e38fc5">ftxui::Color::HSV</a>(uint8_t hue, uint8_t saturation, uint8_t value);</div>
<div class="ttc" id="agroup__screen_html_a1a119fd00beafc7d2aa5f94518e38fc5"><div class="ttname"><a href="group__screen.html#a1a119fd00beafc7d2aa5f94518e38fc5">ftxui::Color::HSV</a></div><div class="ttdeci">static Color HSV(uint8_t hue, uint8_t saturation, uint8_t value)</div><div class="ttdoc">Build a Color from its HSV representation. https://en.wikipedia.org/wiki/HSL_and_HSV.</div><div class="ttdef"><b>Definition</b> <a href="screen_2color_8cpp_source.html#l00198">screen/color.cpp:198</a></div></div>
<div class="ttc" id="agroup__screen_html_aacec69e0aa1063fbec2cc305e7b076dd"><div class="ttname"><a href="group__screen.html#aacec69e0aa1063fbec2cc305e7b076dd">ftxui::Color::RGB</a></div><div class="ttdeci">static Color RGB(uint8_t red, uint8_t green, uint8_t blue)</div><div class="ttdoc">Build a Color from its RGB representation. https://en.wikipedia.org/wiki/RGB_color_model.</div><div class="ttdef"><b>Definition</b> <a href="screen_2color_8cpp_source.html#l00147">screen/color.cpp:147</a></div></div>
</div><!-- fragment --><p>
<script id="asciicast-dk5r8IcCH0aFIIgWG0keSEHMG" src="https://asciinema.org/a/dk5r8IcCH0aFIIgWG0keSEHMG.js" async></script>
<script id="asciicast-xwzzghmqcqzIuyLwCpQFEqbEu" src="https://asciinema.org/a/xwzzghmqcqzIuyLwCpQFEqbEu.js" async></script>
</p>
<h1><a class="anchor" id="dom-linear-gradient"></a>
LinearGradient</h1>
<p>FTXUI supports linear gradient. Either on the foreground or the background.</p>
<div class="fragment"><div class="line">Decorator color(<span class="keyword">const</span> LinearGradient&amp;);</div>
<div class="line">Decorator bgcolor(<span class="keyword">const</span> LinearGradient&amp;);</div>
</div><!-- fragment --><p>A <code><a class="el" href="group__dom.html#structftxui_1_1LinearGradient" title="A class representing the settings for linear-gradient color effect.">ftxui::LinearGradient</a></code> is defined by an angle in degree, and a list of color stops. </p><div class="fragment"><div class="line"><span class="keyword">auto</span> gradient = LinearGradient()</div>
<div class="line"> .Angle(45)</div>
<div class="line"> .AddStop(0.0, Color::Red)</div>
<div class="line"> .AddStop(0.5, Color::Green)</div>
<div class="line"> .AddStop(1.0, Color::Blue);</div>
</div><!-- fragment --><p>You can also use simplified constructors: </p><div class="fragment"><div class="line">LinearGradient(Color::Red, Color::Blue);</div>
</div><!-- fragment --> <div class="fragment"><div class="line">LinearGradient(45, Color::Red, Color::Blue);</div>
</div><!-- fragment --><p>See <a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/linear_gradient_gallery">demo</a>.</p>
<h1><a class="anchor" id="dom-style"></a>
Style</h1>
<p>In addition to colored text and colored backgrounds. Many terminals support text effects such as: <code>bold</code>, <code>italic</code>, <code>dim</code>, <code>underlined</code>, <code>inverted</code>, <code>blink</code>.</p>
<div class="fragment"><div class="line">Element bold(Element);</div>
<div class="line">Element italic(Element);</div>
<div class="line">Element dim(Element);</div>
<div class="line">Element inverted(Element);</div>
<div class="line">Element underlined(Element);</div>
<div class="line">Element underlinedDouble(Element);</div>
<div class="line">Element strikethrough(Element);</div>
<div class="line">Element blink(Element);</div>
<div class="line">Decorator color(Color);</div>
<div class="line">Decorator bgcolor(Color);</div>
<div class="line">Decorator colorgrad(LinearGradient);</div>
<div class="line">Decorator bgcolorgrad(LinearGradient);</div>
</div><!-- fragment --><p><a href="https://arthursonzogni.github.io/FTXUI/examples_2dom_2style_gallery_8cpp-example.html">Example</a></p>
<p><img src="https://user-images.githubusercontent.com/4759106/147244118-380bf834-9e33-40df-9ff0-07c10f2598ef.png" alt="image" class="inline"/></p>
<p>To use these effects, simply wrap your elements with your desired effect: </p><div class="fragment"><div class="line">underlined(bold(text(<span class="stringliteral">&quot;This text is bold and underlined&quot;</span>)))</div>
</div><!-- fragment --><p>Alternatively, use the pipe operator to chain it on your element: </p><div class="fragment"><div class="line">text(<span class="stringliteral">&quot;This text is bold&quot;</span>) | bold | underlined</div>
</div><!-- fragment --><h1><a class="anchor" id="dom-layout"></a>
Layout</h1>
<p>Enables elements to be arranged in the following ways:</p><ul>
<li><b>Horizontally</b> with <code>ftxui::hbox</code></li>
<li><b>Vertically</b> with <code>ftxui::vbox</code></li>
<li><b>Inside a grid</b> with <code>ftxui::gridbox</code></li>
<li><b>Wrapped along one direction</b> using the <code>ftxui::flexbox</code>.</li>
</ul>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples_2dom_2vbox_hbox_8cpp-example.html">Example</a> using <code>ftxui::hbox</code>, <code>ftxui::vbox</code> and <code>ftxui::filler</code>.</p>
<p><img src="https://user-images.githubusercontent.com/4759106/147242524-7103b5d9-1a92-4e2d-ac70-b3d6740061e3.png" alt="image" class="inline"/></p>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples_2dom_2gridbox_8cpp-example.htmlp">Example</a> using <code>ftxui::gridbox</code>:</p>
<p><img src="https://user-images.githubusercontent.com/4759106/147242972-0db1f2e9-0790-496f-86e6-ed2c604f7a73.png" alt="image" class="inline"/></p>
<p><a href="https://github.com/ArthurSonzogni/FTXUI/blob/master/examples/dom/hflow.cpp">Example</a> using flexbox:</p>
<p><img src="https://user-images.githubusercontent.com/4759106/147243064-780ac7cc-605b-475f-94b8-cf7c4aed03a5.png" alt="image" class="inline"/></p>
<p>Checkout this <a href="https://arthursonzogni.github.io/FTXUI/examples_2dom_2hflow_8cpp-example.html">example</a> and the associated <a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/flexbox">demo</a>.</p>
<p>Element can also become flexible using the <code>ftxui::flex</code> decorator.</p>
<p>Code: </p><div class="fragment"><div class="line">hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;left&quot;</span>) | border ,</div>
<div class="line"> text(<span class="stringliteral">&quot;middle&quot;</span>) | border | flex,</div>
<div class="line"> text(<span class="stringliteral">&quot;right&quot;</span>) | border,</div>
<div class="line">});</div>
</div><!-- fragment --><p> Terminal output: </p><div class="fragment"><div class="line">┌────┐┌─────────────────────────────────────────────────────┐┌─────┐</div>
<div class="line">│left││middle ││right│</div>
<div class="line">└────┘└─────────────────────────────────────────────────────┘└─────┘</div>
</div><!-- fragment --><p>Code: </p><div class="fragment"><div class="line">hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;left&quot;</span>) | border ,</div>
<div class="line"> text(<span class="stringliteral">&quot;middle&quot;</span>) | border | flex,</div>
<div class="line"> text(<span class="stringliteral">&quot;right&quot;</span>) | border | flex,</div>
<div class="line">});</div>
</div><!-- fragment --><p>Terminal output: </p><div class="fragment"><div class="line">┌────┐┌───────────────────────────────┐┌───────────────────────────────┐</div>
<div class="line">│left││middle ││right │</div>
<div class="line">└────┘└───────────────────────────────┘└───────────────────────────────┘</div>
</div><!-- fragment --><h1><a class="anchor" id="dom-table"></a>
Table</h1>
<p>Enables easy formatting of data into a neat table like visual form.</p>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples_2dom_2table_8cpp-example.html">Code example</a>:</p>
<p><img src="https://user-images.githubusercontent.com/4759106/147250766-77d8ec9e-cf2b-486d-9866-1fd9f1bd2e6b.png" alt="image" class="inline"/></p>
<h1><a class="anchor" id="dom-canvas"></a>
Canvas</h1>
<p>See the API <a href="./canvas_8hpp_source.html">&lt;ftxui/dom/canvas.hpp&gt;</a></p>
<div class="fragment"><div class="line"><span class="keyword">auto</span> c = Canvas(100, 100);</div>
<div class="line">c.DrawPointLine(10, 10, 80, 10, Color::Red);</div>
<div class="line"><span class="keyword">auto</span> element = canvas(c);</div>
</div><!-- fragment --><p>Drawing can be performed on a <code><a class="el" href="group__dom.html#structftxui_1_1Canvas" title="Canvas is a drawable buffer associated with drawing operations.">ftxui::Canvas</a></code>, using braille, block, or simple characters:</p>
<p>Simple <a href="https://github.com/ArthurSonzogni/FTXUI/blob/master/examples/dom/canvas.cpp">example</a>:</p>
<p><img src="https://user-images.githubusercontent.com/4759106/147245843-76cc62fb-ccb4-421b-aacf-939f9afb42fe.png" alt="image" class="inline"/></p>
<p>Complex <a href="https://github.com/ArthurSonzogni/FTXUI/blob/master/examples/component/canvas_animated.cpp">example</a>:</p>
<p><img src="https://user-images.githubusercontent.com/4759106/147250538-783a8246-98e0-4a25-b032-3bd3710549d1.gif" alt="ezgif com-gif-maker (3)" class="inline"/> </p>
</div></div><!-- contents -->
</div><!-- PageDoc -->
</div><!-- doc-content -->
<!-- HTML footer for doxygen 1.9.8-->
<!-- start footer part -->
<div id="nav-path" class="navpath"><!-- id is needed for treeview function! -->
<ul>
<li class="footer">Generated by <a href="https://www.doxygen.org/index.html"><img class="footer" src="doxygen.svg" width="104" height="31" alt="doxygen"/></a> 1.12.0 </li>
</ul>
</div>
</body>
</html>