Files
FTXUI/module-component-examples.html
2025-09-09 05:48:11 +00:00

4643 lines
461 KiB
HTML

<!-- 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: Example</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-component-examples.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">Example</div></div>
</div><!--header-->
<div class="contents">
<div class="toc"><h3>Table of Contents</h3>
<ul>
<li class="level1">
<a href="#button">button</a>
</li>
<li class="level1">
<a href="#button_animated">button_animated</a>
</li>
<li class="level1">
<a href="#button_in_frame">button_in_frame</a>
</li>
<li class="level1">
<a href="#button_style">button_style</a>
</li>
<li class="level1">
<a href="#canvas_animated">canvas_animated</a>
</li>
<li class="level1">
<a href="#checkbox">checkbox</a>
</li>
<li class="level1">
<a href="#checkbox_in_frame">checkbox_in_frame</a>
</li>
<li class="level1">
<a href="#collapsible">collapsible</a>
</li>
<li class="level1">
<a href="#composition">composition</a>
</li>
<li class="level1">
<a href="#custom_loop">custom_loop</a>
</li>
<li class="level1">
<a href="#dropdown">dropdown</a>
</li>
<li class="level1">
<a href="#dropdown_custom">dropdown_custom</a>
</li>
<li class="level1">
<a href="#flexbox_gallery">flexbox_gallery</a>
</li>
<li class="level1">
<a href="#focus">focus</a>
</li>
<li class="level1">
<a href="#focus_cursor">focus_cursor</a>
</li>
<li class="level1">
<a href="#gallery">gallery</a>
</li>
<li class="level1">
<a href="#homescreen">homescreen</a>
</li>
<li class="level1">
<a href="#input">input</a>
</li>
<li class="level1">
<a href="#input_in_frame">input_in_frame</a>
</li>
<li class="level1">
<a href="#input_style">input_style</a>
</li>
<li class="level1">
<a href="#linear_gradient_gallery">linear_gradient_gallery</a>
</li>
<li class="level1">
<a href="#maybe">maybe</a>
</li>
<li class="level1">
<a href="#menu">menu</a>
</li>
<li class="level1">
<a href="#menu2">menu2</a>
</li>
<li class="level1">
<a href="#menu_entries">menu_entries</a>
</li>
<li class="level1">
<a href="#menu_entries_animated">menu_entries_animated</a>
</li>
<li class="level1">
<a href="#menu_in_frame">menu_in_frame</a>
</li>
<li class="level1">
<a href="#menu_in_frame_horizontal">menu_in_frame_horizontal</a>
</li>
<li class="level1">
<a href="#menu_multiple">menu_multiple</a>
</li>
<li class="level1">
<a href="#menu_style">menu_style</a>
</li>
<li class="level1">
<a href="#menu_underline_animated_gallery">menu_underline_animated_gallery</a>
</li>
<li class="level1">
<a href="#modal_dialog">modal_dialog</a>
</li>
<li class="level1">
<a href="#modal_dialog_custom">modal_dialog_custom</a>
</li>
<li class="level1">
<a href="#nested_screen">nested_screen</a>
</li>
<li class="level1">
<a href="#print_key_press">print_key_press</a>
</li>
<li class="level1">
<a href="#radiobox">radiobox</a>
</li>
<li class="level1">
<a href="#radiobox_in_frame">radiobox_in_frame</a>
</li>
<li class="level1">
<a href="#renderer">renderer</a>
</li>
<li class="level1">
<a href="#resizable_split">resizable_split</a>
</li>
<li class="level1">
<a href="#scrollbar">scrollbar</a>
</li>
<li class="level1">
<a href="#selection">selection</a>
</li>
<li class="level1">
<a href="#slider">slider</a>
</li>
<li class="level1">
<a href="#slider_direction">slider_direction</a>
</li>
<li class="level1">
<a href="#slider_rgb">slider_rgb</a>
</li>
<li class="level1">
<a href="#tab_horizontal">tab_horizontal</a>
</li>
<li class="level1">
<a href="#tab_vertical">tab_vertical</a>
</li>
<li class="level1">
<a href="#textarea">textarea</a>
</li>
<li class="level1">
<a href="#toggle">toggle</a>
</li>
<li class="level1">
<a href="#window">window</a>
</li>
<li class="level1">
<a href="#with_restored_io">with_restored_io</a>
</li>
</ul>
</div>
<div class="textblock"><h1><a class="anchor" id="button"></a>
button</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/button">Demo</a> </p><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">#include &lt;memory&gt;</span> <span class="comment">// for shared_ptr, __shared_ptr_access</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for operator+, to_string</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Button, Horizontal, Renderer</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for separator, gauge, text, Element, operator|, vbox, border</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><span class="comment">// This is a helper function to create a button with a custom style.</span></div>
<div class="line"><span class="comment">// The style is defined by a lambda function that takes an EntryState and</span></div>
<div class="line"><span class="comment">// returns an Element.</span></div>
<div class="line"><span class="comment">// We are using `center` to center the text inside the button, then `border` to</span></div>
<div class="line"><span class="comment">// add a border around the button, and finally `flex` to make the button fill</span></div>
<div class="line"><span class="comment">// the available space.</span></div>
<div class="line"><a class="code hl_struct" href="group__component.html#structftxui_1_1ButtonOption">ButtonOption</a> <a class="code hl_function" href="examples_2component_2button_8cpp.html#a98e3b8d17caf902b7bf0fe47562cea08">Style</a>() {</div>
<div class="line"> <span class="keyword">auto</span> option = ButtonOption::Animated();</div>
<div class="line"> option.transform = [](<span class="keyword">const</span> <a class="code hl_struct" href="structftxui_1_1EntryState.html">EntryState</a>&amp; s) {</div>
<div class="line"> <span class="keyword">auto</span> element = text(s.label);</div>
<div class="line"> <span class="keywordflow">if</span> (s.focused) {</div>
<div class="line"> element |= bold;</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> element | center | borderEmpty | flex;</div>
<div class="line"> };</div>
<div class="line"> <span class="keywordflow">return</span> option;</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keywordtype">int</span> value = 50;</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// clang-format off</span></div>
<div class="line"> <span class="keyword">auto</span> btn_dec_01 = Button(<span class="stringliteral">&quot;-1&quot;</span>, [&amp;] { value -= 1; }, <a class="code hl_function" href="examples_2component_2button_8cpp.html#a98e3b8d17caf902b7bf0fe47562cea08">Style</a>());</div>
<div class="line"> <span class="keyword">auto</span> btn_inc_01 = Button(<span class="stringliteral">&quot;+1&quot;</span>, [&amp;] { value += 1; }, <a class="code hl_function" href="examples_2component_2button_8cpp.html#a98e3b8d17caf902b7bf0fe47562cea08">Style</a>());</div>
<div class="line"> <span class="keyword">auto</span> btn_dec_10 = Button(<span class="stringliteral">&quot;-10&quot;</span>, [&amp;] { value -= 10; }, <a class="code hl_function" href="examples_2component_2button_8cpp.html#a98e3b8d17caf902b7bf0fe47562cea08">Style</a>());</div>
<div class="line"> <span class="keyword">auto</span> btn_inc_10 = Button(<span class="stringliteral">&quot;+10&quot;</span>, [&amp;] { value += 10; }, <a class="code hl_function" href="examples_2component_2button_8cpp.html#a98e3b8d17caf902b7bf0fe47562cea08">Style</a>());</div>
<div class="line"> <span class="comment">// clang-format on</span></div>
<div class="line"> </div>
<div class="line"> <span class="comment">// The tree of components. This defines how to navigate using the keyboard.</span></div>
<div class="line"> <span class="comment">// The selected `row` is shared to get a grid layout.</span></div>
<div class="line"> <span class="keywordtype">int</span> row = 0;</div>
<div class="line"> <span class="keyword">auto</span> buttons = Container::Vertical({</div>
<div class="line"> Container::Horizontal({btn_dec_01, btn_inc_01}, &amp;row) | flex,</div>
<div class="line"> Container::Horizontal({btn_dec_10, btn_inc_10}, &amp;row) | flex,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// Modify the way to render them on screen:</span></div>
<div class="line"> <span class="keyword">auto</span> component = Renderer(buttons, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;value = &quot;</span> + std::to_string(value)),</div>
<div class="line"> separator(),</div>
<div class="line"> buttons-&gt;Render() | flex,</div>
<div class="line"> }) |</div>
<div class="line"> flex | border;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::FitComponent();</div>
<div class="line"> screen.Loop(component);</div>
<div class="line"> <span class="keywordflow">return</span> 0;</div>
<div class="line">}</div>
<div class="ttc" id="acaptured__mouse_8hpp_html"><div class="ttname"><a href="captured__mouse_8hpp.html">captured_mouse.hpp</a></div></div>
<div class="ttc" id="acomponent_8hpp_html"><div class="ttname"><a href="component_8hpp.html">component.hpp</a></div></div>
<div class="ttc" id="acomponent__base_8hpp_html"><div class="ttname"><a href="component__base_8hpp.html">component_base.hpp</a></div></div>
<div class="ttc" id="aelements_8hpp_html"><div class="ttname"><a href="elements_8hpp.html">elements.hpp</a></div></div>
<div class="ttc" id="aexamples_2component_2button_8cpp_html_a98e3b8d17caf902b7bf0fe47562cea08"><div class="ttname"><a href="examples_2component_2button_8cpp.html#a98e3b8d17caf902b7bf0fe47562cea08">Style</a></div><div class="ttdeci">ButtonOption Style()</div><div class="ttdef"><b>Definition</b> <a href="examples_2component_2button_8cpp_source.html#l00021">examples/component/button.cpp:21</a></div></div>
<div class="ttc" id="aexamples_2component_2button_8cpp_html_ae66f6b31b5ad750f1fe042a706a4e3d4"><div class="ttname"><a href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a></div><div class="ttdeci">int main()</div><div class="ttdef"><b>Definition</b> <a href="examples_2component_2button_8cpp_source.html#l00033">examples/component/button.cpp:33</a></div></div>
<div class="ttc" id="agroup__component_html_structftxui_1_1ButtonOption"><div class="ttname"><a href="group__component.html#structftxui_1_1ButtonOption">ftxui::ButtonOption</a></div><div class="ttdoc">Option for the AnimatedButton component.</div><div class="ttdef"><b>Definition</b> <a href="component__options_8hpp_source.html#l00114">component_options.hpp:114</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 class="ttc" id="ascreen__interactive_8hpp_html"><div class="ttname"><a href="screen__interactive_8hpp.html">screen_interactive.hpp</a></div></div>
<div class="ttc" id="astructftxui_1_1EntryState_html"><div class="ttname"><a href="structftxui_1_1EntryState.html">ftxui::EntryState</a></div><div class="ttdoc">arguments for transform from |ButtonOption|, |CheckboxOption|, |RadioboxOption|, |MenuEntryOption|,...</div><div class="ttdef"><b>Definition</b> <a href="component__options_8hpp_source.html#l00023">component_options.hpp:23</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="button_animated"></a>
button_animated</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/button_animated">Demo</a> </p><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">#include &lt;memory&gt;</span> <span class="comment">// for shared_ptr, __shared_ptr_access</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for operator+, to_string</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Button, Horizontal, Renderer</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__options_8hpp.html">ftxui/component/component_options.hpp</a>&quot;</span> <span class="comment">// for ButtonOption</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for gauge, separator, text, vbox, operator|, Element, border</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="color_8hpp.html">ftxui/screen/color.hpp</a>&quot;</span> <span class="comment">// for Color, Color::Blue, Color::Green, Color::Red</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keywordtype">int</span> value = 50;</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// The tree of components. This defines how to navigate using the keyboard.</span></div>
<div class="line"> <span class="keyword">auto</span> buttons = Container::Horizontal({</div>
<div class="line"> Button(</div>
<div class="line"> <span class="stringliteral">&quot;Decrease&quot;</span>, [&amp;] { value--; }, ButtonOption::Animated(Color::Red)),</div>
<div class="line"> Button(</div>
<div class="line"> <span class="stringliteral">&quot;Reset&quot;</span>, [&amp;] { value = 50; }, ButtonOption::Animated(Color::Green)),</div>
<div class="line"> Button(</div>
<div class="line"> <span class="stringliteral">&quot;Increase&quot;</span>, [&amp;] { value++; }, ButtonOption::Animated(Color::Blue)),</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// Modify the way to render them on screen:</span></div>
<div class="line"> <span class="keyword">auto</span> component = Renderer(buttons, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;value = &quot;</span> + std::to_string(value)),</div>
<div class="line"> separator(),</div>
<div class="line"> gauge(value * 0.01f),</div>
<div class="line"> }) | border,</div>
<div class="line"> buttons-&gt;Render(),</div>
<div class="line"> });</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::FitComponent();</div>
<div class="line"> screen.Loop(component);</div>
<div class="line"> <span class="keywordflow">return</span> 0;</div>
<div class="line">}</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="acomponent__options_8hpp_html"><div class="ttname"><a href="component__options_8hpp.html">component_options.hpp</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="button_in_frame"></a>
button_in_frame</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/button_in_frame">Demo</a> </p><div class="fragment"><div class="line"><span class="comment">// Copyright 2022 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">#include &lt;memory&gt;</span> <span class="comment">// for allocator, __shared_ptr_access, shared_ptr</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for to_string, operator+</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Button, Renderer, Vertical</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__options_8hpp.html">ftxui/component/component_options.hpp</a>&quot;</span> <span class="comment">// for ButtonOption</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for operator|, text, Element, hbox, separator, size, vbox, border, frame, vscroll_indicator, HEIGHT, LESS_THAN</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="color_8hpp.html">ftxui/screen/color.hpp</a>&quot;</span> <span class="comment">// for Color, Color::Default, Color::GrayDark, Color::White</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keywordtype">int</span> counter = 0;</div>
<div class="line"> <span class="keyword">auto</span> on_click = [&amp;] { counter++; };</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> style = ButtonOption::Animated(Color::Default, Color::GrayDark,</div>
<div class="line"> Color::Default, Color::White);</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> container = Container::Vertical({});</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> i = 0; i &lt; 30; ++i) {</div>
<div class="line"> <span class="keyword">auto</span> button = Button(<span class="stringliteral">&quot;Button &quot;</span> + std::to_string(i), on_click, style);</div>
<div class="line"> container-&gt;Add(button);</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> renderer = Renderer(container, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;Counter:&quot;</span>),</div>
<div class="line"> text(std::to_string(counter)),</div>
<div class="line"> }),</div>
<div class="line"> separator(),</div>
<div class="line"> container-&gt;Render() | vscroll_indicator | frame |</div>
<div class="line"> size(HEIGHT, LESS_THAN, 20),</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::FitComponent();</div>
<div class="line"> screen.Loop(renderer);</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> 0;</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="button_style"></a>
button_style</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/button_style">Demo</a> </p><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">#include &lt;string&gt;</span> <span class="comment">// for operator+, to_string</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Button, Vertical, Renderer, Horizontal, operator|</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for Component</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__options_8hpp.html">ftxui/component/component_options.hpp</a>&quot;</span> <span class="comment">// for ButtonOption</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for Element, separator, text, border</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="color_8hpp.html">ftxui/screen/color.hpp</a>&quot;</span> <span class="comment">// for Color, Color::Blue, Color::Green, Color::Red</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keywordtype">int</span> value = 0;</div>
<div class="line"> <span class="keyword">auto</span> action = [&amp;] { value++; };</div>
<div class="line"> <span class="keyword">auto</span> action_renderer =</div>
<div class="line"> Renderer([&amp;] { <span class="keywordflow">return</span> text(<span class="stringliteral">&quot;count = &quot;</span> + std::to_string(value)); });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> buttons =</div>
<div class="line"> Container::Vertical({</div>
<div class="line"> action_renderer,</div>
<div class="line"> Renderer([] { <span class="keywordflow">return</span> separator(); }),</div>
<div class="line"> Container::Horizontal({</div>
<div class="line"> Container::Vertical({</div>
<div class="line"> Button(<span class="stringliteral">&quot;Ascii 1&quot;</span>, action, ButtonOption::Ascii()),</div>
<div class="line"> Button(<span class="stringliteral">&quot;Ascii 2&quot;</span>, action, ButtonOption::Ascii()),</div>
<div class="line"> Button(<span class="stringliteral">&quot;Ascii 3&quot;</span>, action, ButtonOption::Ascii()),</div>
<div class="line"> }),</div>
<div class="line"> Renderer([] { <span class="keywordflow">return</span> separator(); }),</div>
<div class="line"> Container::Vertical({</div>
<div class="line"> Button(<span class="stringliteral">&quot;Simple 1&quot;</span>, action, ButtonOption::Simple()),</div>
<div class="line"> Button(<span class="stringliteral">&quot;Simple 2&quot;</span>, action, ButtonOption::Simple()),</div>
<div class="line"> Button(<span class="stringliteral">&quot;Simple 3&quot;</span>, action, ButtonOption::Simple()),</div>
<div class="line"> }),</div>
<div class="line"> Renderer([] { <span class="keywordflow">return</span> separator(); }),</div>
<div class="line"> Container::Vertical({</div>
<div class="line"> Button(<span class="stringliteral">&quot;Animated 1&quot;</span>, action, ButtonOption::Animated()),</div>
<div class="line"> Button(<span class="stringliteral">&quot;Animated 2&quot;</span>, action, ButtonOption::Animated()),</div>
<div class="line"> Button(<span class="stringliteral">&quot;Animated 3&quot;</span>, action, ButtonOption::Animated()),</div>
<div class="line"> }),</div>
<div class="line"> Renderer([] { <span class="keywordflow">return</span> separator(); }),</div>
<div class="line"> Container::Vertical({</div>
<div class="line"> Button(<span class="stringliteral">&quot;Animated 4&quot;</span>, action,</div>
<div class="line"> ButtonOption::Animated(Color::Red)),</div>
<div class="line"> Button(<span class="stringliteral">&quot;Animated 5&quot;</span>, action,</div>
<div class="line"> ButtonOption::Animated(Color::Green)),</div>
<div class="line"> Button(<span class="stringliteral">&quot;Animated 6&quot;</span>, action,</div>
<div class="line"> ButtonOption::Animated(Color::Blue)),</div>
<div class="line"> }),</div>
<div class="line"> }),</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::FitComponent();</div>
<div class="line"> screen.Loop(buttons);</div>
<div class="line"> <span class="keywordflow">return</span> 0;</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="canvas_animated"></a>
canvas_animated</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/canvas_animated">Demo</a> </p><div class="fragment"><div class="line"><span class="comment">// Copyright 2021 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 LICENSED file.</span></div>
<div class="line"><span class="preprocessor">#include &lt;cmath&gt;</span> <span class="comment">// for sin, cos</span></div>
<div class="line"><span class="preprocessor">#include &lt;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&gt;</span> <span class="comment">// for canvas, Element, separator, hbox, operator|, border</span></div>
<div class="line"><span class="preprocessor">#include &lt;<a class="code" href="screen_8hpp.html">ftxui/screen/screen.hpp</a>&gt;</span> <span class="comment">// for Pixel</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for allocator, shared_ptr, __shared_ptr_access</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for string, basic_string</span></div>
<div class="line"><span class="preprocessor">#include &lt;utility&gt;</span> <span class="comment">// for move</span></div>
<div class="line"><span class="preprocessor">#include &lt;vector&gt;</span> <span class="comment">// for vector, __alloc_traits&lt;&gt;::value_type</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Renderer, CatchEvent, Horizontal, Menu, Tab</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="event_8hpp.html">ftxui/component/event.hpp</a>&quot;</span> <span class="comment">// for Event</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="mouse_8hpp.html">ftxui/component/mouse.hpp</a>&quot;</span> <span class="comment">// for Mouse</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="canvas_8hpp.html">ftxui/dom/canvas.hpp</a>&quot;</span> <span class="comment">// for Canvas</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="color_8hpp.html">ftxui/screen/color.hpp</a>&quot;</span> <span class="comment">// for Color, Color::Red, Color::Blue, Color::Green, ftxui</span></div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"> <span class="keywordtype">int</span> mouse_x = 0;</div>
<div class="line"> <span class="keywordtype">int</span> mouse_y = 0;</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// A triangle following the mouse, using braille characters.</span></div>
<div class="line"> <span class="keyword">auto</span> renderer_line_braille = Renderer([&amp;] {</div>
<div class="line"> <span class="keyword">auto</span> c = <a class="code hl_struct" href="group__dom.html#structftxui_1_1Canvas">Canvas</a>(100, 100);</div>
<div class="line"> c.DrawText(0, 0, <span class="stringliteral">&quot;Several lines (braille)&quot;</span>);</div>
<div class="line"> c.DrawPointLine(mouse_x, mouse_y, 80, 10, Color::Red);</div>
<div class="line"> c.DrawPointLine(80, 10, 80, 40, Color::Blue);</div>
<div class="line"> c.DrawPointLine(80, 40, mouse_x, mouse_y, Color::Green);</div>
<div class="line"> <span class="keywordflow">return</span> canvas(std::move(c));</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// A triangle following the mouse, using block characters.</span></div>
<div class="line"> <span class="keyword">auto</span> renderer_line_block = Renderer([&amp;] {</div>
<div class="line"> <span class="keyword">auto</span> c = <a class="code hl_struct" href="group__dom.html#structftxui_1_1Canvas">Canvas</a>(100, 100);</div>
<div class="line"> c.DrawText(0, 0, <span class="stringliteral">&quot;Several lines (block)&quot;</span>);</div>
<div class="line"> c.DrawBlockLine(mouse_x, mouse_y, 80, 10, Color::Red);</div>
<div class="line"> c.DrawBlockLine(80, 10, 80, 40, Color::Blue);</div>
<div class="line"> c.DrawBlockLine(80, 40, mouse_x, mouse_y, Color::Green);</div>
<div class="line"> <span class="keywordflow">return</span> canvas(std::move(c));</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// A circle following the mouse, using braille characters.</span></div>
<div class="line"> <span class="keyword">auto</span> renderer_circle_braille = Renderer([&amp;] {</div>
<div class="line"> <span class="keyword">auto</span> c = <a class="code hl_struct" href="group__dom.html#structftxui_1_1Canvas">Canvas</a>(100, 100);</div>
<div class="line"> c.DrawText(0, 0, <span class="stringliteral">&quot;A circle (braille)&quot;</span>);</div>
<div class="line"> c.DrawPointCircle(mouse_x, mouse_y, 30);</div>
<div class="line"> <span class="keywordflow">return</span> canvas(std::move(c));</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// A circle following the mouse, using block characters.</span></div>
<div class="line"> <span class="keyword">auto</span> renderer_circle_block = Renderer([&amp;] {</div>
<div class="line"> <span class="keyword">auto</span> c = <a class="code hl_struct" href="group__dom.html#structftxui_1_1Canvas">Canvas</a>(100, 100);</div>
<div class="line"> c.DrawText(0, 0, <span class="stringliteral">&quot;A circle (block)&quot;</span>);</div>
<div class="line"> c.DrawBlockCircle(mouse_x, mouse_y, 30);</div>
<div class="line"> <span class="keywordflow">return</span> canvas(std::move(c));</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// A filled circle following the mouse, using braille characters.</span></div>
<div class="line"> <span class="keyword">auto</span> renderer_circle_filled_braille = Renderer([&amp;] {</div>
<div class="line"> <span class="keyword">auto</span> c = <a class="code hl_struct" href="group__dom.html#structftxui_1_1Canvas">Canvas</a>(100, 100);</div>
<div class="line"> c.DrawText(0, 0, <span class="stringliteral">&quot;A circle filled (braille)&quot;</span>);</div>
<div class="line"> c.DrawPointCircleFilled(mouse_x, mouse_y, 30);</div>
<div class="line"> <span class="keywordflow">return</span> canvas(std::move(c));</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// A filled circle following the mouse, using block characters.</span></div>
<div class="line"> <span class="keyword">auto</span> renderer_circle_filled_block = Renderer([&amp;] {</div>
<div class="line"> <span class="keyword">auto</span> c = <a class="code hl_struct" href="group__dom.html#structftxui_1_1Canvas">Canvas</a>(100, 100);</div>
<div class="line"> c.DrawText(0, 0, <span class="stringliteral">&quot;A circle filled (block)&quot;</span>);</div>
<div class="line"> c.DrawBlockCircleFilled(mouse_x, mouse_y, 30);</div>
<div class="line"> <span class="keywordflow">return</span> canvas(std::move(c));</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// An ellipse following the mouse, using braille characters.</span></div>
<div class="line"> <span class="keyword">auto</span> renderer_ellipse_braille = Renderer([&amp;] {</div>
<div class="line"> <span class="keyword">auto</span> c = <a class="code hl_struct" href="group__dom.html#structftxui_1_1Canvas">Canvas</a>(100, 100);</div>
<div class="line"> c.DrawText(0, 0, <span class="stringliteral">&quot;An ellipse (braille)&quot;</span>);</div>
<div class="line"> c.DrawPointEllipse(mouse_x / 2, mouse_y / 2, mouse_x / 2, mouse_y / 2);</div>
<div class="line"> <span class="keywordflow">return</span> canvas(std::move(c));</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// An ellipse following the mouse, using block characters.</span></div>
<div class="line"> <span class="keyword">auto</span> renderer_ellipse_block = Renderer([&amp;] {</div>
<div class="line"> <span class="keyword">auto</span> c = <a class="code hl_struct" href="group__dom.html#structftxui_1_1Canvas">Canvas</a>(100, 100);</div>
<div class="line"> c.DrawText(0, 0, <span class="stringliteral">&quot;An ellipse (block)&quot;</span>);</div>
<div class="line"> c.DrawBlockEllipse(mouse_x / 2, mouse_y / 2, mouse_x / 2, mouse_y / 2);</div>
<div class="line"> <span class="keywordflow">return</span> canvas(std::move(c));</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// An ellipse following the mouse filled, using braille characters.</span></div>
<div class="line"> <span class="keyword">auto</span> renderer_ellipse_filled_braille = Renderer([&amp;] {</div>
<div class="line"> <span class="keyword">auto</span> c = <a class="code hl_struct" href="group__dom.html#structftxui_1_1Canvas">Canvas</a>(100, 100);</div>
<div class="line"> c.DrawText(0, 0, <span class="stringliteral">&quot;A filled ellipse (braille)&quot;</span>);</div>
<div class="line"> c.DrawPointEllipseFilled(mouse_x / 2, mouse_y / 2, mouse_x / 2,</div>
<div class="line"> mouse_y / 2);</div>
<div class="line"> <span class="keywordflow">return</span> canvas(std::move(c));</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// An ellipse following the mouse filled, using block characters.</span></div>
<div class="line"> <span class="keyword">auto</span> renderer_ellipse_filled_block = Renderer([&amp;] {</div>
<div class="line"> <span class="keyword">auto</span> c = <a class="code hl_struct" href="group__dom.html#structftxui_1_1Canvas">Canvas</a>(100, 100);</div>
<div class="line"> c.DrawText(0, 0, <span class="stringliteral">&quot;A filled ellipse (block)&quot;</span>);</div>
<div class="line"> c.DrawBlockEllipseFilled(mouse_x / 2, mouse_y / 2, mouse_x / 2,</div>
<div class="line"> mouse_y / 2);</div>
<div class="line"> c.DrawBlockEllipse(mouse_x / 2, mouse_y / 2, mouse_x / 2, mouse_y / 2);</div>
<div class="line"> <span class="keywordflow">return</span> canvas(std::move(c));</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// A text following the mouse</span></div>
<div class="line"> <span class="keyword">auto</span> renderer_text = Renderer([&amp;] {</div>
<div class="line"> <span class="keyword">auto</span> c = <a class="code hl_struct" href="group__dom.html#structftxui_1_1Canvas">Canvas</a>(100, 100);</div>
<div class="line"> c.DrawText(0, 0, <span class="stringliteral">&quot;A piece of text&quot;</span>);</div>
<div class="line"> c.DrawText(mouse_x, mouse_y, <span class="stringliteral">&quot;This is a piece of text with effects&quot;</span>,</div>
<div class="line"> [](<a class="code hl_struct" href="group__screen.html#structftxui_1_1Pixel">Pixel</a>&amp; p) {</div>
<div class="line"> p.<a class="code hl_variable" href="group__screen.html#a2ce82adc1d02baf22df658b903dcb351">foreground_color</a> = Color::Red;</div>
<div class="line"> p.<a class="code hl_variable" href="group__screen.html#a7c8849e8321ea248cd4991ea8ef198eb">underlined</a> = <span class="keyword">true</span>;</div>
<div class="line"> p.<a class="code hl_variable" href="group__screen.html#a7a210a24d67146bd143c013d1da0f2dd">bold</a> = <span class="keyword">true</span>;</div>
<div class="line"> });</div>
<div class="line"> <span class="keywordflow">return</span> canvas(std::move(c));</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> renderer_plot_1 = Renderer([&amp;] {</div>
<div class="line"> <span class="keyword">auto</span> c = <a class="code hl_struct" href="group__dom.html#structftxui_1_1Canvas">Canvas</a>(100, 100);</div>
<div class="line"> c.DrawText(0, 0, <span class="stringliteral">&quot;A graph&quot;</span>);</div>
<div class="line"> </div>
<div class="line"> std::vector&lt;int&gt; ys(100);</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> x = 0; x &lt; 100; x++) {</div>
<div class="line"> <span class="keywordtype">float</span> dx = float(x - mouse_x);</div>
<div class="line"> <span class="keywordtype">float</span> dy = 50.f;</div>
<div class="line"> ys[x] = int(dy + 20 * cos(dx * 0.14) + 10 * sin(dx * 0.42));</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> x = 1; x &lt; 99; x++) {</div>
<div class="line"> c.DrawPointLine(x, ys[x], x + 1, ys[x + 1]);</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> canvas(std::move(c));</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> renderer_plot_2 = Renderer([&amp;] {</div>
<div class="line"> <span class="keyword">auto</span> c = <a class="code hl_struct" href="group__dom.html#structftxui_1_1Canvas">Canvas</a>(100, 100);</div>
<div class="line"> c.DrawText(0, 0, <span class="stringliteral">&quot;A symmetrical graph filled&quot;</span>);</div>
<div class="line"> std::vector&lt;int&gt; ys(100);</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> x = 0; x &lt; 100; x++) {</div>
<div class="line"> ys[x] = int(30 + <span class="comment">//</span></div>
<div class="line"> 10 * cos(x * 0.2 - mouse_x * 0.05) + <span class="comment">//</span></div>
<div class="line"> 5 * sin(x * 0.4) + <span class="comment">//</span></div>
<div class="line"> 5 * sin(x * 0.3 - mouse_y * 0.05)); <span class="comment">//</span></div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> x = 0; x &lt; 100; x++) {</div>
<div class="line"> c.DrawPointLine(x, 50 + ys[x], x, 50 - ys[x], Color::Red);</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> canvas(std::move(c));</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> renderer_plot_3 = Renderer([&amp;] {</div>
<div class="line"> <span class="keyword">auto</span> c = <a class="code hl_struct" href="group__dom.html#structftxui_1_1Canvas">Canvas</a>(100, 100);</div>
<div class="line"> c.DrawText(0, 0, <span class="stringliteral">&quot;A 2D gaussian plot&quot;</span>);</div>
<div class="line"> <span class="keywordtype">int</span> size = 15;</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// mouse_x = 5mx + 3*my</span></div>
<div class="line"> <span class="comment">// mouse_y = 0mx + -5my + 90</span></div>
<div class="line"> <span class="keywordtype">float</span> my = (mouse_y - 90) / -5.f;</div>
<div class="line"> <span class="keywordtype">float</span> mx = (mouse_x - 3 * my) / 5.f;</div>
<div class="line"> std::vector&lt;std::vector&lt;float&gt;&gt; ys(size, std::vector&lt;float&gt;(size));</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> y = 0; y &lt; size; y++) {</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> x = 0; x &lt; size; x++) {</div>
<div class="line"> <span class="keywordtype">float</span> dx = x - mx;</div>
<div class="line"> <span class="keywordtype">float</span> dy = y - my;</div>
<div class="line"> ys[y][x] = -1.5 + 3.0 * std::exp(-0.2f * (dx * dx + dy * dy));</div>
<div class="line"> }</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> y = 0; y &lt; size; y++) {</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> x = 0; x &lt; size; x++) {</div>
<div class="line"> <span class="keywordflow">if</span> (x != 0) {</div>
<div class="line"> c.DrawPointLine(</div>
<div class="line"> 5 * (x - 1) + 3 * (y - 0), 90 - 5 * (y - 0) - 5 * ys[y][x - 1],</div>
<div class="line"> 5 * (x - 0) + 3 * (y - 0), 90 - 5 * (y - 0) - 5 * ys[y][x]);</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">if</span> (y != 0) {</div>
<div class="line"> c.DrawPointLine(</div>
<div class="line"> 5 * (x - 0) + 3 * (y - 1), 90 - 5 * (y - 1) - 5 * ys[y - 1][x],</div>
<div class="line"> 5 * (x - 0) + 3 * (y - 0), 90 - 5 * (y - 0) - 5 * ys[y][x]);</div>
<div class="line"> }</div>
<div class="line"> }</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> canvas(std::move(c));</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keywordtype">int</span> selected_tab = 12;</div>
<div class="line"> <span class="keyword">auto</span> tab = Container::Tab(</div>
<div class="line"> {</div>
<div class="line"> renderer_line_braille,</div>
<div class="line"> renderer_line_block,</div>
<div class="line"> renderer_circle_braille,</div>
<div class="line"> renderer_circle_block,</div>
<div class="line"> renderer_circle_filled_braille,</div>
<div class="line"> renderer_circle_filled_block,</div>
<div class="line"> renderer_ellipse_braille,</div>
<div class="line"> renderer_ellipse_block,</div>
<div class="line"> renderer_ellipse_filled_braille,</div>
<div class="line"> renderer_ellipse_filled_block,</div>
<div class="line"> </div>
<div class="line"> renderer_plot_1,</div>
<div class="line"> renderer_plot_2,</div>
<div class="line"> renderer_plot_3,</div>
<div class="line"> </div>
<div class="line"> renderer_text,</div>
<div class="line"> },</div>
<div class="line"> &amp;selected_tab);</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// This capture the last mouse position.</span></div>
<div class="line"> <span class="keyword">auto</span> tab_with_mouse = CatchEvent(tab, [&amp;](<a class="code hl_struct" href="group__component.html#structftxui_1_1Event">Event</a> e) {</div>
<div class="line"> <span class="keywordflow">if</span> (e.<a class="code hl_function" href="group__component.html#a2c835925299d56941ffd2e2421f0fd13">is_mouse</a>()) {</div>
<div class="line"> mouse_x = (e.<a class="code hl_variable" href="group__component.html#a761c3b7a78d8408dfbe76131209532d7">mouse</a>().x - 1) * 2;</div>
<div class="line"> mouse_y = (e.<a class="code hl_variable" href="group__component.html#a761c3b7a78d8408dfbe76131209532d7">mouse</a>().y - 1) * 4;</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> <span class="keyword">false</span>;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> std::vector&lt;std::string&gt; tab_titles = {</div>
<div class="line"> <span class="stringliteral">&quot;line (braille)&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;line (block)&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;circle (braille)&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;circle (block)&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;circle filled (braille)&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;circle filled (block)&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;ellipse (braille)&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;ellipse (block)&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;ellipse filled (braille)&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;ellipse filled (block)&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;plot_1 simple&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;plot_2 filled&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;plot_3 3D&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;text&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> <span class="keyword">auto</span> tab_toggle = Menu(&amp;tab_titles, &amp;selected_tab);</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> component = Container::Horizontal({</div>
<div class="line"> tab_with_mouse,</div>
<div class="line"> tab_toggle,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// Add some separator to decorate the whole component:</span></div>
<div class="line"> <span class="keyword">auto</span> component_renderer = Renderer(component, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> hbox({</div>
<div class="line"> tab_with_mouse-&gt;Render(),</div>
<div class="line"> separator(),</div>
<div class="line"> tab_toggle-&gt;Render(),</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::FitComponent();</div>
<div class="line"> screen.Loop(component_renderer);</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> 0;</div>
<div class="line">}</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="aevent_8hpp_html"><div class="ttname"><a href="event_8hpp.html">event.hpp</a></div></div>
<div class="ttc" id="agroup__component_html_a2c835925299d56941ffd2e2421f0fd13"><div class="ttname"><a href="group__component.html#a2c835925299d56941ffd2e2421f0fd13">ftxui::Event::is_mouse</a></div><div class="ttdeci">bool is_mouse() const</div><div class="ttdef"><b>Definition</b> <a href="event_8hpp_source.html#l00109">event.hpp:109</a></div></div>
<div class="ttc" id="agroup__component_html_a761c3b7a78d8408dfbe76131209532d7"><div class="ttname"><a href="group__component.html#a761c3b7a78d8408dfbe76131209532d7">ftxui::Event::mouse</a></div><div class="ttdeci">struct Mouse mouse</div><div class="ttdef"><b>Definition</b> <a href="event_8hpp_source.html#l00144">event.hpp:144</a></div></div>
<div class="ttc" id="agroup__component_html_structftxui_1_1Event"><div class="ttname"><a href="group__component.html#structftxui_1_1Event">ftxui::Event</a></div><div class="ttdoc">Represent an event. It can be key press event, a terminal resize, or more ...</div><div class="ttdef"><b>Definition</b> <a href="event_8hpp_source.html#l00029">event.hpp:29</a></div></div>
<div class="ttc" id="agroup__dom_html_structftxui_1_1Canvas"><div class="ttname"><a href="group__dom.html#structftxui_1_1Canvas">ftxui::Canvas</a></div><div class="ttdoc">Canvas is a drawable buffer associated with drawing operations.</div><div class="ttdef"><b>Definition</b> <a href="canvas_8hpp_source.html#l00038">canvas.hpp:38</a></div></div>
<div class="ttc" id="agroup__screen_html_a2ce82adc1d02baf22df658b903dcb351"><div class="ttname"><a href="group__screen.html#a2ce82adc1d02baf22df658b903dcb351">ftxui::Pixel::foreground_color</a></div><div class="ttdeci">Color foreground_color</div><div class="ttdef"><b>Definition</b> <a href="pixel_8hpp_source.html#l00049">pixel.hpp:49</a></div></div>
<div class="ttc" id="agroup__screen_html_a7a210a24d67146bd143c013d1da0f2dd"><div class="ttname"><a href="group__screen.html#a7a210a24d67146bd143c013d1da0f2dd">ftxui::Pixel::bold</a></div><div class="ttdeci">bool bold</div><div class="ttdef"><b>Definition</b> <a href="pixel_8hpp_source.html#l00029">pixel.hpp:29</a></div></div>
<div class="ttc" id="agroup__screen_html_a7c8849e8321ea248cd4991ea8ef198eb"><div class="ttname"><a href="group__screen.html#a7c8849e8321ea248cd4991ea8ef198eb">ftxui::Pixel::underlined</a></div><div class="ttdeci">bool underlined</div><div class="ttdef"><b>Definition</b> <a href="pixel_8hpp_source.html#l00033">pixel.hpp:33</a></div></div>
<div class="ttc" id="agroup__screen_html_structftxui_1_1Pixel"><div class="ttname"><a href="group__screen.html#structftxui_1_1Pixel">ftxui::Pixel</a></div><div class="ttdoc">A Unicode character and its associated style.</div><div class="ttdef"><b>Definition</b> <a href="pixel_8hpp_source.html#l00015">pixel.hpp:15</a></div></div>
<div class="ttc" id="amouse_8hpp_html"><div class="ttname"><a href="mouse_8hpp.html">mouse.hpp</a></div></div>
<div class="ttc" id="ascreen_8hpp_html"><div class="ttname"><a href="screen_8hpp.html">screen.hpp</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="checkbox"></a>
checkbox</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/checkbox">Demo</a> </p><div class="fragment"><div class="line"><span class="comment">// Copyright 2021 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">#include &lt;array&gt;</span> <span class="comment">// for array</span></div>
<div class="line"><span class="preprocessor">#include &lt;iostream&gt;</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for shared_ptr, __shared_ptr_access</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for operator+, to_string</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Checkbox, Renderer, Vertical</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for operator|, Element, size, border, frame, vscroll_indicator, HEIGHT, LESS_THAN</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keywordtype">bool</span> download = <span class="keyword">false</span>;</div>
<div class="line"> <span class="keywordtype">bool</span> upload = <span class="keyword">false</span>;</div>
<div class="line"> <span class="keywordtype">bool</span> ping = <span class="keyword">false</span>;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> container = Container::Vertical({</div>
<div class="line"> Checkbox(<span class="stringliteral">&quot;Download&quot;</span>, &amp;download),</div>
<div class="line"> Checkbox(<span class="stringliteral">&quot;Upload&quot;</span>, &amp;upload),</div>
<div class="line"> Checkbox(<span class="stringliteral">&quot;Ping&quot;</span>, &amp;ping),</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::FitComponent();</div>
<div class="line"> screen.Loop(container);</div>
<div class="line"> </div>
<div class="line"> std::cout &lt;&lt; <span class="stringliteral">&quot;---&quot;</span> &lt;&lt; std::endl;</div>
<div class="line"> std::cout &lt;&lt; <span class="stringliteral">&quot;Download: &quot;</span> &lt;&lt; download &lt;&lt; std::endl;</div>
<div class="line"> std::cout &lt;&lt; <span class="stringliteral">&quot;Upload: &quot;</span> &lt;&lt; upload &lt;&lt; std::endl;</div>
<div class="line"> std::cout &lt;&lt; <span class="stringliteral">&quot;Ping: &quot;</span> &lt;&lt; ping &lt;&lt; std::endl;</div>
<div class="line"> std::cout &lt;&lt; <span class="stringliteral">&quot;---&quot;</span> &lt;&lt; std::endl;</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> 0;</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="checkbox_in_frame"></a>
checkbox_in_frame</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/checkbox_in_frame">Demo</a> </p><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">#include &lt;array&gt;</span> <span class="comment">// for array</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for shared_ptr, __shared_ptr_access</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for operator+, to_string</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Checkbox, Renderer, Vertical</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for operator|, Element, size, border, frame, vscroll_indicator, HEIGHT, LESS_THAN</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> std::array&lt;bool, 30&gt; states;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> container = Container::Vertical({});</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> i = 0; i &lt; 30; ++i) {</div>
<div class="line"> states[i] = <span class="keyword">false</span>;</div>
<div class="line"> container-&gt;Add(Checkbox(<span class="stringliteral">&quot;Checkbox&quot;</span> + std::to_string(i), &amp;states[i]));</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> renderer = Renderer(container, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> container-&gt;Render() | vscroll_indicator | frame |</div>
<div class="line"> size(HEIGHT, LESS_THAN, 10) | border;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::FitComponent();</div>
<div class="line"> screen.Loop(renderer);</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> 0;</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="collapsible"></a>
collapsible</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/collapsible">Demo</a> </p><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">#include &lt;memory&gt;</span> <span class="comment">// for allocator, make_shared, __shared_ptr_access</span></div>
<div class="line"><span class="preprocessor">#include &lt;utility&gt;</span> <span class="comment">// for move</span></div>
<div class="line"><span class="preprocessor">#include &lt;vector&gt;</span> <span class="comment">// for vector</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Collapsible, Renderer, Vertical</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for Component, ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for text, hbox, Element</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><span class="comment">// Take a list of component, display them vertically, one column shifted to the</span></div>
<div class="line"><span class="comment">// right.</span></div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="examples_2component_2collapsible_8cpp.html#a74bf63b8448df7b03bd98ae6de127c0a">Inner</a>(std::vector&lt;Component&gt; children) {</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> vlist = Container::Vertical(std::move(children));</div>
<div class="line"> <span class="keywordflow">return</span> Renderer(vlist, [vlist] {</div>
<div class="line"> <span class="keywordflow">return</span> hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot; &quot;</span>),</div>
<div class="line"> vlist-&gt;Render(),</div>
<div class="line"> });</div>
<div class="line"> });</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="examples_2component_2collapsible_8cpp.html#aacbbfcb3c5bc93d26a5c681172e27eae">Empty</a>() {</div>
<div class="line"> <span class="keywordflow">return</span> std::make_shared&lt;ComponentBase&gt;();</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">auto</span> component =</div>
<div class="line"> Collapsible(<span class="stringliteral">&quot;Collapsible 1&quot;</span>,</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2collapsible_8cpp.html#a74bf63b8448df7b03bd98ae6de127c0a">Inner</a>({</div>
<div class="line"> Collapsible(<span class="stringliteral">&quot;Collapsible 1.1&quot;</span>,</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2collapsible_8cpp.html#a74bf63b8448df7b03bd98ae6de127c0a">Inner</a>({</div>
<div class="line"> Collapsible(<span class="stringliteral">&quot;Collapsible 1.1.1&quot;</span>, <a class="code hl_function" href="examples_2component_2collapsible_8cpp.html#aacbbfcb3c5bc93d26a5c681172e27eae">Empty</a>()),</div>
<div class="line"> Collapsible(<span class="stringliteral">&quot;Collapsible 1.1.2&quot;</span>, <a class="code hl_function" href="examples_2component_2collapsible_8cpp.html#aacbbfcb3c5bc93d26a5c681172e27eae">Empty</a>()),</div>
<div class="line"> Collapsible(<span class="stringliteral">&quot;Collapsible 1.1.3&quot;</span>, <a class="code hl_function" href="examples_2component_2collapsible_8cpp.html#aacbbfcb3c5bc93d26a5c681172e27eae">Empty</a>()),</div>
<div class="line"> })),</div>
<div class="line"> Collapsible(<span class="stringliteral">&quot;Collapsible 1.2&quot;</span>,</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2collapsible_8cpp.html#a74bf63b8448df7b03bd98ae6de127c0a">Inner</a>({</div>
<div class="line"> Collapsible(<span class="stringliteral">&quot;Collapsible 1.2.1&quot;</span>, <a class="code hl_function" href="examples_2component_2collapsible_8cpp.html#aacbbfcb3c5bc93d26a5c681172e27eae">Empty</a>()),</div>
<div class="line"> Collapsible(<span class="stringliteral">&quot;Collapsible 1.2.2&quot;</span>, <a class="code hl_function" href="examples_2component_2collapsible_8cpp.html#aacbbfcb3c5bc93d26a5c681172e27eae">Empty</a>()),</div>
<div class="line"> Collapsible(<span class="stringliteral">&quot;Collapsible 1.2.3&quot;</span>, <a class="code hl_function" href="examples_2component_2collapsible_8cpp.html#aacbbfcb3c5bc93d26a5c681172e27eae">Empty</a>()),</div>
<div class="line"> })),</div>
<div class="line"> Collapsible(<span class="stringliteral">&quot;Collapsible 1.3&quot;</span>,</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2collapsible_8cpp.html#a74bf63b8448df7b03bd98ae6de127c0a">Inner</a>({</div>
<div class="line"> Collapsible(<span class="stringliteral">&quot;Collapsible 1.3.1&quot;</span>, <a class="code hl_function" href="examples_2component_2collapsible_8cpp.html#aacbbfcb3c5bc93d26a5c681172e27eae">Empty</a>()),</div>
<div class="line"> Collapsible(<span class="stringliteral">&quot;Collapsible 1.3.2&quot;</span>, <a class="code hl_function" href="examples_2component_2collapsible_8cpp.html#aacbbfcb3c5bc93d26a5c681172e27eae">Empty</a>()),</div>
<div class="line"> Collapsible(<span class="stringliteral">&quot;Collapsible 1.3.3&quot;</span>, <a class="code hl_function" href="examples_2component_2collapsible_8cpp.html#aacbbfcb3c5bc93d26a5c681172e27eae">Empty</a>()),</div>
<div class="line"> })),</div>
<div class="line"> }));</div>
<div class="line"> </div>
<div class="line"> ScreenInteractive::FitComponent().Loop(component);</div>
<div class="line">}</div>
<div class="ttc" id="aexamples_2component_2collapsible_8cpp_html_a74bf63b8448df7b03bd98ae6de127c0a"><div class="ttname"><a href="examples_2component_2collapsible_8cpp.html#a74bf63b8448df7b03bd98ae6de127c0a">Inner</a></div><div class="ttdeci">Component Inner(std::vector&lt; Component &gt; children)</div><div class="ttdef"><b>Definition</b> <a href="examples_2component_2collapsible_8cpp_source.html#l00018">examples/component/collapsible.cpp:18</a></div></div>
<div class="ttc" id="aexamples_2component_2collapsible_8cpp_html_aacbbfcb3c5bc93d26a5c681172e27eae"><div class="ttname"><a href="examples_2component_2collapsible_8cpp.html#aacbbfcb3c5bc93d26a5c681172e27eae">Empty</a></div><div class="ttdeci">Component Empty()</div><div class="ttdef"><b>Definition</b> <a href="examples_2component_2collapsible_8cpp_source.html#l00028">examples/component/collapsible.cpp:28</a></div></div>
<div class="ttc" id="anamespaceftxui_html_af1479ede01dbf087342534ab4ada11d3"><div class="ttname"><a href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">ftxui::Component</a></div><div class="ttdeci">std::shared_ptr&lt; ComponentBase &gt; Component</div><div class="ttdef"><b>Definition</b> <a href="component__base_8hpp_source.html#l00024">component_base.hpp:24</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="composition"></a>
composition</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/composition">Demo</a> </p><div class="fragment"><div class="line"><span class="comment">// Copyright 2021 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">#include &lt;memory&gt;</span> <span class="comment">// for allocator, shared_ptr, __shared_ptr_access</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for operator+, to_string</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Button, Horizontal, Renderer</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for text, separator, Element, operator|, vbox, border</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><span class="comment">// An example of how to compose multiple components into one and maintain their</span></div>
<div class="line"><span class="comment">// interactiveness.</span></div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">auto</span> left_count = 0;</div>
<div class="line"> <span class="keyword">auto</span> right_count = 0;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> left_buttons = Container::Horizontal({</div>
<div class="line"> Button(<span class="stringliteral">&quot;Decrease&quot;</span>, [&amp;] { left_count--; }),</div>
<div class="line"> Button(<span class="stringliteral">&quot;Increase&quot;</span>, [&amp;] { left_count++; }),</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> right_buttons = Container::Horizontal({</div>
<div class="line"> Button(<span class="stringliteral">&quot;Decrease&quot;</span>, [&amp;] { right_count--; }),</div>
<div class="line"> Button(<span class="stringliteral">&quot;Increase&quot;</span>, [&amp;] { right_count++; }),</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// Renderer decorates its child with a new rendering function. The way the</span></div>
<div class="line"> <span class="comment">// children reacts to events is maintained.</span></div>
<div class="line"> <span class="keyword">auto</span> leftpane = Renderer(left_buttons, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;This is the left control&quot;</span>),</div>
<div class="line"> separator(),</div>
<div class="line"> text(<span class="stringliteral">&quot;Left button count: &quot;</span> + std::to_string(left_count)),</div>
<div class="line"> left_buttons-&gt;Render(),</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> rightpane = Renderer(right_buttons, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;This is the right control&quot;</span>),</div>
<div class="line"> separator(),</div>
<div class="line"> text(<span class="stringliteral">&quot;Right button count: &quot;</span> + std::to_string(right_count)),</div>
<div class="line"> right_buttons-&gt;Render(),</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// Container groups components togethers. To render a Container::Horizontal,</span></div>
<div class="line"> <span class="comment">// it render its children side by side. It maintains their interactiveness and</span></div>
<div class="line"> <span class="comment">// provide the logic to navigate from one to the other using the arrow keys.</span></div>
<div class="line"> <span class="keyword">auto</span> composition = Container::Horizontal({leftpane, rightpane});</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::FitComponent();</div>
<div class="line"> screen.Loop(composition);</div>
<div class="line"> <span class="keywordflow">return</span> 0;</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><span class="comment">// Thanks to Chris Morgan for this example!</span></div>
</div><!-- fragment --><h1><a class="anchor" id="custom_loop"></a>
custom_loop</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/custom_loop">Demo</a> </p><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">#include &lt;stdlib.h&gt;</span> <span class="comment">// for EXIT_SUCCESS</span></div>
<div class="line"><span class="preprocessor">#include &lt;chrono&gt;</span> <span class="comment">// for milliseconds</span></div>
<div class="line"><span class="preprocessor">#include &lt;<a class="code" href="event_8hpp.html">ftxui/component/event.hpp</a>&gt;</span> <span class="comment">// for Event</span></div>
<div class="line"><span class="preprocessor">#include &lt;<a class="code" href="mouse_8hpp.html">ftxui/component/mouse.hpp</a>&gt;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &lt;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&gt;</span> <span class="comment">// for text, separator, Element, operator|, vbox, border</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for allocator, shared_ptr</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for operator+, to_string</span></div>
<div class="line"><span class="preprocessor">#include &lt;thread&gt;</span> <span class="comment">// for sleep_for</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for CatchEvent, Renderer, operator|=</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="loop_8hpp.html">ftxui/component/loop.hpp</a>&quot;</span> <span class="comment">// for Loop</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::FitComponent();</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// Create a component counting the number of frames drawn and event handled.</span></div>
<div class="line"> <span class="keywordtype">int</span> custom_loop_count = 0;</div>
<div class="line"> <span class="keywordtype">int</span> frame_count = 0;</div>
<div class="line"> <span class="keywordtype">int</span> event_count = 0;</div>
<div class="line"> <span class="keyword">auto</span> component = Renderer([&amp;] {</div>
<div class="line"> frame_count++;</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;This demonstrates using a custom ftxui::Loop. It &quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;runs at 100 iterations per seconds. The FTXUI events &quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;are all processed once per iteration and a new frame &quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;is rendered as needed&quot;</span>),</div>
<div class="line"> separator(),</div>
<div class="line"> text(<span class="stringliteral">&quot;ftxui event count: &quot;</span> + std::to_string(event_count)),</div>
<div class="line"> text(<span class="stringliteral">&quot;ftxui frame count: &quot;</span> + std::to_string(frame_count)),</div>
<div class="line"> text(<span class="stringliteral">&quot;Custom loop count: &quot;</span> + std::to_string(custom_loop_count)),</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> component |= CatchEvent([&amp;](<a class="code hl_struct" href="group__component.html#structftxui_1_1Event">Event</a>) -&gt; <span class="keywordtype">bool</span> {</div>
<div class="line"> event_count++;</div>
<div class="line"> <span class="keywordflow">return</span> <span class="keyword">false</span>;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <a class="code hl_class" href="group__component.html#classftxui_1_1Loop">Loop</a> loop(&amp;screen, component);</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">while</span> (!loop.HasQuitted()) {</div>
<div class="line"> custom_loop_count++;</div>
<div class="line"> loop.RunOnce();</div>
<div class="line"> std::this_thread::sleep_for(std::chrono::milliseconds(10));</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> EXIT_SUCCESS;</div>
<div class="line">}</div>
<div class="ttc" id="agroup__component_html_classftxui_1_1Loop"><div class="ttname"><a href="group__component.html#classftxui_1_1Loop">ftxui::Loop</a></div><div class="ttdoc">Loop is a class that manages the event loop for a component.</div><div class="ttdef"><b>Definition</b> <a href="loop_8hpp_source.html#l00056">loop.hpp:56</a></div></div>
<div class="ttc" id="aloop_8hpp_html"><div class="ttname"><a href="loop_8hpp.html">loop.hpp</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="dropdown"></a>
dropdown</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/dropdown">Demo</a> </p><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">#include &lt;string&gt;</span> <span class="comment">// for basic_string, string, allocator</span></div>
<div class="line"><span class="preprocessor">#include &lt;vector&gt;</span> <span class="comment">// for vector</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Dropdown, Horizontal, Vertical</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"> std::vector&lt;std::string&gt; entries = {</div>
<div class="line"> <span class="stringliteral">&quot;tribute&quot;</span>, <span class="stringliteral">&quot;clearance&quot;</span>, <span class="stringliteral">&quot;ally&quot;</span>, <span class="stringliteral">&quot;bend&quot;</span>, <span class="stringliteral">&quot;electronics&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;module&quot;</span>, <span class="stringliteral">&quot;era&quot;</span>, <span class="stringliteral">&quot;cultural&quot;</span>, <span class="stringliteral">&quot;sniff&quot;</span>, <span class="stringliteral">&quot;nationalism&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;negotiation&quot;</span>, <span class="stringliteral">&quot;deliver&quot;</span>, <span class="stringliteral">&quot;figure&quot;</span>, <span class="stringliteral">&quot;east&quot;</span>, <span class="stringliteral">&quot;tribute&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;clearance&quot;</span>, <span class="stringliteral">&quot;ally&quot;</span>, <span class="stringliteral">&quot;bend&quot;</span>, <span class="stringliteral">&quot;electronics&quot;</span>, <span class="stringliteral">&quot;module&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;era&quot;</span>, <span class="stringliteral">&quot;cultural&quot;</span>, <span class="stringliteral">&quot;sniff&quot;</span>, <span class="stringliteral">&quot;nationalism&quot;</span>, <span class="stringliteral">&quot;negotiation&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;deliver&quot;</span>, <span class="stringliteral">&quot;figure&quot;</span>, <span class="stringliteral">&quot;east&quot;</span>, <span class="stringliteral">&quot;tribute&quot;</span>, <span class="stringliteral">&quot;clearance&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;ally&quot;</span>, <span class="stringliteral">&quot;bend&quot;</span>, <span class="stringliteral">&quot;electronics&quot;</span>, <span class="stringliteral">&quot;module&quot;</span>, <span class="stringliteral">&quot;era&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;cultural&quot;</span>, <span class="stringliteral">&quot;sniff&quot;</span>, <span class="stringliteral">&quot;nationalism&quot;</span>, <span class="stringliteral">&quot;negotiation&quot;</span>, <span class="stringliteral">&quot;deliver&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;figure&quot;</span>, <span class="stringliteral">&quot;east&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <span class="keywordtype">int</span> selected_1 = 0;</div>
<div class="line"> <span class="keywordtype">int</span> selected_2 = 0;</div>
<div class="line"> <span class="keywordtype">int</span> selected_3 = 0;</div>
<div class="line"> <span class="keywordtype">int</span> selected_4 = 0;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> layout = Container::Vertical({</div>
<div class="line"> Container::Horizontal({</div>
<div class="line"> Dropdown(&amp;entries, &amp;selected_1),</div>
<div class="line"> Dropdown(&amp;entries, &amp;selected_2),</div>
<div class="line"> }),</div>
<div class="line"> Container::Horizontal({</div>
<div class="line"> Dropdown(&amp;entries, &amp;selected_3),</div>
<div class="line"> Dropdown(&amp;entries, &amp;selected_4),</div>
<div class="line"> }),</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::FitComponent();</div>
<div class="line"> screen.Loop(layout);</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="dropdown_custom"></a>
dropdown_custom</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/dropdown_custom">Demo</a> </p><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">#include &lt;string&gt;</span> <span class="comment">// for basic_string, string, allocator</span></div>
<div class="line"><span class="preprocessor">#include &lt;vector&gt;</span> <span class="comment">// for vector</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Dropdown, Horizontal, Vertical</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"> std::vector&lt;std::string&gt; entries = {</div>
<div class="line"> <span class="stringliteral">&quot;tribute&quot;</span>, <span class="stringliteral">&quot;clearance&quot;</span>, <span class="stringliteral">&quot;ally&quot;</span>, <span class="stringliteral">&quot;bend&quot;</span>, <span class="stringliteral">&quot;electronics&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;module&quot;</span>, <span class="stringliteral">&quot;era&quot;</span>, <span class="stringliteral">&quot;cultural&quot;</span>, <span class="stringliteral">&quot;sniff&quot;</span>, <span class="stringliteral">&quot;nationalism&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;negotiation&quot;</span>, <span class="stringliteral">&quot;deliver&quot;</span>, <span class="stringliteral">&quot;figure&quot;</span>, <span class="stringliteral">&quot;east&quot;</span>, <span class="stringliteral">&quot;tribute&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;clearance&quot;</span>, <span class="stringliteral">&quot;ally&quot;</span>, <span class="stringliteral">&quot;bend&quot;</span>, <span class="stringliteral">&quot;electronics&quot;</span>, <span class="stringliteral">&quot;module&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;era&quot;</span>, <span class="stringliteral">&quot;cultural&quot;</span>, <span class="stringliteral">&quot;sniff&quot;</span>, <span class="stringliteral">&quot;nationalism&quot;</span>, <span class="stringliteral">&quot;negotiation&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;deliver&quot;</span>, <span class="stringliteral">&quot;figure&quot;</span>, <span class="stringliteral">&quot;east&quot;</span>, <span class="stringliteral">&quot;tribute&quot;</span>, <span class="stringliteral">&quot;clearance&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;ally&quot;</span>, <span class="stringliteral">&quot;bend&quot;</span>, <span class="stringliteral">&quot;electronics&quot;</span>, <span class="stringliteral">&quot;module&quot;</span>, <span class="stringliteral">&quot;era&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;cultural&quot;</span>, <span class="stringliteral">&quot;sniff&quot;</span>, <span class="stringliteral">&quot;nationalism&quot;</span>, <span class="stringliteral">&quot;negotiation&quot;</span>, <span class="stringliteral">&quot;deliver&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;figure&quot;</span>, <span class="stringliteral">&quot;east&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> dropdown_1 = Dropdown({</div>
<div class="line"> .radiobox = {.entries = &amp;entries},</div>
<div class="line"> .transform =</div>
<div class="line"> [](<span class="keywordtype">bool</span> open, <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> checkbox, <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> radiobox) {</div>
<div class="line"> <span class="keywordflow">if</span> (open) {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> checkbox | inverted,</div>
<div class="line"> radiobox | vscroll_indicator | frame |</div>
<div class="line"> size(HEIGHT, LESS_THAN, 10),</div>
<div class="line"> filler(),</div>
<div class="line"> });</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> checkbox,</div>
<div class="line"> filler(),</div>
<div class="line"> });</div>
<div class="line"> },</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> dropdown_2 = Dropdown({</div>
<div class="line"> .radiobox = {.entries = &amp;entries},</div>
<div class="line"> .transform =</div>
<div class="line"> [](<span class="keywordtype">bool</span> open, <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> checkbox, <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> radiobox) {</div>
<div class="line"> <span class="keywordflow">if</span> (open) {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> checkbox | inverted,</div>
<div class="line"> radiobox | vscroll_indicator | frame |</div>
<div class="line"> size(HEIGHT, LESS_THAN, 10) | bgcolor(Color::Blue),</div>
<div class="line"> filler(),</div>
<div class="line"> });</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> checkbox | bgcolor(Color::Blue),</div>
<div class="line"> filler(),</div>
<div class="line"> });</div>
<div class="line"> },</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> dropdown_3 = Dropdown({</div>
<div class="line"> .radiobox =</div>
<div class="line"> {</div>
<div class="line"> .entries = &amp;entries,</div>
<div class="line"> .transform =</div>
<div class="line"> [](<span class="keyword">const</span> <a class="code hl_struct" href="structftxui_1_1EntryState.html">EntryState</a>&amp; s) {</div>
<div class="line"> <span class="keyword">auto</span> t = text(s.label) | borderEmpty;</div>
<div class="line"> <span class="keywordflow">if</span> (s.active) {</div>
<div class="line"> t |= bold;</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">if</span> (s.focused) {</div>
<div class="line"> t |= inverted;</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> t;</div>
<div class="line"> },</div>
<div class="line"> },</div>
<div class="line"> .transform =</div>
<div class="line"> [](<span class="keywordtype">bool</span> open, <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> checkbox, <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> radiobox) {</div>
<div class="line"> checkbox |= borderEmpty;</div>
<div class="line"> <span class="keywordflow">if</span> (open) {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> checkbox | inverted,</div>
<div class="line"> radiobox | vscroll_indicator | frame |</div>
<div class="line"> size(HEIGHT, LESS_THAN, 20) | bgcolor(Color::Red),</div>
<div class="line"> filler(),</div>
<div class="line"> });</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> checkbox | bgcolor(Color::Red),</div>
<div class="line"> filler(),</div>
<div class="line"> });</div>
<div class="line"> },</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::FitComponent();</div>
<div class="line"> screen.Loop(Container::Horizontal({</div>
<div class="line"> dropdown_1,</div>
<div class="line"> dropdown_2,</div>
<div class="line"> dropdown_3,</div>
<div class="line"> }));</div>
<div class="line">}</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><!-- fragment --><h1><a class="anchor" id="flexbox_gallery"></a>
flexbox_gallery</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/flexbox_gallery">Demo</a> </p><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">#include &lt;stddef.h&gt;</span> <span class="comment">// for size_t</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for shared_ptr, __shared_ptr_access, allocator</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for string, basic_string, to_string, operator+, char_traits</span></div>
<div class="line"><span class="preprocessor">#include &lt;vector&gt;</span> <span class="comment">// for vector</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Radiobox, Vertical, Checkbox, Horizontal, Renderer, ResizableSplitBottom, ResizableSplitRight</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for text, window, operator|, vbox, hbox, Element, flexbox, bgcolor, filler, flex, size, border, hcenter, color, EQUAL, bold, dim, notflex, xflex_grow, yflex_grow, HEIGHT, WIDTH</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> <span class="comment">// for FlexboxConfig, FlexboxConfig::AlignContent, FlexboxConfig::JustifyContent, FlexboxConfig::AlignContent::Center, FlexboxConfig::AlignItems, FlexboxConfig::Direction, FlexboxConfig::JustifyContent::Center, FlexboxConfig::Wrap</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="color_8hpp.html">ftxui/screen/color.hpp</a>&quot;</span> <span class="comment">// for Color, Color::Black</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::Fullscreen();</div>
<div class="line"> </div>
<div class="line"> <span class="keywordtype">int</span> direction_index = 0;</div>
<div class="line"> <span class="keywordtype">int</span> wrap_index = 0;</div>
<div class="line"> <span class="keywordtype">int</span> justify_content_index = 0;</div>
<div class="line"> <span class="keywordtype">int</span> align_items_index = 0;</div>
<div class="line"> <span class="keywordtype">int</span> align_content_index = 0;</div>
<div class="line"> </div>
<div class="line"> std::vector&lt;std::string&gt; directions = {</div>
<div class="line"> <span class="stringliteral">&quot;Row&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;RowInversed&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Column&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;ColumnInversed&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> std::vector&lt;std::string&gt; wraps = {</div>
<div class="line"> <span class="stringliteral">&quot;NoWrap&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Wrap&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;WrapInversed&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> std::vector&lt;std::string&gt; justify_content = {</div>
<div class="line"> <span class="stringliteral">&quot;FlexStart&quot;</span>, <span class="stringliteral">&quot;FlexEnd&quot;</span>, <span class="stringliteral">&quot;Center&quot;</span>, <span class="stringliteral">&quot;Stretch&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;SpaceBetween&quot;</span>, <span class="stringliteral">&quot;SpaceAround&quot;</span>, <span class="stringliteral">&quot;SpaceEvenly&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> std::vector&lt;std::string&gt; align_items = {</div>
<div class="line"> <span class="stringliteral">&quot;FlexStart&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;FlexEnd&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Center&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Stretch&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> std::vector&lt;std::string&gt; align_content = {</div>
<div class="line"> <span class="stringliteral">&quot;FlexStart&quot;</span>, <span class="stringliteral">&quot;FlexEnd&quot;</span>, <span class="stringliteral">&quot;Center&quot;</span>, <span class="stringliteral">&quot;Stretch&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;SpaceBetween&quot;</span>, <span class="stringliteral">&quot;SpaceAround&quot;</span>, <span class="stringliteral">&quot;SpaceEvenly&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> radiobox_direction = Radiobox(&amp;directions, &amp;direction_index);</div>
<div class="line"> <span class="keyword">auto</span> radiobox_wrap = Radiobox(&amp;wraps, &amp;wrap_index);</div>
<div class="line"> <span class="keyword">auto</span> radiobox_justify_content =</div>
<div class="line"> Radiobox(&amp;justify_content, &amp;justify_content_index);</div>
<div class="line"> <span class="keyword">auto</span> radiobox_align_items = Radiobox(&amp;align_items, &amp;align_items_index);</div>
<div class="line"> <span class="keyword">auto</span> radiobox_align_content = Radiobox(&amp;align_content, &amp;align_content_index);</div>
<div class="line"> </div>
<div class="line"> <span class="keywordtype">bool</span> element_xflex_grow = <span class="keyword">false</span>;</div>
<div class="line"> <span class="keywordtype">bool</span> element_yflex_grow = <span class="keyword">false</span>;</div>
<div class="line"> <span class="keywordtype">bool</span> group_xflex_grow = <span class="keyword">true</span>;</div>
<div class="line"> <span class="keywordtype">bool</span> group_yflex_grow = <span class="keyword">true</span>;</div>
<div class="line"> <span class="keyword">auto</span> checkbox_element_xflex_grow =</div>
<div class="line"> Checkbox(<span class="stringliteral">&quot;element |= xflex_grow&quot;</span>, &amp;element_xflex_grow);</div>
<div class="line"> <span class="keyword">auto</span> checkbox_element_yflex_grow =</div>
<div class="line"> Checkbox(<span class="stringliteral">&quot;element |= yflex_grow&quot;</span>, &amp;element_yflex_grow);</div>
<div class="line"> <span class="keyword">auto</span> checkbox_group_xflex_grow =</div>
<div class="line"> Checkbox(<span class="stringliteral">&quot;group |= xflex_grow&quot;</span>, &amp;group_xflex_grow);</div>
<div class="line"> <span class="keyword">auto</span> checkbox_group_yflex_grow =</div>
<div class="line"> Checkbox(<span class="stringliteral">&quot;group |= yflex_grow&quot;</span>, &amp;group_yflex_grow);</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a> = [&amp;](<span class="keywordtype">size_t</span> dimx, <span class="keywordtype">size_t</span> dimy, <span class="keywordtype">size_t</span> index) {</div>
<div class="line"> std::string title = std::to_string(dimx) + <span class="stringliteral">&quot;x&quot;</span> + std::to_string(dimy);</div>
<div class="line"> <span class="keyword">auto</span> element = window(text(title) | hcenter | bold,</div>
<div class="line"> text(std::to_string(index)) | hcenter | dim) |</div>
<div class="line"> size(WIDTH, EQUAL, dimx) | size(HEIGHT, EQUAL, dimy) |</div>
<div class="line"> bgcolor(Color::HSV(index * 25, 255, 255)) |</div>
<div class="line"> color(Color::Black);</div>
<div class="line"> <span class="keywordflow">if</span> (element_xflex_grow) {</div>
<div class="line"> element = element | xflex_grow;</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">if</span> (element_yflex_grow) {</div>
<div class="line"> element = element | yflex_grow;</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> element;</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> content_renderer = Renderer([&amp;] {</div>
<div class="line"> <a class="code hl_struct" href="group__dom.html#structftxui_1_1FlexboxConfig">FlexboxConfig</a> config;</div>
<div class="line"> config.<a class="code hl_variable" href="group__dom.html#a53421c695d00016ab925777d423b4eb6">direction</a> = <span class="keyword">static_cast&lt;</span><a class="code hl_enumeration" href="group__dom.html#a224b9163917ac32fc95a60d8c1eec3aa">FlexboxConfig::Direction</a><span class="keyword">&gt;</span>(direction_index);</div>
<div class="line"> config.<a class="code hl_variable" href="group__dom.html#a68b5470ece4f0a492cc1d2057c9bd5e0">wrap</a> = <span class="keyword">static_cast&lt;</span><a class="code hl_enumeration" href="group__dom.html#a6c844a611650cf7e956dbe269a0e72ab">FlexboxConfig::Wrap</a><span class="keyword">&gt;</span>(wrap_index);</div>
<div class="line"> config.<a class="code hl_variable" href="group__dom.html#ab3173252829e796ee1c100b447243748">justify_content</a> =</div>
<div class="line"> <span class="keyword">static_cast&lt;</span><a class="code hl_enumeration" href="group__dom.html#ac6e5ab18dcac465ee2ac9a0d8b4a82d2">FlexboxConfig::JustifyContent</a><span class="keyword">&gt;</span>(justify_content_index);</div>
<div class="line"> config.<a class="code hl_variable" href="group__dom.html#a1514fd3d64965c521555fdc2cf2002ce">align_items</a> =</div>
<div class="line"> <span class="keyword">static_cast&lt;</span><a class="code hl_enumeration" href="group__dom.html#a821af961ece5fe13540ad48b54c7a9e7">FlexboxConfig::AlignItems</a><span class="keyword">&gt;</span>(align_items_index);</div>
<div class="line"> config.<a class="code hl_variable" href="group__dom.html#a103275cb09167852e469450cf8471256">align_content</a> =</div>
<div class="line"> <span class="keyword">static_cast&lt;</span><a class="code hl_enumeration" href="group__dom.html#a1f99410fd0fc632a5bc2497b6a447420">FlexboxConfig::AlignContent</a><span class="keyword">&gt;</span>(align_content_index);</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> group = flexbox(</div>
<div class="line"> {</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(8, 4, 0),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(9, 6, 1),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(11, 6, 2),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(10, 4, 3),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(13, 7, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(12, 4, 5),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(12, 5, 6),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(10, 4, 7),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(12, 4, 8),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(10, 5, 9),</div>
<div class="line"> },</div>
<div class="line"> config);</div>
<div class="line"> </div>
<div class="line"> group = group | bgcolor(Color::Black);</div>
<div class="line"> </div>
<div class="line"> group = group | notflex;</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">if</span> (!group_xflex_grow) {</div>
<div class="line"> group = hbox(group, filler());</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">if</span> (!group_yflex_grow) {</div>
<div class="line"> group = vbox(group, filler());</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> group = group | flex;</div>
<div class="line"> <span class="keywordflow">return</span> group;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> center = <a class="code hl_struct" href="group__dom.html#structftxui_1_1FlexboxConfig">FlexboxConfig</a>()</div>
<div class="line"> .<a class="code hl_function" href="group__dom.html#ae47b5b0d793d0c2312e4805a1f40012a">Set</a>(FlexboxConfig::JustifyContent::Center)</div>
<div class="line"> .<a class="code hl_function" href="group__dom.html#ae47b5b0d793d0c2312e4805a1f40012a">Set</a>(FlexboxConfig::AlignContent::Center);</div>
<div class="line"> <span class="keywordtype">int</span> space_right = 10;</div>
<div class="line"> <span class="keywordtype">int</span> space_bottom = 1;</div>
<div class="line"> content_renderer = ResizableSplitRight(</div>
<div class="line"> Renderer([&amp;] { <span class="keywordflow">return</span> flexbox({text(<span class="stringliteral">&quot;resizable&quot;</span>)}, center); }),</div>
<div class="line"> content_renderer, &amp;space_right);</div>
<div class="line"> content_renderer = ResizableSplitBottom(</div>
<div class="line"> Renderer([&amp;] { <span class="keywordflow">return</span> flexbox({text(<span class="stringliteral">&quot;resizable&quot;</span>)}, center); }),</div>
<div class="line"> content_renderer, &amp;space_bottom);</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> main_container = Container::Vertical({</div>
<div class="line"> Container::Horizontal({</div>
<div class="line"> radiobox_direction,</div>
<div class="line"> radiobox_wrap,</div>
<div class="line"> Container::Vertical({</div>
<div class="line"> checkbox_element_xflex_grow,</div>
<div class="line"> checkbox_element_yflex_grow,</div>
<div class="line"> checkbox_group_xflex_grow,</div>
<div class="line"> checkbox_group_yflex_grow,</div>
<div class="line"> }),</div>
<div class="line"> }),</div>
<div class="line"> Container::Horizontal({</div>
<div class="line"> radiobox_justify_content,</div>
<div class="line"> radiobox_align_items,</div>
<div class="line"> radiobox_align_content,</div>
<div class="line"> }),</div>
<div class="line"> content_renderer,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> main_renderer = Renderer(main_container, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> vbox({hbox({</div>
<div class="line"> window(text(<span class="stringliteral">&quot;FlexboxConfig::Direction&quot;</span>),</div>
<div class="line"> radiobox_direction-&gt;Render()),</div>
<div class="line"> window(text(<span class="stringliteral">&quot;FlexboxConfig::Wrap&quot;</span>), radiobox_wrap-&gt;Render()),</div>
<div class="line"> window(text(<span class="stringliteral">&quot;Misc:&quot;</span>),</div>
<div class="line"> vbox({</div>
<div class="line"> checkbox_element_xflex_grow-&gt;Render(),</div>
<div class="line"> checkbox_element_yflex_grow-&gt;Render(),</div>
<div class="line"> checkbox_group_xflex_grow-&gt;Render(),</div>
<div class="line"> checkbox_group_yflex_grow-&gt;Render(),</div>
<div class="line"> })),</div>
<div class="line"> }),</div>
<div class="line"> hbox({</div>
<div class="line"> window(text(<span class="stringliteral">&quot;FlexboxConfig::JustifyContent&quot;</span>),</div>
<div class="line"> radiobox_justify_content-&gt;Render()),</div>
<div class="line"> window(text(<span class="stringliteral">&quot;FlexboxConfig::AlignItems&quot;</span>),</div>
<div class="line"> radiobox_align_items-&gt;Render()),</div>
<div class="line"> window(text(<span class="stringliteral">&quot;FlexboxConfig::AlignContent&quot;</span>),</div>
<div class="line"> radiobox_align_content-&gt;Render()),</div>
<div class="line"> })}),</div>
<div class="line"> content_renderer-&gt;Render() | flex | border,</div>
<div class="line"> });</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> screen.Loop(main_renderer);</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> 0;</div>
<div class="line">}</div>
<div class="ttc" id="aexamples_2component_2focus_8cpp_html_a9ffb8a33ec5d0133f63f791d526df1c7"><div class="ttname"><a href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a></div><div class="ttdeci">Element make_box(int x, int y)</div><div class="ttdef"><b>Definition</b> <a href="examples_2component_2focus_8cpp_source.html#l00017">examples/component/focus.cpp:17</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_a103275cb09167852e469450cf8471256"><div class="ttname"><a href="group__dom.html#a103275cb09167852e469450cf8471256">ftxui::FlexboxConfig::align_content</a></div><div class="ttdeci">AlignContent align_content</div><div class="ttdef"><b>Definition</b> <a href="flexbox__config_8hpp_source.html#l00105">flexbox_config.hpp:105</a></div></div>
<div class="ttc" id="agroup__dom_html_a1514fd3d64965c521555fdc2cf2002ce"><div class="ttname"><a href="group__dom.html#a1514fd3d64965c521555fdc2cf2002ce">ftxui::FlexboxConfig::align_items</a></div><div class="ttdeci">AlignItems align_items</div><div class="ttdef"><b>Definition</b> <a href="flexbox__config_8hpp_source.html#l00089">flexbox_config.hpp:89</a></div></div>
<div class="ttc" id="agroup__dom_html_a1f99410fd0fc632a5bc2497b6a447420"><div class="ttname"><a href="group__dom.html#a1f99410fd0fc632a5bc2497b6a447420">ftxui::FlexboxConfig::AlignContent</a></div><div class="ttdeci">AlignContent</div><div class="ttdef"><b>Definition</b> <a href="flexbox__config_8hpp_source.html#l00094">flexbox_config.hpp:94</a></div></div>
<div class="ttc" id="agroup__dom_html_a224b9163917ac32fc95a60d8c1eec3aa"><div class="ttname"><a href="group__dom.html#a224b9163917ac32fc95a60d8c1eec3aa">ftxui::FlexboxConfig::Direction</a></div><div class="ttdeci">Direction</div><div class="ttdef"><b>Definition</b> <a href="flexbox__config_8hpp_source.html#l00032">flexbox_config.hpp:32</a></div></div>
<div class="ttc" id="agroup__dom_html_a53421c695d00016ab925777d423b4eb6"><div class="ttname"><a href="group__dom.html#a53421c695d00016ab925777d423b4eb6">ftxui::FlexboxConfig::direction</a></div><div class="ttdeci">Direction direction</div><div class="ttdef"><b>Definition</b> <a href="flexbox__config_8hpp_source.html#l00039">flexbox_config.hpp:39</a></div></div>
<div class="ttc" id="agroup__dom_html_a68b5470ece4f0a492cc1d2057c9bd5e0"><div class="ttname"><a href="group__dom.html#a68b5470ece4f0a492cc1d2057c9bd5e0">ftxui::FlexboxConfig::wrap</a></div><div class="ttdeci">Wrap wrap</div><div class="ttdef"><b>Definition</b> <a href="flexbox__config_8hpp_source.html#l00049">flexbox_config.hpp:49</a></div></div>
<div class="ttc" id="agroup__dom_html_a6c844a611650cf7e956dbe269a0e72ab"><div class="ttname"><a href="group__dom.html#a6c844a611650cf7e956dbe269a0e72ab">ftxui::FlexboxConfig::Wrap</a></div><div class="ttdeci">Wrap</div><div class="ttdef"><b>Definition</b> <a href="flexbox__config_8hpp_source.html#l00043">flexbox_config.hpp:43</a></div></div>
<div class="ttc" id="agroup__dom_html_a821af961ece5fe13540ad48b54c7a9e7"><div class="ttname"><a href="group__dom.html#a821af961ece5fe13540ad48b54c7a9e7">ftxui::FlexboxConfig::AlignItems</a></div><div class="ttdeci">AlignItems</div><div class="ttdef"><b>Definition</b> <a href="flexbox__config_8hpp_source.html#l00083">flexbox_config.hpp:83</a></div></div>
<div class="ttc" id="agroup__dom_html_ab3173252829e796ee1c100b447243748"><div class="ttname"><a href="group__dom.html#ab3173252829e796ee1c100b447243748">ftxui::FlexboxConfig::justify_content</a></div><div class="ttdeci">JustifyContent justify_content</div><div class="ttdef"><b>Definition</b> <a href="flexbox__config_8hpp_source.html#l00078">flexbox_config.hpp:78</a></div></div>
<div class="ttc" id="agroup__dom_html_ac6e5ab18dcac465ee2ac9a0d8b4a82d2"><div class="ttname"><a href="group__dom.html#ac6e5ab18dcac465ee2ac9a0d8b4a82d2">ftxui::FlexboxConfig::JustifyContent</a></div><div class="ttdeci">JustifyContent</div><div class="ttdef"><b>Definition</b> <a href="flexbox__config_8hpp_source.html#l00056">flexbox_config.hpp:56</a></div></div>
<div class="ttc" id="agroup__dom_html_ae47b5b0d793d0c2312e4805a1f40012a"><div class="ttname"><a href="group__dom.html#ae47b5b0d793d0c2312e4805a1f40012a">ftxui::FlexboxConfig::Set</a></div><div class="ttdeci">FlexboxConfig &amp; Set(FlexboxConfig::Direction)</div><div class="ttdoc">Set the flexbox direction.</div><div class="ttdef"><b>Definition</b> <a href="flexbox__config_8cpp_source.html#l00009">flexbox_config.cpp:9</a></div></div>
<div class="ttc" id="agroup__dom_html_structftxui_1_1FlexboxConfig"><div class="ttname"><a href="group__dom.html#structftxui_1_1FlexboxConfig">ftxui::FlexboxConfig</a></div><div class="ttdoc">FlexboxConfig is a configuration structure that defines the layout properties for a flexbox container...</div><div class="ttdef"><b>Definition</b> <a href="flexbox__config_8hpp_source.html#l00027">flexbox_config.hpp:27</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="focus"></a>
focus</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/focus">Demo</a> </p><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">#include &lt;memory&gt;</span> <span class="comment">// for allocator, shared_ptr, __shared_ptr_access</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for operator+, char_traits, to_string, string</span></div>
<div class="line"><span class="preprocessor">#include &lt;vector&gt;</span> <span class="comment">// for vector</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Slider, Renderer, Vertical</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for Elements, Element, operator|, separator, text, focusPositionRelative, size, border, flex, frame, bgcolor, gridbox, vbox, EQUAL, center, HEIGHT, WIDTH</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="color_8hpp.html">ftxui/screen/color.hpp</a>&quot;</span> <span class="comment">// for Color</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</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="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(<span class="keywordtype">int</span> x, <span class="keywordtype">int</span> y) {</div>
<div class="line"> std::string title = <span class="stringliteral">&quot;(&quot;</span> + std::to_string(x) + <span class="stringliteral">&quot;, &quot;</span> + std::to_string(y) + <span class="stringliteral">&quot;)&quot;</span>;</div>
<div class="line"> <span class="keywordflow">return</span> text(title) | center | size(WIDTH, EQUAL, 18) |</div>
<div class="line"> size(HEIGHT, EQUAL, 9) | border |</div>
<div class="line"> bgcolor(Color::HSV(x * 255 / 15, 255, y * 255 / 15));</div>
<div class="line">};</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="examples_2component_2focus_8cpp.html#a9543e1b98f00db8484ee0c856a1d4cca">make_grid</a>() {</div>
<div class="line"> std::vector&lt;Elements&gt; rows;</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> i = 0; i &lt; 15; i++) {</div>
<div class="line"> std::vector&lt;Element&gt; cols;</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> j = 0; j &lt; 15; j++) {</div>
<div class="line"> cols.push_back(<a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(i, j));</div>
<div class="line"> }</div>
<div class="line"> rows.push_back(cols);</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> gridbox(rows);</div>
<div class="line">};</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keywordtype">float</span> focus_x = 0.5f;</div>
<div class="line"> <span class="keywordtype">float</span> focus_y = 0.5f;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> slider_x = Slider(<span class="stringliteral">&quot;x&quot;</span>, &amp;focus_x, 0.f, 1.f, 0.01f);</div>
<div class="line"> <span class="keyword">auto</span> slider_y = Slider(<span class="stringliteral">&quot;y&quot;</span>, &amp;focus_y, 0.f, 1.f, 0.01f);</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> renderer = Renderer(</div>
<div class="line"> Container::Vertical({</div>
<div class="line"> slider_x,</div>
<div class="line"> slider_y,</div>
<div class="line"> }),</div>
<div class="line"> [&amp;] {</div>
<div class="line"> <span class="keyword">auto</span> title = <span class="stringliteral">&quot;focusPositionRelative(&quot;</span> + <span class="comment">//</span></div>
<div class="line"> std::to_string(focus_x) + <span class="stringliteral">&quot;, &quot;</span> + <span class="comment">//</span></div>
<div class="line"> std::to_string(focus_y) + <span class="stringliteral">&quot;)&quot;</span>; <span class="comment">//</span></div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> text(title),</div>
<div class="line"> separator(),</div>
<div class="line"> slider_x-&gt;Render(),</div>
<div class="line"> slider_y-&gt;Render(),</div>
<div class="line"> separator(),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9543e1b98f00db8484ee0c856a1d4cca">make_grid</a>() | focusPositionRelative(focus_x, focus_y) |</div>
<div class="line"> frame | flex,</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::Fullscreen();</div>
<div class="line"> screen.Loop(renderer);</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> 0;</div>
<div class="line">}</div>
<div class="ttc" id="aexamples_2component_2focus_8cpp_html_a9543e1b98f00db8484ee0c856a1d4cca"><div class="ttname"><a href="examples_2component_2focus_8cpp.html#a9543e1b98f00db8484ee0c856a1d4cca">make_grid</a></div><div class="ttdeci">Element make_grid()</div><div class="ttdef"><b>Definition</b> <a href="examples_2component_2focus_8cpp_source.html#l00024">examples/component/focus.cpp:24</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="focus_cursor"></a>
focus_cursor</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/focus_cursor">Demo</a> </p><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">#include &lt;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&gt;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for allocator, operator+, char_traits, string</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Renderer, Vertical</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive, Component</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for text, Decorator, focus, focusCursorBar, focusCursorBarBlinking, focusCursorBlock, focusCursorBlockBlinking, focusCursorUnderline, focusCursorUnderlineBlinking, hbox, Element</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="focus__cursor_8cpp.html#a96da73e7fb75cca8a91e59559ce1dba2">Instance</a>(std::string label, <a class="code hl_typedef" href="namespaceftxui.html#a164021903e9ac6f1357e4186582891e3">Decorator</a> focusCursor) {</div>
<div class="line"> <span class="keywordflow">return</span> Renderer([=](<span class="keywordtype">bool</span> focused) {</div>
<div class="line"> <span class="keywordflow">if</span> (focused) {</div>
<div class="line"> <span class="keywordflow">return</span> hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;&gt; &quot;</span> + label + <span class="stringliteral">&quot; &quot;</span>),</div>
<div class="line"> focusCursor(text(<span class="stringliteral">&quot; &quot;</span>)),</div>
<div class="line"> });</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> text(<span class="stringliteral">&quot; &quot;</span> + label + <span class="stringliteral">&quot; &quot;</span>);</div>
<div class="line"> });</div>
<div class="line">};</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::Fullscreen();</div>
<div class="line"> screen.Loop(Container::Vertical({</div>
<div class="line"> <a class="code hl_function" href="focus__cursor_8cpp.html#a96da73e7fb75cca8a91e59559ce1dba2">Instance</a>(<span class="stringliteral">&quot;focus&quot;</span>, focus),</div>
<div class="line"> <a class="code hl_function" href="focus__cursor_8cpp.html#a96da73e7fb75cca8a91e59559ce1dba2">Instance</a>(<span class="stringliteral">&quot;focusCursorBlock&quot;</span>, focusCursorBlock),</div>
<div class="line"> <a class="code hl_function" href="focus__cursor_8cpp.html#a96da73e7fb75cca8a91e59559ce1dba2">Instance</a>(<span class="stringliteral">&quot;focusCursorBlockBlinking&quot;</span>, focusCursorBlockBlinking),</div>
<div class="line"> <a class="code hl_function" href="focus__cursor_8cpp.html#a96da73e7fb75cca8a91e59559ce1dba2">Instance</a>(<span class="stringliteral">&quot;focusCursorBar&quot;</span>, focusCursorBar),</div>
<div class="line"> <a class="code hl_function" href="focus__cursor_8cpp.html#a96da73e7fb75cca8a91e59559ce1dba2">Instance</a>(<span class="stringliteral">&quot;focusCursorBarBlinking&quot;</span>, focusCursorBarBlinking),</div>
<div class="line"> <a class="code hl_function" href="focus__cursor_8cpp.html#a96da73e7fb75cca8a91e59559ce1dba2">Instance</a>(<span class="stringliteral">&quot;focusCursorUnderline&quot;</span>, focusCursorUnderline),</div>
<div class="line"> <a class="code hl_function" href="focus__cursor_8cpp.html#a96da73e7fb75cca8a91e59559ce1dba2">Instance</a>(<span class="stringliteral">&quot;focusCursorUnderlineBlinking&quot;</span>, focusCursorUnderlineBlinking),</div>
<div class="line"> }));</div>
<div class="line"> <span class="keywordflow">return</span> 0;</div>
<div class="line">}</div>
<div class="ttc" id="afocus__cursor_8cpp_html_a96da73e7fb75cca8a91e59559ce1dba2"><div class="ttname"><a href="focus__cursor_8cpp.html#a96da73e7fb75cca8a91e59559ce1dba2">Instance</a></div><div class="ttdeci">Component Instance(std::string label, Decorator focusCursor)</div><div class="ttdef"><b>Definition</b> <a href="focus__cursor_8cpp_source.html#l00013">focus_cursor.cpp:13</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><!-- fragment --><h1><a class="anchor" id="gallery"></a>
gallery</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/gallery">Demo</a> </p><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">#include &lt;functional&gt;</span> <span class="comment">// for function</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for shared_ptr, allocator, __shared_ptr_access</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for string, basic_string</span></div>
<div class="line"><span class="preprocessor">#include &lt;vector&gt;</span> <span class="comment">// for vector</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Slider, Checkbox, Vertical, Renderer, Button, Input, Menu, Radiobox, Toggle</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for Component, ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for separator, operator|, Element, size, xflex, text, WIDTH, hbox, vbox, EQUAL, border, GREATER_THAN</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><span class="comment">// Display a component nicely with a title on the left.</span></div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="gallery_8cpp.html#a0a320000c5a485508c57030f605b800a">Wrap</a>(std::string name, <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> component) {</div>
<div class="line"> <span class="keywordflow">return</span> Renderer(component, [name, component] {</div>
<div class="line"> <span class="keywordflow">return</span> hbox({</div>
<div class="line"> text(name) | size(WIDTH, EQUAL, 8),</div>
<div class="line"> separator(),</div>
<div class="line"> component-&gt;Render() | xflex,</div>
<div class="line"> }) |</div>
<div class="line"> xflex;</div>
<div class="line"> });</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::FitComponent();</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// -- Menu</span></div>
<div class="line"> <span class="comment">// ----------------------------------------------------------------------</span></div>
<div class="line"> <span class="keyword">const</span> std::vector&lt;std::string&gt; menu_entries = {</div>
<div class="line"> <span class="stringliteral">&quot;Menu 1&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Menu 2&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Menu 3&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Menu 4&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> <span class="keywordtype">int</span> menu_selected = 0;</div>
<div class="line"> <span class="keyword">auto</span> menu = Menu(&amp;menu_entries, &amp;menu_selected);</div>
<div class="line"> menu = <a class="code hl_function" href="gallery_8cpp.html#a0a320000c5a485508c57030f605b800a">Wrap</a>(<span class="stringliteral">&quot;Menu&quot;</span>, menu);</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// -- Toggle------------------------------------------------------------------</span></div>
<div class="line"> <span class="keywordtype">int</span> toggle_selected = 0;</div>
<div class="line"> std::vector&lt;std::string&gt; toggle_entries = {</div>
<div class="line"> <span class="stringliteral">&quot;Toggle_1&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Toggle_2&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> <span class="keyword">auto</span> toggle = Toggle(&amp;toggle_entries, &amp;toggle_selected);</div>
<div class="line"> toggle = <a class="code hl_function" href="gallery_8cpp.html#a0a320000c5a485508c57030f605b800a">Wrap</a>(<span class="stringliteral">&quot;Toggle&quot;</span>, toggle);</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// -- Checkbox ---------------------------------------------------------------</span></div>
<div class="line"> <span class="keywordtype">bool</span> checkbox_1_selected = <span class="keyword">false</span>;</div>
<div class="line"> <span class="keywordtype">bool</span> checkbox_2_selected = <span class="keyword">false</span>;</div>
<div class="line"> <span class="keywordtype">bool</span> checkbox_3_selected = <span class="keyword">false</span>;</div>
<div class="line"> <span class="keywordtype">bool</span> checkbox_4_selected = <span class="keyword">false</span>;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> checkboxes = Container::Vertical({</div>
<div class="line"> Checkbox(<span class="stringliteral">&quot;checkbox1&quot;</span>, &amp;checkbox_1_selected),</div>
<div class="line"> Checkbox(<span class="stringliteral">&quot;checkbox2&quot;</span>, &amp;checkbox_2_selected),</div>
<div class="line"> Checkbox(<span class="stringliteral">&quot;checkbox3&quot;</span>, &amp;checkbox_3_selected),</div>
<div class="line"> Checkbox(<span class="stringliteral">&quot;checkbox4&quot;</span>, &amp;checkbox_4_selected),</div>
<div class="line"> });</div>
<div class="line"> checkboxes = <a class="code hl_function" href="gallery_8cpp.html#a0a320000c5a485508c57030f605b800a">Wrap</a>(<span class="stringliteral">&quot;Checkbox&quot;</span>, checkboxes);</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// -- Radiobox ---------------------------------------------------------------</span></div>
<div class="line"> <span class="keywordtype">int</span> radiobox_selected = 0;</div>
<div class="line"> std::vector&lt;std::string&gt; radiobox_entries = {</div>
<div class="line"> <span class="stringliteral">&quot;Radiobox 1&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Radiobox 2&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Radiobox 3&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Radiobox 4&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> <span class="keyword">auto</span> radiobox = Radiobox(&amp;radiobox_entries, &amp;radiobox_selected);</div>
<div class="line"> radiobox = <a class="code hl_function" href="gallery_8cpp.html#a0a320000c5a485508c57030f605b800a">Wrap</a>(<span class="stringliteral">&quot;Radiobox&quot;</span>, radiobox);</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// -- Input ------------------------------------------------------------------</span></div>
<div class="line"> std::string input_label;</div>
<div class="line"> <span class="keyword">auto</span> input = Input(&amp;input_label, <span class="stringliteral">&quot;placeholder&quot;</span>);</div>
<div class="line"> input = <a class="code hl_function" href="gallery_8cpp.html#a0a320000c5a485508c57030f605b800a">Wrap</a>(<span class="stringliteral">&quot;Input&quot;</span>, input);</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// -- Button -----------------------------------------------------------------</span></div>
<div class="line"> std::string button_label = <span class="stringliteral">&quot;Quit&quot;</span>;</div>
<div class="line"> std::function&lt;void()&gt; on_button_clicked_;</div>
<div class="line"> <span class="keyword">auto</span> button = Button(&amp;button_label, screen.ExitLoopClosure());</div>
<div class="line"> button = <a class="code hl_function" href="gallery_8cpp.html#a0a320000c5a485508c57030f605b800a">Wrap</a>(<span class="stringliteral">&quot;Button&quot;</span>, button);</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// -- Slider -----------------------------------------------------------------</span></div>
<div class="line"> <span class="keywordtype">int</span> slider_value_1 = 12;</div>
<div class="line"> <span class="keywordtype">int</span> slider_value_2 = 56;</div>
<div class="line"> <span class="keywordtype">int</span> slider_value_3 = 128;</div>
<div class="line"> <span class="keyword">auto</span> sliders = Container::Vertical({</div>
<div class="line"> Slider(<span class="stringliteral">&quot;R:&quot;</span>, &amp;slider_value_1, 0, 256, 1),</div>
<div class="line"> Slider(<span class="stringliteral">&quot;G:&quot;</span>, &amp;slider_value_2, 0, 256, 1),</div>
<div class="line"> Slider(<span class="stringliteral">&quot;B:&quot;</span>, &amp;slider_value_3, 0, 256, 1),</div>
<div class="line"> });</div>
<div class="line"> sliders = <a class="code hl_function" href="gallery_8cpp.html#a0a320000c5a485508c57030f605b800a">Wrap</a>(<span class="stringliteral">&quot;Slider&quot;</span>, sliders);</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// A large text:</span></div>
<div class="line"> <span class="keyword">auto</span> lorel_ipsum = Renderer([] {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit. &quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;Sed do eiusmod tempor incididunt ut labore et dolore magna &quot;</span></div>
<div class="line"> <span class="stringliteral">&quot;aliqua. &quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;Ut enim ad minim veniam, quis nostrud exercitation ullamco &quot;</span></div>
<div class="line"> <span class="stringliteral">&quot;laboris nisi ut aliquip ex ea commodo consequat. &quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;Duis aute irure dolor in reprehenderit in voluptate velit esse &quot;</span></div>
<div class="line"> <span class="stringliteral">&quot;cillum dolore eu fugiat nulla pariatur. &quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;Excepteur sint occaecat cupidatat non proident, sunt in culpa &quot;</span></div>
<div class="line"> <span class="stringliteral">&quot;qui officia deserunt mollit anim id est laborum. &quot;</span>),</div>
<div class="line"> </div>
<div class="line"> });</div>
<div class="line"> });</div>
<div class="line"> lorel_ipsum = <a class="code hl_function" href="gallery_8cpp.html#a0a320000c5a485508c57030f605b800a">Wrap</a>(<span class="stringliteral">&quot;Lorel Ipsum&quot;</span>, lorel_ipsum);</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// -- Layout</span></div>
<div class="line"> <span class="comment">// -----------------------------------------------------------------</span></div>
<div class="line"> <span class="keyword">auto</span> layout = Container::Vertical({</div>
<div class="line"> menu,</div>
<div class="line"> toggle,</div>
<div class="line"> checkboxes,</div>
<div class="line"> radiobox,</div>
<div class="line"> input,</div>
<div class="line"> sliders,</div>
<div class="line"> button,</div>
<div class="line"> lorel_ipsum,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> component = Renderer(layout, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> menu-&gt;Render(),</div>
<div class="line"> separator(),</div>
<div class="line"> toggle-&gt;Render(),</div>
<div class="line"> separator(),</div>
<div class="line"> checkboxes-&gt;Render(),</div>
<div class="line"> separator(),</div>
<div class="line"> radiobox-&gt;Render(),</div>
<div class="line"> separator(),</div>
<div class="line"> input-&gt;Render(),</div>
<div class="line"> separator(),</div>
<div class="line"> sliders-&gt;Render(),</div>
<div class="line"> separator(),</div>
<div class="line"> button-&gt;Render(),</div>
<div class="line"> separator(),</div>
<div class="line"> lorel_ipsum-&gt;Render(),</div>
<div class="line"> }) |</div>
<div class="line"> xflex | size(WIDTH, GREATER_THAN, 40) | border;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> screen.Loop(component);</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> 0;</div>
<div class="line">}</div>
<div class="ttc" id="agallery_8cpp_html_a0a320000c5a485508c57030f605b800a"><div class="ttname"><a href="gallery_8cpp.html#a0a320000c5a485508c57030f605b800a">Wrap</a></div><div class="ttdeci">Component Wrap(std::string name, Component component)</div><div class="ttdef"><b>Definition</b> <a href="gallery_8cpp_source.html#l00018">gallery.cpp:18</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="homescreen"></a>
homescreen</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/homescreen">Demo</a> </p><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">#include &lt;stddef.h&gt;</span> <span class="comment">// for size_t</span></div>
<div class="line"><span class="preprocessor">#include &lt;array&gt;</span> <span class="comment">// for array</span></div>
<div class="line"><span class="preprocessor">#include &lt;atomic&gt;</span> <span class="comment">// for atomic</span></div>
<div class="line"><span class="preprocessor">#include &lt;chrono&gt;</span> <span class="comment">// for operator&quot;&quot;s, chrono_literals</span></div>
<div class="line"><span class="preprocessor">#include &lt;cmath&gt;</span> <span class="comment">// for sin</span></div>
<div class="line"><span class="preprocessor">#include &lt;<a class="code" href="loop_8hpp.html">ftxui/component/loop.hpp</a>&gt;</span></div>
<div class="line"><span class="preprocessor">#include &lt;functional&gt;</span> <span class="comment">// for ref, reference_wrapper, function</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for allocator, shared_ptr, __shared_ptr_access</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for string, basic_string, char_traits, operator+, to_string</span></div>
<div class="line"><span class="preprocessor">#include &lt;thread&gt;</span> <span class="comment">// for sleep_for, thread</span></div>
<div class="line"><span class="preprocessor">#include &lt;utility&gt;</span> <span class="comment">// for move</span></div>
<div class="line"><span class="preprocessor">#include &lt;vector&gt;</span> <span class="comment">// for vector</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;../dom/color_info_sorted_2d.ipp&quot;</span> <span class="comment">// for ColorInfoSorted2D</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Checkbox, Renderer, Horizontal, Vertical, Input, Menu, Radiobox, ResizableSplitLeft, Tab</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase, Component</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__options_8hpp.html">ftxui/component/component_options.hpp</a>&quot;</span> <span class="comment">// for MenuOption, InputOption</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="event_8hpp.html">ftxui/component/event.hpp</a>&quot;</span> <span class="comment">// for Event, Event::Custom</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for Component, ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for text, color, operator|, bgcolor, filler, Element, vbox, size, hbox, separator, flex, window, graph, EQUAL, paragraph, WIDTH, hcenter, Elements, bold, vscroll_indicator, HEIGHT, flexbox, hflow, border, frame, flex_grow, gauge, paragraphAlignCenter, paragraphAlignJustify, paragraphAlignLeft, paragraphAlignRight, dim, spinner, LESS_THAN, center, yframe, GREATER_THAN</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> <span class="comment">// for FlexboxConfig</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="color_8hpp.html">ftxui/screen/color.hpp</a>&quot;</span> <span class="comment">// for Color, Color::BlueLight, Color::RedLight, Color::Black, Color::Blue, Color::Cyan, Color::CyanLight, Color::GrayDark, Color::GrayLight, Color::Green, Color::GreenLight, Color::Magenta, Color::MagentaLight, Color::Red, Color::White, Color::Yellow, Color::YellowLight, Color::Default, Color::Palette256, ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="color__info_8hpp.html">ftxui/screen/color_info.hpp</a>&quot;</span> <span class="comment">// for ColorInfo</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="terminal_8hpp.html">ftxui/screen/terminal.hpp</a>&quot;</span> <span class="comment">// for Size, Dimensions</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::Fullscreen();</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> <span class="comment">// HTOP</span></div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> <span class="keywordtype">int</span> shift = 0;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> my_graph = [&amp;shift](<span class="keywordtype">int</span> width, <span class="keywordtype">int</span> height) {</div>
<div class="line"> std::vector&lt;int&gt; output(width);</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> i = 0; i &lt; width; ++i) {</div>
<div class="line"> <span class="keywordtype">float</span> v = 0.5f;</div>
<div class="line"> v += 0.1f * sin((i + shift) * 0.1f);</div>
<div class="line"> v += 0.2f * sin((i + shift + 10) * 0.15f);</div>
<div class="line"> v += 0.1f * sin((i + shift) * 0.03f);</div>
<div class="line"> v *= height;</div>
<div class="line"> output[i] = (int)v;</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> output;</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> htop = Renderer([&amp;] {</div>
<div class="line"> <span class="keyword">auto</span> frequency = vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;Frequency [Mhz]&quot;</span>) | hcenter,</div>
<div class="line"> hbox({</div>
<div class="line"> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;2400 &quot;</span>),</div>
<div class="line"> filler(),</div>
<div class="line"> text(<span class="stringliteral">&quot;1200 &quot;</span>),</div>
<div class="line"> filler(),</div>
<div class="line"> text(<span class="stringliteral">&quot;0 &quot;</span>),</div>
<div class="line"> }),</div>
<div class="line"> graph(std::ref(my_graph)) | flex,</div>
<div class="line"> }) | flex,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> utilization = vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;Utilization [%]&quot;</span>) | hcenter,</div>
<div class="line"> hbox({</div>
<div class="line"> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;100 &quot;</span>),</div>
<div class="line"> filler(),</div>
<div class="line"> text(<span class="stringliteral">&quot;50 &quot;</span>),</div>
<div class="line"> filler(),</div>
<div class="line"> text(<span class="stringliteral">&quot;0 &quot;</span>),</div>
<div class="line"> }),</div>
<div class="line"> graph(std::ref(my_graph)) | color(Color::RedLight),</div>
<div class="line"> }) | flex,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> ram = vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;Ram [Mo]&quot;</span>) | hcenter,</div>
<div class="line"> hbox({</div>
<div class="line"> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;8192&quot;</span>),</div>
<div class="line"> filler(),</div>
<div class="line"> text(<span class="stringliteral">&quot;4096 &quot;</span>),</div>
<div class="line"> filler(),</div>
<div class="line"> text(<span class="stringliteral">&quot;0 &quot;</span>),</div>
<div class="line"> }),</div>
<div class="line"> graph(std::ref(my_graph)) | color(Color::BlueLight),</div>
<div class="line"> }) | flex,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> hbox({</div>
<div class="line"> vbox({</div>
<div class="line"> frequency | flex,</div>
<div class="line"> separator(),</div>
<div class="line"> utilization | flex,</div>
<div class="line"> }) | flex,</div>
<div class="line"> separator(),</div>
<div class="line"> ram | flex,</div>
<div class="line"> }) |</div>
<div class="line"> flex;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> <span class="comment">// Compiler</span></div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> </div>
<div class="line"> <span class="keyword">const</span> std::vector&lt;std::string&gt; compiler_entries = {</div>
<div class="line"> <span class="stringliteral">&quot;gcc&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;clang&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;emcc&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;game_maker&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Ada compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;ALGOL 60 compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;ALGOL 68 compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Assemblers (Intel *86)&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Assemblers (Motorola 68*)&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Assemblers (Zilog Z80)&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Assemblers (other)&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;BASIC Compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;BASIC interpreters&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Batch compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;C compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Source-to-source compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;C++ compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;C# compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;COBOL compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Common Lisp compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;D compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;DIBOL/DBL compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;ECMAScript interpreters&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Eiffel compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Fortran compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Go compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Haskell compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Java compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Pascal compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Perl Interpreters&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;PHP compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;PL/I compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Python compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Scheme compilers and interpreters&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Smalltalk compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Tcl Interpreters&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;VMS Interpreters&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Rexx Interpreters&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;CLI compilers&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <span class="keywordtype">int</span> compiler_selected = 0;</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> compiler = Radiobox(&amp;compiler_entries, &amp;compiler_selected);</div>
<div class="line"> </div>
<div class="line"> std::array&lt;std::string, 8&gt; options_label = {</div>
<div class="line"> <span class="stringliteral">&quot;-Wall&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;-Werror&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;-lpthread&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;-O3&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;-Wabi-tag&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;-Wno-class-conversion&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;-Wcomma-subscript&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;-Wno-conversion-null&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> std::array&lt;bool, 8&gt; options_state = {</div>
<div class="line"> <span class="keyword">false</span>, <span class="keyword">false</span>, <span class="keyword">false</span>, <span class="keyword">false</span>, <span class="keyword">false</span>, <span class="keyword">false</span>, <span class="keyword">false</span>, <span class="keyword">false</span>,</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> std::vector&lt;std::string&gt; input_entries;</div>
<div class="line"> <span class="keywordtype">int</span> input_selected = 0;</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> input = Menu(&amp;input_entries, &amp;input_selected);</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> input_option = <a class="code hl_struct" href="group__component.html#structftxui_1_1InputOption">InputOption</a>();</div>
<div class="line"> std::string input_add_content;</div>
<div class="line"> input_option.on_enter = [&amp;] {</div>
<div class="line"> input_entries.push_back(input_add_content);</div>
<div class="line"> input_add_content = <span class="stringliteral">&quot;&quot;</span>;</div>
<div class="line"> };</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> input_add = Input(&amp;input_add_content, <span class="stringliteral">&quot;input files&quot;</span>, input_option);</div>
<div class="line"> </div>
<div class="line"> std::string executable_content_ = <span class="stringliteral">&quot;&quot;</span>;</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> executable_ = Input(&amp;executable_content_, <span class="stringliteral">&quot;executable&quot;</span>);</div>
<div class="line"> </div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> flags = Container::Vertical({</div>
<div class="line"> Checkbox(&amp;options_label[0], &amp;options_state[0]),</div>
<div class="line"> Checkbox(&amp;options_label[1], &amp;options_state[1]),</div>
<div class="line"> Checkbox(&amp;options_label[2], &amp;options_state[2]),</div>
<div class="line"> Checkbox(&amp;options_label[3], &amp;options_state[3]),</div>
<div class="line"> Checkbox(&amp;options_label[4], &amp;options_state[4]),</div>
<div class="line"> Checkbox(&amp;options_label[5], &amp;options_state[5]),</div>
<div class="line"> Checkbox(&amp;options_label[6], &amp;options_state[6]),</div>
<div class="line"> Checkbox(&amp;options_label[7], &amp;options_state[7]),</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> compiler_component = Container::Horizontal({</div>
<div class="line"> compiler,</div>
<div class="line"> flags,</div>
<div class="line"> Container::Vertical({</div>
<div class="line"> executable_,</div>
<div class="line"> Container::Horizontal({</div>
<div class="line"> input_add,</div>
<div class="line"> input,</div>
<div class="line"> }),</div>
<div class="line"> }),</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> render_command = [&amp;] {</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a> line;</div>
<div class="line"> <span class="comment">// Compiler</span></div>
<div class="line"> line.push_back(text(compiler_entries[compiler_selected]) | bold);</div>
<div class="line"> <span class="comment">// flags</span></div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> i = 0; i &lt; 8; ++i) {</div>
<div class="line"> <span class="keywordflow">if</span> (options_state[i]) {</div>
<div class="line"> line.push_back(text(<span class="stringliteral">&quot; &quot;</span>));</div>
<div class="line"> line.push_back(text(options_label[i]) | dim);</div>
<div class="line"> }</div>
<div class="line"> }</div>
<div class="line"> <span class="comment">// Executable</span></div>
<div class="line"> <span class="keywordflow">if</span> (!executable_content_.empty()) {</div>
<div class="line"> line.push_back(text(<span class="stringliteral">&quot; -o &quot;</span>) | bold);</div>
<div class="line"> line.push_back(text(executable_content_) | color(Color::BlueLight) |</div>
<div class="line"> bold);</div>
<div class="line"> }</div>
<div class="line"> <span class="comment">// Input</span></div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keyword">auto</span>&amp; it : input_entries) {</div>
<div class="line"> line.push_back(text(<span class="stringliteral">&quot; &quot;</span> + it) | color(Color::RedLight));</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> line;</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> compiler_renderer = Renderer(compiler_component, [&amp;] {</div>
<div class="line"> <span class="keyword">auto</span> compiler_win = window(text(<span class="stringliteral">&quot;Compiler&quot;</span>),</div>
<div class="line"> compiler-&gt;Render() | vscroll_indicator | frame);</div>
<div class="line"> <span class="keyword">auto</span> flags_win =</div>
<div class="line"> window(text(<span class="stringliteral">&quot;Flags&quot;</span>), flags-&gt;Render() | vscroll_indicator | frame);</div>
<div class="line"> <span class="keyword">auto</span> executable_win = window(text(<span class="stringliteral">&quot;Executable:&quot;</span>), executable_-&gt;Render());</div>
<div class="line"> <span class="keyword">auto</span> input_win =</div>
<div class="line"> window(text(<span class="stringliteral">&quot;Input&quot;</span>), hbox({</div>
<div class="line"> vbox({</div>
<div class="line"> hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;Add: &quot;</span>),</div>
<div class="line"> input_add-&gt;Render(),</div>
<div class="line"> }) | size(WIDTH, EQUAL, 20) |</div>
<div class="line"> size(HEIGHT, EQUAL, 1),</div>
<div class="line"> filler(),</div>
<div class="line"> }),</div>
<div class="line"> separator(),</div>
<div class="line"> input-&gt;Render() | vscroll_indicator | frame |</div>
<div class="line"> size(HEIGHT, EQUAL, 3) | flex,</div>
<div class="line"> }));</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> hbox({</div>
<div class="line"> compiler_win,</div>
<div class="line"> flags_win,</div>
<div class="line"> vbox({</div>
<div class="line"> executable_win | size(WIDTH, EQUAL, 20),</div>
<div class="line"> input_win | size(WIDTH, EQUAL, 60),</div>
<div class="line"> }),</div>
<div class="line"> filler(),</div>
<div class="line"> }) | size(HEIGHT, LESS_THAN, 8),</div>
<div class="line"> hflow(render_command()) | flex_grow,</div>
<div class="line"> }) |</div>
<div class="line"> flex_grow;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> <span class="comment">// Spinner</span></div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> <span class="keyword">auto</span> spinner_tab_renderer = Renderer([&amp;] {</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a> entries;</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> i = 0; i &lt; 22; ++i) {</div>
<div class="line"> entries.push_back(spinner(i, shift / 5) | bold |</div>
<div class="line"> size(WIDTH, GREATER_THAN, 2) | border);</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> hflow(std::move(entries));</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> <span class="comment">// Colors</span></div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> <span class="keyword">auto</span> color_tab_renderer = Renderer([] {</div>
<div class="line"> <span class="keyword">auto</span> basic_color_display =</div>
<div class="line"> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;16 color palette:&quot;</span>),</div>
<div class="line"> separator(),</div>
<div class="line"> hbox({</div>
<div class="line"> vbox({</div>
<div class="line"> color(Color::Default, text(<span class="stringliteral">&quot;Default&quot;</span>)),</div>
<div class="line"> color(Color::Black, text(<span class="stringliteral">&quot;Black&quot;</span>)),</div>
<div class="line"> color(Color::GrayDark, text(<span class="stringliteral">&quot;GrayDark&quot;</span>)),</div>
<div class="line"> color(Color::GrayLight, text(<span class="stringliteral">&quot;GrayLight&quot;</span>)),</div>
<div class="line"> color(Color::White, text(<span class="stringliteral">&quot;White&quot;</span>)),</div>
<div class="line"> color(Color::Blue, text(<span class="stringliteral">&quot;Blue&quot;</span>)),</div>
<div class="line"> color(Color::BlueLight, text(<span class="stringliteral">&quot;BlueLight&quot;</span>)),</div>
<div class="line"> color(Color::Cyan, text(<span class="stringliteral">&quot;Cyan&quot;</span>)),</div>
<div class="line"> color(Color::CyanLight, text(<span class="stringliteral">&quot;CyanLight&quot;</span>)),</div>
<div class="line"> color(Color::Green, text(<span class="stringliteral">&quot;Green&quot;</span>)),</div>
<div class="line"> color(Color::GreenLight, text(<span class="stringliteral">&quot;GreenLight&quot;</span>)),</div>
<div class="line"> color(Color::Magenta, text(<span class="stringliteral">&quot;Magenta&quot;</span>)),</div>
<div class="line"> color(Color::MagentaLight, text(<span class="stringliteral">&quot;MagentaLight&quot;</span>)),</div>
<div class="line"> color(Color::Red, text(<span class="stringliteral">&quot;Red&quot;</span>)),</div>
<div class="line"> color(Color::RedLight, text(<span class="stringliteral">&quot;RedLight&quot;</span>)),</div>
<div class="line"> color(Color::Yellow, text(<span class="stringliteral">&quot;Yellow&quot;</span>)),</div>
<div class="line"> color(Color::YellowLight, text(<span class="stringliteral">&quot;YellowLight&quot;</span>)),</div>
<div class="line"> }),</div>
<div class="line"> vbox({</div>
<div class="line"> bgcolor(Color::Default, text(<span class="stringliteral">&quot;Default&quot;</span>)),</div>
<div class="line"> bgcolor(Color::Black, text(<span class="stringliteral">&quot;Black&quot;</span>)),</div>
<div class="line"> bgcolor(Color::GrayDark, text(<span class="stringliteral">&quot;GrayDark&quot;</span>)),</div>
<div class="line"> bgcolor(Color::GrayLight, text(<span class="stringliteral">&quot;GrayLight&quot;</span>)),</div>
<div class="line"> bgcolor(Color::White, text(<span class="stringliteral">&quot;White&quot;</span>)),</div>
<div class="line"> bgcolor(Color::Blue, text(<span class="stringliteral">&quot;Blue&quot;</span>)),</div>
<div class="line"> bgcolor(Color::BlueLight, text(<span class="stringliteral">&quot;BlueLight&quot;</span>)),</div>
<div class="line"> bgcolor(Color::Cyan, text(<span class="stringliteral">&quot;Cyan&quot;</span>)),</div>
<div class="line"> bgcolor(Color::CyanLight, text(<span class="stringliteral">&quot;CyanLight&quot;</span>)),</div>
<div class="line"> bgcolor(Color::Green, text(<span class="stringliteral">&quot;Green&quot;</span>)),</div>
<div class="line"> bgcolor(Color::GreenLight, text(<span class="stringliteral">&quot;GreenLight&quot;</span>)),</div>
<div class="line"> bgcolor(Color::Magenta, text(<span class="stringliteral">&quot;Magenta&quot;</span>)),</div>
<div class="line"> bgcolor(Color::MagentaLight, text(<span class="stringliteral">&quot;MagentaLight&quot;</span>)),</div>
<div class="line"> bgcolor(Color::Red, text(<span class="stringliteral">&quot;Red&quot;</span>)),</div>
<div class="line"> bgcolor(Color::RedLight, text(<span class="stringliteral">&quot;RedLight&quot;</span>)),</div>
<div class="line"> bgcolor(Color::Yellow, text(<span class="stringliteral">&quot;Yellow&quot;</span>)),</div>
<div class="line"> bgcolor(Color::YellowLight, text(<span class="stringliteral">&quot;YellowLight&quot;</span>)),</div>
<div class="line"> }),</div>
<div class="line"> }),</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> palette_256_color_display = text(<span class="stringliteral">&quot;256 colors palette:&quot;</span>);</div>
<div class="line"> {</div>
<div class="line"> std::vector&lt;std::vector&lt;ColorInfo&gt;&gt; info_columns = <a class="code hl_function" href="color__info__sorted__2d_8ipp.html#a0f08918d6064cd2a0e56cb9ec74033ca">ColorInfoSorted2D</a>();</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a> columns;</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keyword">auto</span>&amp; column : info_columns) {</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a> column_elements;</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keyword">auto</span>&amp; it : column) {</div>
<div class="line"> column_elements.push_back(</div>
<div class="line"> text(<span class="stringliteral">&quot; &quot;</span>) | bgcolor(<a class="code hl_class" href="group__screen.html#classftxui_1_1Color">Color</a>(<a class="code hl_enumeration" href="group__screen.html#abd07c48f62cc507fafa2486a43130fcf">Color::Palette256</a>(it.index_256))));</div>
<div class="line"> }</div>
<div class="line"> columns.push_back(hbox(std::move(column_elements)));</div>
<div class="line"> }</div>
<div class="line"> palette_256_color_display = vbox({</div>
<div class="line"> palette_256_color_display,</div>
<div class="line"> separator(),</div>
<div class="line"> vbox(columns),</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// True color display.</span></div>
<div class="line"> <span class="keyword">auto</span> true_color_display = text(<span class="stringliteral">&quot;TrueColors: 24bits:&quot;</span>);</div>
<div class="line"> {</div>
<div class="line"> <span class="keywordtype">int</span> saturation = 255;</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a> array;</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> value = 0; value &lt; 255; value += 16) {</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a> line;</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> hue = 0; hue &lt; 255; hue += 6) {</div>
<div class="line"> line.push_back(text(<span class="stringliteral">&quot;&quot;</span>) <span class="comment">//</span></div>
<div class="line"> | color(Color::HSV(hue, saturation, value)) <span class="comment">//</span></div>
<div class="line"> | bgcolor(Color::HSV(hue, saturation, value + 8)));</div>
<div class="line"> }</div>
<div class="line"> array.push_back(hbox(std::move(line)));</div>
<div class="line"> }</div>
<div class="line"> true_color_display = vbox({</div>
<div class="line"> true_color_display,</div>
<div class="line"> separator(),</div>
<div class="line"> vbox(std::move(array)),</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> flexbox(</div>
<div class="line"> {</div>
<div class="line"> basic_color_display,</div>
<div class="line"> palette_256_color_display,</div>
<div class="line"> true_color_display,</div>
<div class="line"> },</div>
<div class="line"> <a class="code hl_struct" href="group__dom.html#structftxui_1_1FlexboxConfig">FlexboxConfig</a>().<a class="code hl_function" href="group__dom.html#a98d9a43033c09c7f967cdec791408bad">SetGap</a>(1, 1));</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> <span class="comment">// Gauges</span></div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> <span class="keyword">auto</span> render_gauge = [&amp;shift](<span class="keywordtype">int</span> delta) {</div>
<div class="line"> <span class="keywordtype">float</span> progress = (shift + delta) % 500 / 500.f;</div>
<div class="line"> <span class="keywordflow">return</span> hbox({</div>
<div class="line"> text(std::to_string(<span class="keywordtype">int</span>(progress * 100)) + <span class="stringliteral">&quot;% &quot;</span>) |</div>
<div class="line"> size(WIDTH, EQUAL, 5),</div>
<div class="line"> gauge(progress),</div>
<div class="line"> });</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> gauge_component = Renderer([render_gauge] {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> render_gauge(0) | color(Color::Black),</div>
<div class="line"> render_gauge(100) | color(Color::GrayDark),</div>
<div class="line"> render_gauge(50) | color(Color::GrayLight),</div>
<div class="line"> render_gauge(6894) | color(Color::White),</div>
<div class="line"> separator(),</div>
<div class="line"> render_gauge(6841) | color(Color::Blue),</div>
<div class="line"> render_gauge(9813) | color(Color::BlueLight),</div>
<div class="line"> render_gauge(98765) | color(Color::Cyan),</div>
<div class="line"> render_gauge(98) | color(Color::CyanLight),</div>
<div class="line"> render_gauge(9846) | color(Color::Green),</div>
<div class="line"> render_gauge(1122) | color(Color::GreenLight),</div>
<div class="line"> render_gauge(84) | color(Color::Magenta),</div>
<div class="line"> render_gauge(645) | color(Color::MagentaLight),</div>
<div class="line"> render_gauge(568) | color(Color::Red),</div>
<div class="line"> render_gauge(2222) | color(Color::RedLight),</div>
<div class="line"> render_gauge(220) | color(Color::Yellow),</div>
<div class="line"> render_gauge(348) | color(Color::YellowLight),</div>
<div class="line"> });</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> <span class="comment">// Paragraph</span></div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> <span class="keyword">auto</span> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a> = [](<span class="keywordtype">size_t</span> dimx, <span class="keywordtype">size_t</span> dimy) {</div>
<div class="line"> std::string title = std::to_string(dimx) + <span class="stringliteral">&quot;x&quot;</span> + std::to_string(dimy);</div>
<div class="line"> <span class="keywordflow">return</span> window(text(title) | hcenter | bold,</div>
<div class="line"> text(<span class="stringliteral">&quot;content&quot;</span>) | hcenter | dim) |</div>
<div class="line"> size(WIDTH, EQUAL, dimx) | size(HEIGHT, EQUAL, dimy);</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> paragraph_renderer_left = Renderer([&amp;] {</div>
<div class="line"> std::string str =</div>
<div class="line"> <span class="stringliteral">&quot;Lorem Ipsum is simply dummy text of the printing and typesetting &quot;</span></div>
<div class="line"> <span class="stringliteral">&quot;industry.\nLorem Ipsum has been the industry&#39;s standard dummy text &quot;</span></div>
<div class="line"> <span class="stringliteral">&quot;ever since the 1500s, when an unknown printer took a galley of type &quot;</span></div>
<div class="line"> <span class="stringliteral">&quot;and scrambled it to make a type specimen book.&quot;</span>;</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> window(text(<span class="stringliteral">&quot;Align left:&quot;</span>), paragraphAlignLeft(str)),</div>
<div class="line"> window(text(<span class="stringliteral">&quot;Align center:&quot;</span>), paragraphAlignCenter(str)),</div>
<div class="line"> window(text(<span class="stringliteral">&quot;Align right:&quot;</span>), paragraphAlignRight(str)),</div>
<div class="line"> window(text(<span class="stringliteral">&quot;Align justify:&quot;</span>), paragraphAlignJustify(str)),</div>
<div class="line"> window(text(<span class="stringliteral">&quot;Side by side&quot;</span>), hbox({</div>
<div class="line"> paragraph(str),</div>
<div class="line"> separator(),</div>
<div class="line"> paragraph(str),</div>
<div class="line"> })),</div>
<div class="line"> window(text(<span class="stringliteral">&quot;Elements with different size:&quot;</span>),</div>
<div class="line"> flexbox({</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(10, 5),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(9, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(8, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(6, 3),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(10, 5),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(9, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(8, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(6, 3),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(10, 5),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(9, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(8, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(6, 3),</div>
<div class="line"> })),</div>
<div class="line"> }) |</div>
<div class="line"> vscroll_indicator | yframe | flex;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> paragraph_renderer_right = Renderer([] {</div>
<div class="line"> <span class="keywordflow">return</span> paragraph(<span class="stringliteral">&quot;&lt;--- This vertical bar is resizable using the mouse&quot;</span>) |</div>
<div class="line"> center;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keywordtype">int</span> paragraph_renderer_split_position = Terminal::Size().dimx / 2;</div>
<div class="line"> <span class="keyword">auto</span> paragraph_renderer_group =</div>
<div class="line"> ResizableSplitLeft(paragraph_renderer_left, paragraph_renderer_right,</div>
<div class="line"> &amp;paragraph_renderer_split_position);</div>
<div class="line"> <span class="keyword">auto</span> paragraph_renderer_group_renderer =</div>
<div class="line"> Renderer(paragraph_renderer_group,</div>
<div class="line"> [&amp;] { <span class="keywordflow">return</span> paragraph_renderer_group-&gt;Render(); });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> <span class="comment">// Tabs</span></div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> </div>
<div class="line"> <span class="keywordtype">int</span> tab_index = 0;</div>
<div class="line"> std::vector&lt;std::string&gt; tab_entries = {</div>
<div class="line"> <span class="stringliteral">&quot;htop&quot;</span>, <span class="stringliteral">&quot;color&quot;</span>, <span class="stringliteral">&quot;spinner&quot;</span>, <span class="stringliteral">&quot;gauge&quot;</span>, <span class="stringliteral">&quot;compiler&quot;</span>, <span class="stringliteral">&quot;paragraph&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> <span class="keyword">auto</span> tab_selection =</div>
<div class="line"> Menu(&amp;tab_entries, &amp;tab_index, MenuOption::HorizontalAnimated());</div>
<div class="line"> <span class="keyword">auto</span> tab_content = Container::Tab(</div>
<div class="line"> {</div>
<div class="line"> htop,</div>
<div class="line"> color_tab_renderer,</div>
<div class="line"> spinner_tab_renderer,</div>
<div class="line"> gauge_component,</div>
<div class="line"> compiler_renderer,</div>
<div class="line"> paragraph_renderer_group_renderer,</div>
<div class="line"> },</div>
<div class="line"> &amp;tab_index);</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> exit_button =</div>
<div class="line"> Button(<span class="stringliteral">&quot;Exit&quot;</span>, [&amp;] { screen.Exit(); }, ButtonOption::Animated());</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> main_container = Container::Vertical({</div>
<div class="line"> Container::Horizontal({</div>
<div class="line"> tab_selection,</div>
<div class="line"> exit_button,</div>
<div class="line"> }),</div>
<div class="line"> tab_content,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> main_renderer = Renderer(main_container, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;FTXUI Demo&quot;</span>) | bold | hcenter,</div>
<div class="line"> hbox({</div>
<div class="line"> tab_selection-&gt;Render() | flex,</div>
<div class="line"> exit_button-&gt;Render(),</div>
<div class="line"> }),</div>
<div class="line"> tab_content-&gt;Render() | flex,</div>
<div class="line"> });</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <a class="code hl_class" href="group__component.html#classftxui_1_1Loop">Loop</a> loop(&amp;screen, main_renderer);</div>
<div class="line"> <span class="keywordflow">while</span> (!loop.HasQuitted()) {</div>
<div class="line"> <span class="comment">// Update the state of the application.</span></div>
<div class="line"> shift++;</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// Request a new frame to be drawn.</span></div>
<div class="line"> screen.RequestAnimationFrame();</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// Execute events, and draw the next frame.</span></div>
<div class="line"> loop.RunOnce();</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// Sleep for a short duration to control the frame rate (60 FPS).</span></div>
<div class="line"> std::this_thread::sleep_for(std::chrono::milliseconds(1000 / 60));</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> 0;</div>
<div class="line">}</div>
<div class="ttc" id="acolor__info_8hpp_html"><div class="ttname"><a href="color__info_8hpp.html">color_info.hpp</a></div></div>
<div class="ttc" id="acolor__info__sorted__2d_8ipp_html_a0f08918d6064cd2a0e56cb9ec74033ca"><div class="ttname"><a href="color__info__sorted__2d_8ipp.html#a0f08918d6064cd2a0e56cb9ec74033ca">ColorInfoSorted2D</a></div><div class="ttdeci">std::vector&lt; std::vector&lt; ftxui::ColorInfo &gt; &gt; ColorInfoSorted2D()</div><div class="ttdef"><b>Definition</b> <a href="color__info__sorted__2d_8ipp_source.html#l00005">color_info_sorted_2d.ipp:5</a></div></div>
<div class="ttc" id="agroup__component_html_structftxui_1_1InputOption"><div class="ttname"><a href="group__component.html#structftxui_1_1InputOption">ftxui::InputOption</a></div><div class="ttdoc">Option for the Input component.</div><div class="ttdef"><b>Definition</b> <a href="component__options_8hpp_source.html#l00164">component_options.hpp:164</a></div></div>
<div class="ttc" id="agroup__dom_html_a98d9a43033c09c7f967cdec791408bad"><div class="ttname"><a href="group__dom.html#a98d9a43033c09c7f967cdec791408bad">ftxui::FlexboxConfig::SetGap</a></div><div class="ttdeci">FlexboxConfig &amp; SetGap(int gap_x, int gap_y)</div><div class="ttdoc">Set the flexbox flex direction.</div><div class="ttdef"><b>Definition</b> <a href="flexbox__config_8cpp_source.html#l00039">flexbox_config.cpp:39</a></div></div>
<div class="ttc" id="agroup__screen_html_abd07c48f62cc507fafa2486a43130fcf"><div class="ttname"><a href="group__screen.html#abd07c48f62cc507fafa2486a43130fcf">ftxui::Color::Palette256</a></div><div class="ttdeci">Palette256</div><div class="ttdef"><b>Definition</b> <a href="color_8hpp_source.html#l00072">color.hpp:72</a></div></div>
<div class="ttc" id="agroup__screen_html_classftxui_1_1Color"><div class="ttname"><a href="group__screen.html#classftxui_1_1Color">ftxui::Color</a></div><div class="ttdoc">Color is a class that represents a color in the terminal user interface.</div><div class="ttdef"><b>Definition</b> <a href="color_8hpp_source.html#l00022">color.hpp:22</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="aterminal_8hpp_html"><div class="ttname"><a href="terminal_8hpp.html">terminal.hpp</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="input"></a>
input</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/input">Demo</a> </p><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">#include &lt;memory&gt;</span> <span class="comment">// for allocator, __shared_ptr_access</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for char_traits, operator+, string, basic_string</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Input, Renderer, Vertical</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__options_8hpp.html">ftxui/component/component_options.hpp</a>&quot;</span> <span class="comment">// for InputOption</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for Component, ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for text, hbox, separator, Element, operator|, vbox, border</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="ref_8hpp.html">ftxui/util/ref.hpp</a>&quot;</span> <span class="comment">// for Ref</span></div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// The data:</span></div>
<div class="line"> std::string first_name;</div>
<div class="line"> std::string last_name;</div>
<div class="line"> std::string password;</div>
<div class="line"> std::string phoneNumber;</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// The basic input components:</span></div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> input_first_name = Input(&amp;first_name, <span class="stringliteral">&quot;first name&quot;</span>);</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> input_last_name = Input(&amp;last_name, <span class="stringliteral">&quot;last name&quot;</span>);</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// The password input component:</span></div>
<div class="line"> <a class="code hl_struct" href="group__component.html#structftxui_1_1InputOption">InputOption</a> password_option;</div>
<div class="line"> password_option.<a class="code hl_variable" href="group__component.html#a927bd46792ffe38c7545a764d847d066">password</a> = <span class="keyword">true</span>;</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> input_password = Input(&amp;password, <span class="stringliteral">&quot;password&quot;</span>, password_option);</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// The phone number input component:</span></div>
<div class="line"> <span class="comment">// We are using `CatchEvent` to filter out non-digit characters.</span></div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> input_phone_number = Input(&amp;phoneNumber, <span class="stringliteral">&quot;phone number&quot;</span>);</div>
<div class="line"> input_phone_number |= CatchEvent([&amp;](<a class="code hl_struct" href="group__component.html#structftxui_1_1Event">Event</a> event) {</div>
<div class="line"> <span class="keywordflow">return</span> <span class="keyword">event</span>.is_character() &amp;&amp; !std::isdigit(event.<a class="code hl_function" href="group__component.html#a07022c6e92b9144a0e5b337b562f9892">character</a>()[0]);</div>
<div class="line"> });</div>
<div class="line"> input_phone_number |= CatchEvent([&amp;](<a class="code hl_struct" href="group__component.html#structftxui_1_1Event">Event</a> event) {</div>
<div class="line"> <span class="keywordflow">return</span> <span class="keyword">event</span>.is_character() &amp;&amp; phoneNumber.size() &gt; 10;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// The component tree:</span></div>
<div class="line"> <span class="keyword">auto</span> component = Container::Vertical({</div>
<div class="line"> input_first_name,</div>
<div class="line"> input_last_name,</div>
<div class="line"> input_password,</div>
<div class="line"> input_phone_number,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// Tweak how the component tree is rendered:</span></div>
<div class="line"> <span class="keyword">auto</span> renderer = Renderer(component, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> hbox(text(<span class="stringliteral">&quot; First name : &quot;</span>), input_first_name-&gt;Render()),</div>
<div class="line"> hbox(text(<span class="stringliteral">&quot; Last name : &quot;</span>), input_last_name-&gt;Render()),</div>
<div class="line"> hbox(text(<span class="stringliteral">&quot; Password : &quot;</span>), input_password-&gt;Render()),</div>
<div class="line"> hbox(text(<span class="stringliteral">&quot; Phone num : &quot;</span>), input_phone_number-&gt;Render()),</div>
<div class="line"> separator(),</div>
<div class="line"> text(<span class="stringliteral">&quot;Hello &quot;</span> + first_name + <span class="stringliteral">&quot; &quot;</span> + last_name),</div>
<div class="line"> text(<span class="stringliteral">&quot;Your password is &quot;</span> + password),</div>
<div class="line"> text(<span class="stringliteral">&quot;Your phone number is &quot;</span> + phoneNumber),</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::TerminalOutput();</div>
<div class="line"> screen.Loop(renderer);</div>
<div class="line">}</div>
<div class="ttc" id="agroup__component_html_a07022c6e92b9144a0e5b337b562f9892"><div class="ttname"><a href="group__component.html#a07022c6e92b9144a0e5b337b562f9892">ftxui::Event::character</a></div><div class="ttdeci">std::string character() const</div><div class="ttdef"><b>Definition</b> <a href="event_8hpp_source.html#l00107">event.hpp:107</a></div></div>
<div class="ttc" id="agroup__component_html_a927bd46792ffe38c7545a764d847d066"><div class="ttname"><a href="group__component.html#a927bd46792ffe38c7545a764d847d066">ftxui::InputOption::password</a></div><div class="ttdeci">Ref&lt; bool &gt; password</div><div class="ttdoc">Obscure the input content using '*'.</div><div class="ttdef"><b>Definition</b> <a href="component__options_8hpp_source.html#l00180">component_options.hpp:180</a></div></div>
<div class="ttc" id="aref_8hpp_html"><div class="ttname"><a href="ref_8hpp.html">ref.hpp</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="input_in_frame"></a>
input_in_frame</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/input_in_frame">Demo</a> </p><div class="fragment"><div class="line"><span class="comment">// Copyright 2021 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">#include &lt;memory&gt;</span> <span class="comment">// for allocator, __shared_ptr_access</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for string, basic_string, operator+, to_string</span></div>
<div class="line"><span class="preprocessor">#include &lt;vector&gt;</span> <span class="comment">// for vector</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Input, Renderer, Vertical</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for Component, ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for operator|, Element, size, border, frame, vscroll_indicator, HEIGHT, LESS_THAN</span></div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> input_list = Container::Vertical({});</div>
<div class="line"> std::vector&lt;std::string&gt; items(100, <span class="stringliteral">&quot;&quot;</span>);</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">size_t</span> i = 0; i &lt; items.size(); ++i) {</div>
<div class="line"> input_list-&gt;Add(Input(&amp;(items[i]), <span class="stringliteral">&quot;placeholder &quot;</span> + std::to_string(i)));</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> renderer = Renderer(input_list, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> input_list-&gt;Render() | vscroll_indicator | frame | border |</div>
<div class="line"> size(HEIGHT, LESS_THAN, 10);</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::TerminalOutput();</div>
<div class="line"> screen.Loop(renderer);</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="input_style"></a>
input_style</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/input_style">Demo</a> </p><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">#include &lt;<a class="code" href="linear__gradient_8hpp.html">ftxui/dom/linear_gradient.hpp</a>&gt;</span> <span class="comment">// for LinearGradient</span></div>
<div class="line"><span class="preprocessor">#include &lt;<a class="code" href="color_8hpp.html">ftxui/screen/color.hpp</a>&gt;</span> <span class="comment">// for Color, Color::White, Color::Red, Color::Blue, Color::Black, Color::GrayDark, ftxui</span></div>
<div class="line"><span class="preprocessor">#include &lt;functional&gt;</span> <span class="comment">// for function</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for allocator, string</span></div>
<div class="line"><span class="preprocessor">#include &lt;utility&gt;</span> <span class="comment">// for move</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Input, Horizontal, Vertical, operator|</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for Component</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__options_8hpp.html">ftxui/component/component_options.hpp</a>&quot;</span> <span class="comment">// for InputState, InputOption</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for operator|=, Element, bgcolor, operator|, separatorEmpty, color, borderEmpty, separator, text, center, dim, hbox, vbox, border, borderDouble, borderRounded</span></div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"> <a class="code hl_struct" href="group__component.html#structftxui_1_1InputOption">InputOption</a> style_1 = InputOption::Default();</div>
<div class="line"> </div>
<div class="line"> <a class="code hl_struct" href="group__component.html#structftxui_1_1InputOption">InputOption</a> style_2 = InputOption::Spacious();</div>
<div class="line"> </div>
<div class="line"> <a class="code hl_struct" href="group__component.html#structftxui_1_1InputOption">InputOption</a> style_3 = InputOption::Spacious();</div>
<div class="line"> style_3.<a class="code hl_variable" href="group__component.html#a93721d00aaf44f42cc0399024514b628">transform</a> = [](<a class="code hl_struct" href="structftxui_1_1InputState.html">InputState</a> state) {</div>
<div class="line"> state.element |= borderEmpty;</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">if</span> (state.is_placeholder) {</div>
<div class="line"> state.element |= dim;</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">if</span> (state.focused) {</div>
<div class="line"> state.element |= borderDouble;</div>
<div class="line"> state.element |= bgcolor(Color::White);</div>
<div class="line"> state.element |= color(Color::Black);</div>
<div class="line"> } <span class="keywordflow">else</span> <span class="keywordflow">if</span> (state.hovered) {</div>
<div class="line"> state.element |= borderRounded;</div>
<div class="line"> state.element |= bgcolor(<a class="code hl_struct" href="group__dom.html#structftxui_1_1LinearGradient">LinearGradient</a>(90, Color::Blue, Color::Red));</div>
<div class="line"> state.element |= color(Color::White);</div>
<div class="line"> } <span class="keywordflow">else</span> {</div>
<div class="line"> state.element |= border;</div>
<div class="line"> state.element |= bgcolor(<a class="code hl_struct" href="group__dom.html#structftxui_1_1LinearGradient">LinearGradient</a>(0, Color::Blue, Color::Red));</div>
<div class="line"> state.element |= color(Color::White);</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> state.element;</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <a class="code hl_struct" href="group__component.html#structftxui_1_1InputOption">InputOption</a> style_4 = InputOption::Spacious();</div>
<div class="line"> style_4.<a class="code hl_variable" href="group__component.html#a93721d00aaf44f42cc0399024514b628">transform</a> = [](<a class="code hl_struct" href="structftxui_1_1InputState.html">InputState</a> state) {</div>
<div class="line"> state.element = hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;Theorem&quot;</span>) | center | borderEmpty | bgcolor(Color::Red),</div>
<div class="line"> separatorEmpty(),</div>
<div class="line"> separator() | color(Color::White),</div>
<div class="line"> separatorEmpty(),</div>
<div class="line"> std::move(state.element),</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> state.element |= borderEmpty;</div>
<div class="line"> <span class="keywordflow">if</span> (state.is_placeholder) {</div>
<div class="line"> state.element |= dim;</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">if</span> (state.focused) {</div>
<div class="line"> state.element |= bgcolor(Color::Black);</div>
<div class="line"> } <span class="keywordflow">else</span> {</div>
<div class="line"> state.element |= bgcolor(Color::Blue);</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">if</span> (state.hovered) {</div>
<div class="line"> state.element |= bgcolor(Color::GrayDark);</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> vbox({state.element, separatorEmpty()});</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> generateUiFromStyle = [&amp;](<a class="code hl_struct" href="group__component.html#structftxui_1_1InputOption">InputOption</a> style) {</div>
<div class="line"> <span class="keyword">auto</span> first_name = <span class="keyword">new</span> std::string(); <span class="comment">// Leaked</span></div>
<div class="line"> <span class="keyword">auto</span> middle_name = <span class="keyword">new</span> std::string(); <span class="comment">// Leaked</span></div>
<div class="line"> <span class="keyword">auto</span> last_name = <span class="keyword">new</span> std::string(); <span class="comment">// Leaked</span></div>
<div class="line"> <span class="keywordflow">return</span> Container::Vertical({</div>
<div class="line"> Input(first_name, <span class="stringliteral">&quot;first name&quot;</span>, style),</div>
<div class="line"> Input(middle_name, <span class="stringliteral">&quot;middle name&quot;</span>, style),</div>
<div class="line"> Input(last_name, <span class="stringliteral">&quot;last name&quot;</span>, style),</div>
<div class="line"> }) |</div>
<div class="line"> borderEmpty;</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> ui = Container::Horizontal({</div>
<div class="line"> generateUiFromStyle(style_1),</div>
<div class="line"> generateUiFromStyle(style_2),</div>
<div class="line"> generateUiFromStyle(style_3),</div>
<div class="line"> generateUiFromStyle(style_4),</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::TerminalOutput();</div>
<div class="line"> screen.Loop(ui);</div>
<div class="line">}</div>
<div class="ttc" id="agroup__component_html_a93721d00aaf44f42cc0399024514b628"><div class="ttname"><a href="group__component.html#a93721d00aaf44f42cc0399024514b628">ftxui::InputOption::transform</a></div><div class="ttdeci">std::function&lt; Element(InputState)&gt; transform</div><div class="ttdef"><b>Definition</b> <a href="component__options_8hpp_source.html#l00179">component_options.hpp:179</a></div></div>
<div class="ttc" id="agroup__dom_html_structftxui_1_1LinearGradient"><div class="ttname"><a href="group__dom.html#structftxui_1_1LinearGradient">ftxui::LinearGradient</a></div><div class="ttdoc">A class representing the settings for linear-gradient color effect.</div><div class="ttdef"><b>Definition</b> <a href="linear__gradient_8hpp_source.html#l00032">linear_gradient.hpp:32</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="astructftxui_1_1InputState_html"><div class="ttname"><a href="structftxui_1_1InputState.html">ftxui::InputState</a></div><div class="ttdoc">Used to define style for the Input component.</div><div class="ttdef"><b>Definition</b> <a href="component__options_8hpp_source.html#l00154">component_options.hpp:154</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="linear_gradient_gallery"></a>
linear_gradient_gallery</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/linear_gradient_gallery">Demo</a> </p><div class="fragment"><div class="line"><span class="comment">// Copyright 2023 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">#include &lt;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&gt;</span> <span class="comment">// for ComponentBase, Component</span></div>
<div class="line"><span class="preprocessor">#include &lt;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&gt;</span> <span class="comment">// for operator|, Element, flex, bgcolor, text, vbox, center</span></div>
<div class="line"><span class="preprocessor">#include &lt;<a class="code" href="linear__gradient_8hpp.html">ftxui/dom/linear_gradient.hpp</a>&gt;</span> <span class="comment">// for LinearGradient</span></div>
<div class="line"><span class="preprocessor">#include &lt;<a class="code" href="color_8hpp.html">ftxui/screen/color.hpp</a>&gt;</span> <span class="comment">// for Color, Color::Blue, Color::Red</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for __shared_ptr_access, shared_ptr</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for allocator, operator+, char_traits, string, to_string</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Slider, Renderer, Vertical</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::Fullscreen();</div>
<div class="line"> </div>
<div class="line"> <span class="keywordtype">int</span> <a class="code hl_variable" href="src_2ftxui_2dom_2linear__gradient_8cpp.html#ab8ef1bf8a70cc07c6d55823c390a7e76">angle</a> = 180.f;</div>
<div class="line"> <span class="keywordtype">float</span> start = 0.f;</div>
<div class="line"> <span class="keywordtype">float</span> end = 1.f;</div>
<div class="line"> </div>
<div class="line"> std::string slider_angle_text;</div>
<div class="line"> std::string slider_start_text;</div>
<div class="line"> std::string slider_end_text;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> slider_angle = Slider(&amp;slider_angle_text, &amp;<a class="code hl_variable" href="src_2ftxui_2dom_2linear__gradient_8cpp.html#ab8ef1bf8a70cc07c6d55823c390a7e76">angle</a>, 0, 360);</div>
<div class="line"> <span class="keyword">auto</span> slider_start = Slider(&amp;slider_start_text, &amp;start, 0.f, 1.f, 0.05f);</div>
<div class="line"> <span class="keyword">auto</span> slider_end = Slider(&amp;slider_end_text, &amp;end, 0.f, 1.f, 0.05f);</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> layout = Container::Vertical({</div>
<div class="line"> slider_angle,</div>
<div class="line"> slider_start,</div>
<div class="line"> slider_end,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> renderer = Renderer(layout, [&amp;] {</div>
<div class="line"> slider_angle_text = <span class="stringliteral">&quot;angle = &quot;</span> + std::to_string(<a class="code hl_variable" href="src_2ftxui_2dom_2linear__gradient_8cpp.html#ab8ef1bf8a70cc07c6d55823c390a7e76">angle</a>) + <span class="stringliteral">&quot;°&quot;</span>;</div>
<div class="line"> slider_start_text = <span class="stringliteral">&quot;start = &quot;</span> + std::to_string(<span class="keywordtype">int</span>(start * 100)) + <span class="stringliteral">&quot;%&quot;</span>;</div>
<div class="line"> slider_end_text = <span class="stringliteral">&quot;end = &quot;</span> + std::to_string(<span class="keywordtype">int</span>(end * 100)) + <span class="stringliteral">&quot;%&quot;</span>;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> background = text(<span class="stringliteral">&quot;Gradient&quot;</span>) | center |</div>
<div class="line"> bgcolor(<a class="code hl_struct" href="group__dom.html#structftxui_1_1LinearGradient">LinearGradient</a>()</div>
<div class="line"> .Angle(<a class="code hl_variable" href="src_2ftxui_2dom_2linear__gradient_8cpp.html#ab8ef1bf8a70cc07c6d55823c390a7e76">angle</a>)</div>
<div class="line"> .Stop(Color::Blue, start)</div>
<div class="line"> .Stop(Color::Red, end));</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> background | flex,</div>
<div class="line"> layout-&gt;Render(),</div>
<div class="line"> }) |</div>
<div class="line"> flex;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> screen.Loop(renderer);</div>
<div class="line">}</div>
<div class="ttc" id="asrc_2ftxui_2dom_2linear__gradient_8cpp_html_ab8ef1bf8a70cc07c6d55823c390a7e76"><div class="ttname"><a href="src_2ftxui_2dom_2linear__gradient_8cpp.html#ab8ef1bf8a70cc07c6d55823c390a7e76">angle</a></div><div class="ttdeci">float angle</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2linear__gradient_8cpp_source.html#l00023">src/ftxui/dom/linear_gradient.cpp:23</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="maybe"></a>
maybe</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/maybe">Demo</a> </p><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">#include &lt;string&gt;</span> <span class="comment">// for string, allocator, basic_string</span></div>
<div class="line"><span class="preprocessor">#include &lt;vector&gt;</span> <span class="comment">// for vector</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for operator|, Maybe, Checkbox, Radiobox, Renderer, Vertical</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for Component</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for Element, border, color, operator|, text</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="color_8hpp.html">ftxui/screen/color.hpp</a>&quot;</span> <span class="comment">// for Color, Color::Red</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> std::vector&lt;std::string&gt; entries = {</div>
<div class="line"> <span class="stringliteral">&quot;entry 1&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;entry 2&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;entry 3&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> <span class="keywordtype">int</span> menu_1_selected = 0;</div>
<div class="line"> <span class="keywordtype">int</span> menu_2_selected = 0;</div>
<div class="line"> </div>
<div class="line"> <span class="keywordtype">bool</span> menu_1_show = <span class="keyword">false</span>;</div>
<div class="line"> <span class="keywordtype">bool</span> menu_2_show = <span class="keyword">false</span>;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> layout = Container::Vertical({</div>
<div class="line"> Checkbox(<span class="stringliteral">&quot;Show menu_1&quot;</span>, &amp;menu_1_show),</div>
<div class="line"> Radiobox(&amp;entries, &amp;menu_1_selected) | border | Maybe(&amp;menu_1_show),</div>
<div class="line"> Checkbox(<span class="stringliteral">&quot;Show menu_2&quot;</span>, &amp;menu_2_show),</div>
<div class="line"> Radiobox(&amp;entries, &amp;menu_2_selected) | border | Maybe(&amp;menu_2_show),</div>
<div class="line"> </div>
<div class="line"> Renderer([] {</div>
<div class="line"> <span class="keywordflow">return</span> text(<span class="stringliteral">&quot;You found the secret combinaison!&quot;</span>) | color(Color::Red);</div>
<div class="line"> }) | Maybe([&amp;] { <span class="keywordflow">return</span> menu_1_selected == 1 &amp;&amp; menu_2_selected == 2; }),</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::TerminalOutput();</div>
<div class="line"> screen.Loop(layout);</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="menu"></a>
menu</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/menu">Demo</a> </p><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">#include &lt;functional&gt;</span> <span class="comment">// for function</span></div>
<div class="line"><span class="preprocessor">#include &lt;iostream&gt;</span> <span class="comment">// for basic_ostream::operator&lt;&lt;, operator&lt;&lt;, endl, basic_ostream, basic_ostream&lt;&gt;::__ostream_type, cout, ostream</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for string, basic_string, allocator</span></div>
<div class="line"><span class="preprocessor">#include &lt;vector&gt;</span> <span class="comment">// for vector</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Menu</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__options_8hpp.html">ftxui/component/component_options.hpp</a>&quot;</span> <span class="comment">// for MenuOption</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::TerminalOutput();</div>
<div class="line"> </div>
<div class="line"> std::vector&lt;std::string&gt; entries = {</div>
<div class="line"> <span class="stringliteral">&quot;entry 1&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;entry 2&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;entry 3&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> <span class="keywordtype">int</span> selected = 0;</div>
<div class="line"> </div>
<div class="line"> <a class="code hl_struct" href="group__component.html#structftxui_1_1MenuOption">MenuOption</a> option;</div>
<div class="line"> option.<a class="code hl_variable" href="group__component.html#a4ba9530701be07334a17c0184747c535">on_enter</a> = screen.ExitLoopClosure();</div>
<div class="line"> <span class="keyword">auto</span> menu = Menu(&amp;entries, &amp;selected, option);</div>
<div class="line"> </div>
<div class="line"> screen.Loop(menu);</div>
<div class="line"> </div>
<div class="line"> std::cout &lt;&lt; <span class="stringliteral">&quot;Selected element = &quot;</span> &lt;&lt; selected &lt;&lt; std::endl;</div>
<div class="line">}</div>
<div class="ttc" id="agroup__component_html_a4ba9530701be07334a17c0184747c535"><div class="ttname"><a href="group__component.html#a4ba9530701be07334a17c0184747c535">ftxui::MenuOption::on_enter</a></div><div class="ttdeci">std::function&lt; void()&gt; on_enter</div><div class="ttdef"><b>Definition</b> <a href="component__options_8hpp_source.html#l00108">component_options.hpp:108</a></div></div>
<div class="ttc" id="agroup__component_html_structftxui_1_1MenuOption"><div class="ttname"><a href="group__component.html#structftxui_1_1MenuOption">ftxui::MenuOption</a></div><div class="ttdoc">Option for the Menu component.</div><div class="ttdef"><b>Definition</b> <a href="component__options_8hpp_source.html#l00087">component_options.hpp:87</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="menu2"></a>
menu2</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/menu2">Demo</a> </p><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">#include &lt;functional&gt;</span> <span class="comment">// for function</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for allocator, __shared_ptr_access</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for string, basic_string, operator+, to_string</span></div>
<div class="line"><span class="preprocessor">#include &lt;vector&gt;</span> <span class="comment">// for vector</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Menu, Horizontal, Renderer</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__options_8hpp.html">ftxui/component/component_options.hpp</a>&quot;</span> <span class="comment">// for MenuOption</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for Component, ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for text, separator, bold, hcenter, vbox, hbox, gauge, Element, operator|, border</span></div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::TerminalOutput();</div>
<div class="line"> </div>
<div class="line"> std::vector&lt;std::string&gt; left_menu_entries = {</div>
<div class="line"> <span class="stringliteral">&quot;0%&quot;</span>, <span class="stringliteral">&quot;10%&quot;</span>, <span class="stringliteral">&quot;20%&quot;</span>, <span class="stringliteral">&quot;30%&quot;</span>, <span class="stringliteral">&quot;40%&quot;</span>, <span class="stringliteral">&quot;50%&quot;</span>, <span class="stringliteral">&quot;60%&quot;</span>, <span class="stringliteral">&quot;70%&quot;</span>, <span class="stringliteral">&quot;80%&quot;</span>, <span class="stringliteral">&quot;90%&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> std::vector&lt;std::string&gt; right_menu_entries = {</div>
<div class="line"> <span class="stringliteral">&quot;0%&quot;</span>, <span class="stringliteral">&quot;1%&quot;</span>, <span class="stringliteral">&quot;2%&quot;</span>, <span class="stringliteral">&quot;3%&quot;</span>, <span class="stringliteral">&quot;4%&quot;</span>, <span class="stringliteral">&quot;5%&quot;</span>, <span class="stringliteral">&quot;6%&quot;</span>, <span class="stringliteral">&quot;7%&quot;</span>, <span class="stringliteral">&quot;8%&quot;</span>, <span class="stringliteral">&quot;9%&quot;</span>, <span class="stringliteral">&quot;10%&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> menu_option = <a class="code hl_struct" href="group__component.html#structftxui_1_1MenuOption">MenuOption</a>();</div>
<div class="line"> menu_option.on_enter = screen.ExitLoopClosure();</div>
<div class="line"> </div>
<div class="line"> <span class="keywordtype">int</span> left_menu_selected = 0;</div>
<div class="line"> <span class="keywordtype">int</span> right_menu_selected = 0;</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> left_menu_ =</div>
<div class="line"> Menu(&amp;left_menu_entries, &amp;left_menu_selected, menu_option);</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> right_menu_ =</div>
<div class="line"> Menu(&amp;right_menu_entries, &amp;right_menu_selected, menu_option);</div>
<div class="line"> </div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> container = Container::Horizontal({</div>
<div class="line"> left_menu_,</div>
<div class="line"> right_menu_,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> renderer = Renderer(container, [&amp;] {</div>
<div class="line"> <span class="keywordtype">int</span> sum = left_menu_selected * 10 + right_menu_selected;</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> <span class="comment">// -------- Top panel --------------</span></div>
<div class="line"> hbox({</div>
<div class="line"> <span class="comment">// -------- Left Menu --------------</span></div>
<div class="line"> vbox({</div>
<div class="line"> hcenter(bold(text(<span class="stringliteral">&quot;Percentage by 10%&quot;</span>))),</div>
<div class="line"> separator(),</div>
<div class="line"> left_menu_-&gt;Render(),</div>
<div class="line"> }),</div>
<div class="line"> separator(),</div>
<div class="line"> <span class="comment">// -------- Right Menu --------------</span></div>
<div class="line"> vbox({</div>
<div class="line"> hcenter(bold(text(<span class="stringliteral">&quot;Percentage by 1%&quot;</span>))),</div>
<div class="line"> separator(),</div>
<div class="line"> right_menu_-&gt;Render(),</div>
<div class="line"> }),</div>
<div class="line"> separator(),</div>
<div class="line"> }),</div>
<div class="line"> separator(),</div>
<div class="line"> <span class="comment">// -------- Bottom panel --------------</span></div>
<div class="line"> vbox({</div>
<div class="line"> hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot; gauge : &quot;</span>),</div>
<div class="line"> gauge(sum / 100.0),</div>
<div class="line"> }),</div>
<div class="line"> hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot; text : &quot;</span>),</div>
<div class="line"> text(std::to_string(sum) + <span class="stringliteral">&quot; %&quot;</span>),</div>
<div class="line"> }),</div>
<div class="line"> }),</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> screen.Loop(renderer);</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="menu_entries"></a>
menu_entries</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/menu_entries">Demo</a> </p><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">#include &lt;functional&gt;</span> <span class="comment">// for function</span></div>
<div class="line"><span class="preprocessor">#include &lt;iostream&gt;</span> <span class="comment">// for basic_ostream::operator&lt;&lt;, operator&lt;&lt;, endl, basic_ostream, basic_ostream&lt;&gt;::__ostream_type, cout, ostream</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for allocator, shared_ptr, __shared_ptr_access</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for char_traits, to_string, operator+, string, basic_string</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for MenuEntry, Renderer, Vertical</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__options_8hpp.html">ftxui/component/component_options.hpp</a>&quot;</span> <span class="comment">// for MenuEntryOption</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for operator|, Element, separator, text, hbox, size, frame, color, vbox, HEIGHT, LESS_THAN, bold, border, inverted</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="color_8hpp.html">ftxui/screen/color.hpp</a>&quot;</span> <span class="comment">// for Color, Color::Blue, Color::Cyan, Color::Green, Color::Red, Color::Yellow</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><span class="comment">// Define a special style for some menu entry.</span></div>
<div class="line"><a class="code hl_struct" href="group__component.html#structftxui_1_1MenuEntryOption">MenuEntryOption</a> <a class="code hl_function" href="menu__entries_8cpp.html#a12f3ca405f8238e1d03dff81d4cf6997">Colored</a>(<a class="code hl_class" href="group__screen.html#classftxui_1_1Color">ftxui::Color</a> c) {</div>
<div class="line"> <a class="code hl_struct" href="group__component.html#structftxui_1_1MenuEntryOption">MenuEntryOption</a> option;</div>
<div class="line"> option.<a class="code hl_variable" href="group__component.html#a5641c45021a8cc20bdd21498563825a0">transform</a> = [c](<a class="code hl_struct" href="structftxui_1_1EntryState.html">EntryState</a> state) {</div>
<div class="line"> state.label = (state.active ? <span class="stringliteral">&quot;&gt; &quot;</span> : <span class="stringliteral">&quot; &quot;</span>) + state.label;</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> e = text(state.label) | color(c);</div>
<div class="line"> <span class="keywordflow">if</span> (state.focused) {</div>
<div class="line"> e = e | inverted;</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">if</span> (state.active) {</div>
<div class="line"> e = e | bold;</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> e;</div>
<div class="line"> };</div>
<div class="line"> <span class="keywordflow">return</span> option;</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::TerminalOutput();</div>
<div class="line"> </div>
<div class="line"> <span class="keywordtype">int</span> selected = 0;</div>
<div class="line"> <span class="keyword">auto</span> menu = Container::Vertical(</div>
<div class="line"> {</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot; 1. improve&quot;</span>),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot; 2. tolerant&quot;</span>),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot; 3. career&quot;</span>),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot; 4. cast&quot;</span>),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot; 5. question&quot;</span>),</div>
<div class="line"> </div>
<div class="line"> Renderer([] { <span class="keywordflow">return</span> separator(); }),</div>
<div class="line"> </div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot; 6. rear&quot;</span>, <a class="code hl_function" href="menu__entries_8cpp.html#a12f3ca405f8238e1d03dff81d4cf6997">Colored</a>(Color::Red)),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot; 7. drown&quot;</span>, <a class="code hl_function" href="menu__entries_8cpp.html#a12f3ca405f8238e1d03dff81d4cf6997">Colored</a>(Color::Yellow)),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot; 8. nail&quot;</span>, <a class="code hl_function" href="menu__entries_8cpp.html#a12f3ca405f8238e1d03dff81d4cf6997">Colored</a>(Color::Green)),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot; 9. quit&quot;</span>, <a class="code hl_function" href="menu__entries_8cpp.html#a12f3ca405f8238e1d03dff81d4cf6997">Colored</a>(Color::Cyan)),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot;10. decorative&quot;</span>, <a class="code hl_function" href="menu__entries_8cpp.html#a12f3ca405f8238e1d03dff81d4cf6997">Colored</a>(Color::Blue)),</div>
<div class="line"> </div>
<div class="line"> Renderer([] { <span class="keywordflow">return</span> separator(); }),</div>
<div class="line"> </div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot;11. costume&quot;</span>),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot;12. pick&quot;</span>),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot;13. oral&quot;</span>),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot;14. minister&quot;</span>),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot;15. football&quot;</span>),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot;16. welcome&quot;</span>),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot;17. copper&quot;</span>),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot;18. inhabitant&quot;</span>),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot;19. fortune&quot;</span>),</div>
<div class="line"> },</div>
<div class="line"> &amp;selected);</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// Display together the menu with a border</span></div>
<div class="line"> <span class="keyword">auto</span> renderer = Renderer(menu, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> hbox(text(<span class="stringliteral">&quot;selected = &quot;</span>), text(std::to_string(selected))),</div>
<div class="line"> separator(),</div>
<div class="line"> menu-&gt;Render() | frame | size(HEIGHT, LESS_THAN, 10),</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> screen.Loop(renderer);</div>
<div class="line"> </div>
<div class="line"> std::cout &lt;&lt; <span class="stringliteral">&quot;Selected element = &quot;</span> &lt;&lt; selected &lt;&lt; std::endl;</div>
<div class="line">}</div>
<div class="ttc" id="agroup__component_html_a5641c45021a8cc20bdd21498563825a0"><div class="ttname"><a href="group__component.html#a5641c45021a8cc20bdd21498563825a0">ftxui::MenuEntryOption::transform</a></div><div class="ttdeci">std::function&lt; Element(const EntryState &amp;state)&gt; transform</div><div class="ttdef"><b>Definition</b> <a href="component__options_8hpp_source.html#l00081">component_options.hpp:81</a></div></div>
<div class="ttc" id="agroup__component_html_structftxui_1_1MenuEntryOption"><div class="ttname"><a href="group__component.html#structftxui_1_1MenuEntryOption">ftxui::MenuEntryOption</a></div><div class="ttdoc">Option for the MenuEntry component.</div><div class="ttdef"><b>Definition</b> <a href="component__options_8hpp_source.html#l00079">component_options.hpp:79</a></div></div>
<div class="ttc" id="amenu__entries_8cpp_html_a12f3ca405f8238e1d03dff81d4cf6997"><div class="ttname"><a href="menu__entries_8cpp.html#a12f3ca405f8238e1d03dff81d4cf6997">Colored</a></div><div class="ttdeci">MenuEntryOption Colored(ftxui::Color c)</div><div class="ttdef"><b>Definition</b> <a href="menu__entries_8cpp_source.html#l00020">menu_entries.cpp:20</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="menu_entries_animated"></a>
menu_entries_animated</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/menu_entries_animated">Demo</a> </p><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">#include &lt;iostream&gt;</span> <span class="comment">// for basic_ostream::operator&lt;&lt;, operator&lt;&lt;, endl, basic_ostream, basic_ostream&lt;&gt;::__ostream_type, cout, ostream</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for shared_ptr, __shared_ptr_access</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for to_string, allocator</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for MenuEntryAnimated, Renderer, Vertical</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__options_8hpp.html">ftxui/component/component_options.hpp</a>&quot;</span> <span class="comment">// for MenuEntryAnimated</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for operator|, separator, Element, Decorator, color, text, hbox, size, bold, frame, inverted, vbox, HEIGHT, LESS_THAN, border</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="color_8hpp.html">ftxui/screen/color.hpp</a>&quot;</span> <span class="comment">// for Color, Color::Blue, Color::Cyan, Color::Green, Color::Red, Color::Yellow</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><span class="comment">// Define a special style for some menu entry.</span></div>
<div class="line"><a class="code hl_struct" href="group__component.html#structftxui_1_1MenuEntryOption">MenuEntryOption</a> <a class="code hl_function" href="menu__entries_8cpp.html#a12f3ca405f8238e1d03dff81d4cf6997">Colored</a>(<a class="code hl_class" href="group__screen.html#classftxui_1_1Color">ftxui::Color</a> c) {</div>
<div class="line"> <a class="code hl_struct" href="group__component.html#structftxui_1_1MenuEntryOption">MenuEntryOption</a> option;</div>
<div class="line"> option.<a class="code hl_variable" href="group__component.html#ab7131557fbe84a6b4b2f2ffcff7d44f0">animated_colors</a>.<a class="code hl_variable" href="structftxui_1_1AnimatedColorsOption.html#a1acdd8b06eb18ae37ffb815462c4374a">foreground</a>.<a class="code hl_variable" href="group__component.html#a8740ba80e30dd75e71d09fa1dcf04f3d">enabled</a> = <span class="keyword">true</span>;</div>
<div class="line"> option.<a class="code hl_variable" href="group__component.html#ab7131557fbe84a6b4b2f2ffcff7d44f0">animated_colors</a>.<a class="code hl_variable" href="structftxui_1_1AnimatedColorsOption.html#a550692ff465684652d29385a6b24304d">background</a>.<a class="code hl_variable" href="group__component.html#a8740ba80e30dd75e71d09fa1dcf04f3d">enabled</a> = <span class="keyword">true</span>;</div>
<div class="line"> option.<a class="code hl_variable" href="group__component.html#ab7131557fbe84a6b4b2f2ffcff7d44f0">animated_colors</a>.<a class="code hl_variable" href="structftxui_1_1AnimatedColorsOption.html#a550692ff465684652d29385a6b24304d">background</a>.<a class="code hl_variable" href="group__component.html#a5c04e41d802330270ae14a9861c1e2df">active</a> = c;</div>
<div class="line"> option.<a class="code hl_variable" href="group__component.html#ab7131557fbe84a6b4b2f2ffcff7d44f0">animated_colors</a>.<a class="code hl_variable" href="structftxui_1_1AnimatedColorsOption.html#a550692ff465684652d29385a6b24304d">background</a>.<a class="code hl_variable" href="group__component.html#a898e4eb6c2a93ea3b71fc373f39854eb">inactive</a> = Color::Black;</div>
<div class="line"> option.<a class="code hl_variable" href="group__component.html#ab7131557fbe84a6b4b2f2ffcff7d44f0">animated_colors</a>.<a class="code hl_variable" href="structftxui_1_1AnimatedColorsOption.html#a1acdd8b06eb18ae37ffb815462c4374a">foreground</a>.<a class="code hl_variable" href="group__component.html#a5c04e41d802330270ae14a9861c1e2df">active</a> = Color::White;</div>
<div class="line"> option.<a class="code hl_variable" href="group__component.html#ab7131557fbe84a6b4b2f2ffcff7d44f0">animated_colors</a>.<a class="code hl_variable" href="structftxui_1_1AnimatedColorsOption.html#a1acdd8b06eb18ae37ffb815462c4374a">foreground</a>.<a class="code hl_variable" href="group__component.html#a898e4eb6c2a93ea3b71fc373f39854eb">inactive</a> = c;</div>
<div class="line"> <span class="keywordflow">return</span> option;</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::TerminalOutput();</div>
<div class="line"> </div>
<div class="line"> <span class="keywordtype">int</span> selected = 0;</div>
<div class="line"> <span class="keyword">auto</span> menu = Container::Vertical(</div>
<div class="line"> {</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot; 1. rear&quot;</span>, <a class="code hl_function" href="menu__entries_8cpp.html#a12f3ca405f8238e1d03dff81d4cf6997">Colored</a>(Color::Red)),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot; 2. drown&quot;</span>, <a class="code hl_function" href="menu__entries_8cpp.html#a12f3ca405f8238e1d03dff81d4cf6997">Colored</a>(Color::Yellow)),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot; 3. nail&quot;</span>, <a class="code hl_function" href="menu__entries_8cpp.html#a12f3ca405f8238e1d03dff81d4cf6997">Colored</a>(Color::Green)),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot; 4. quit&quot;</span>, <a class="code hl_function" href="menu__entries_8cpp.html#a12f3ca405f8238e1d03dff81d4cf6997">Colored</a>(Color::Cyan)),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot; 5. decorative&quot;</span>, <a class="code hl_function" href="menu__entries_8cpp.html#a12f3ca405f8238e1d03dff81d4cf6997">Colored</a>(Color::Blue)),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot; 7. costume&quot;</span>),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot; 8. pick&quot;</span>),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot; 9. oral&quot;</span>),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot;11. minister&quot;</span>),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot;12. football&quot;</span>),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot;13. welcome&quot;</span>),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot;14. copper&quot;</span>),</div>
<div class="line"> MenuEntry(<span class="stringliteral">&quot;15. inhabitant&quot;</span>),</div>
<div class="line"> },</div>
<div class="line"> &amp;selected);</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// Display together the menu with a border</span></div>
<div class="line"> <span class="keyword">auto</span> renderer = Renderer(menu, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> hbox(text(<span class="stringliteral">&quot;selected = &quot;</span>), text(std::to_string(selected))),</div>
<div class="line"> separator(),</div>
<div class="line"> menu-&gt;Render() | frame,</div>
<div class="line"> }) |</div>
<div class="line"> border | bgcolor(Color::Black);</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> screen.Loop(renderer);</div>
<div class="line"> </div>
<div class="line"> std::cout &lt;&lt; <span class="stringliteral">&quot;Selected element = &quot;</span> &lt;&lt; selected &lt;&lt; std::endl;</div>
<div class="line">}</div>
<div class="ttc" id="agroup__component_html_a5c04e41d802330270ae14a9861c1e2df"><div class="ttname"><a href="group__component.html#a5c04e41d802330270ae14a9861c1e2df">ftxui::AnimatedColorOption::active</a></div><div class="ttdeci">Color active</div><div class="ttdef"><b>Definition</b> <a href="component__options_8hpp_source.html#l00067">component_options.hpp:67</a></div></div>
<div class="ttc" id="agroup__component_html_a8740ba80e30dd75e71d09fa1dcf04f3d"><div class="ttname"><a href="group__component.html#a8740ba80e30dd75e71d09fa1dcf04f3d">ftxui::AnimatedColorOption::enabled</a></div><div class="ttdeci">bool enabled</div><div class="ttdef"><b>Definition</b> <a href="component__options_8hpp_source.html#l00065">component_options.hpp:65</a></div></div>
<div class="ttc" id="agroup__component_html_a898e4eb6c2a93ea3b71fc373f39854eb"><div class="ttname"><a href="group__component.html#a898e4eb6c2a93ea3b71fc373f39854eb">ftxui::AnimatedColorOption::inactive</a></div><div class="ttdeci">Color inactive</div><div class="ttdef"><b>Definition</b> <a href="component__options_8hpp_source.html#l00066">component_options.hpp:66</a></div></div>
<div class="ttc" id="agroup__component_html_ab7131557fbe84a6b4b2f2ffcff7d44f0"><div class="ttname"><a href="group__component.html#ab7131557fbe84a6b4b2f2ffcff7d44f0">ftxui::MenuEntryOption::animated_colors</a></div><div class="ttdeci">AnimatedColorsOption animated_colors</div><div class="ttdef"><b>Definition</b> <a href="component__options_8hpp_source.html#l00082">component_options.hpp:82</a></div></div>
<div class="ttc" id="astructftxui_1_1AnimatedColorsOption_html_a1acdd8b06eb18ae37ffb815462c4374a"><div class="ttname"><a href="structftxui_1_1AnimatedColorsOption.html#a1acdd8b06eb18ae37ffb815462c4374a">ftxui::AnimatedColorsOption::foreground</a></div><div class="ttdeci">AnimatedColorOption foreground</div><div class="ttdef"><b>Definition</b> <a href="component__options_8hpp_source.html#l00074">component_options.hpp:74</a></div></div>
<div class="ttc" id="astructftxui_1_1AnimatedColorsOption_html_a550692ff465684652d29385a6b24304d"><div class="ttname"><a href="structftxui_1_1AnimatedColorsOption.html#a550692ff465684652d29385a6b24304d">ftxui::AnimatedColorsOption::background</a></div><div class="ttdeci">AnimatedColorOption background</div><div class="ttdef"><b>Definition</b> <a href="component__options_8hpp_source.html#l00073">component_options.hpp:73</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="menu_in_frame"></a>
menu_in_frame</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/menu_in_frame">Demo</a> </p><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">#include &lt;memory&gt;</span> <span class="comment">// for shared_ptr, __shared_ptr_access</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for string, basic_string, operator+, to_string</span></div>
<div class="line"><span class="preprocessor">#include &lt;vector&gt;</span> <span class="comment">// for vector</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Radiobox, Renderer</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for operator|, Element, size, border, frame, HEIGHT, LESS_THAN</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> std::vector&lt;std::string&gt; entries;</div>
<div class="line"> <span class="keywordtype">int</span> selected = 0;</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> i = 0; i &lt; 30; ++i) {</div>
<div class="line"> entries.push_back(<span class="stringliteral">&quot;Entry &quot;</span> + std::to_string(i));</div>
<div class="line"> }</div>
<div class="line"> <span class="keyword">auto</span> radiobox = Menu(&amp;entries, &amp;selected);</div>
<div class="line"> <span class="keyword">auto</span> renderer = Renderer(radiobox, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> radiobox-&gt;Render() | vscroll_indicator | frame |</div>
<div class="line"> size(HEIGHT, LESS_THAN, 10) | border;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::FitComponent();</div>
<div class="line"> screen.Loop(renderer);</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> 0;</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="menu_in_frame_horizontal"></a>
menu_in_frame_horizontal</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/menu_in_frame_horizontal">Demo</a> </p><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">#include &lt;memory&gt;</span> <span class="comment">// for shared_ptr, __shared_ptr_access</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for string, basic_string, operator+, to_string</span></div>
<div class="line"><span class="preprocessor">#include &lt;vector&gt;</span> <span class="comment">// for vector</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Radiobox, Renderer</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for operator|, Element, size, border, frame, HEIGHT, LESS_THAN</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> std::vector&lt;std::string&gt; entries;</div>
<div class="line"> <span class="keywordtype">int</span> selected = 0;</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> i = 0; i &lt; 100; ++i) {</div>
<div class="line"> entries.push_back(std::to_string(i));</div>
<div class="line"> }</div>
<div class="line"> <span class="keyword">auto</span> radiobox = Menu(&amp;entries, &amp;selected, MenuOption::Horizontal());</div>
<div class="line"> <span class="keyword">auto</span> renderer = Renderer(</div>
<div class="line"> radiobox, [&amp;] { <span class="keywordflow">return</span> radiobox-&gt;Render() | hscroll_indicator | frame; });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::FitComponent();</div>
<div class="line"> screen.Loop(renderer);</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> 0;</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="menu_multiple"></a>
menu_multiple</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/menu_multiple">Demo</a> </p><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">#include &lt;stdlib.h&gt;</span> <span class="comment">// for EXIT_SUCCESS</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for allocator, __shared_ptr_access</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for string, operator+, basic_string, to_string, char_traits</span></div>
<div class="line"><span class="preprocessor">#include &lt;vector&gt;</span> <span class="comment">// for vector, __alloc_traits&lt;&gt;::value_type</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Menu, Renderer, Horizontal, Vertical</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for Component, ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for text, Element, operator|, window, flex, vbox</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__multiple_8cpp.html#ac2013764d7f0c7eb57876c3755e98bb3">Window</a>(std::string title, <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> component) {</div>
<div class="line"> <span class="keywordflow">return</span> Renderer(component, [component, title] { <span class="comment">//</span></div>
<div class="line"> <span class="keywordflow">return</span> window(text(title), component-&gt;Render()) | flex;</div>
<div class="line"> });</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keywordtype">int</span> menu_selected[] = {0, 0, 0};</div>
<div class="line"> std::vector&lt;std::vector&lt;std::string&gt;&gt; menu_entries = {</div>
<div class="line"> {</div>
<div class="line"> <span class="stringliteral">&quot;Ananas&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Raspberry&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Citrus&quot;</span>,</div>
<div class="line"> },</div>
<div class="line"> {</div>
<div class="line"> <span class="stringliteral">&quot;Potatoes&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Weat&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Rise&quot;</span>,</div>
<div class="line"> },</div>
<div class="line"> {</div>
<div class="line"> <span class="stringliteral">&quot;Carrot&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Lettuce&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Tomato&quot;</span>,</div>
<div class="line"> },</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <span class="keywordtype">int</span> menu_selected_global = 0;</div>
<div class="line"> <span class="keyword">auto</span> menu_global = Container::Vertical(</div>
<div class="line"> {</div>
<div class="line"> <a class="code hl_function" href="menu__multiple_8cpp.html#ac2013764d7f0c7eb57876c3755e98bb3">Window</a>(<span class="stringliteral">&quot;Menu 1&quot;</span>, Menu(&amp;menu_entries[0], &amp;menu_selected[0])),</div>
<div class="line"> <a class="code hl_function" href="menu__multiple_8cpp.html#ac2013764d7f0c7eb57876c3755e98bb3">Window</a>(<span class="stringliteral">&quot;Menu 2&quot;</span>, Menu(&amp;menu_entries[1], &amp;menu_selected[1])),</div>
<div class="line"> <a class="code hl_function" href="menu__multiple_8cpp.html#ac2013764d7f0c7eb57876c3755e98bb3">Window</a>(<span class="stringliteral">&quot;Menu 3&quot;</span>, Menu(&amp;menu_entries[2], &amp;menu_selected[2])),</div>
<div class="line"> },</div>
<div class="line"> &amp;menu_selected_global);</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> info = Renderer([&amp;] {</div>
<div class="line"> <span class="keywordtype">int</span> g = menu_selected_global;</div>
<div class="line"> std::string value = menu_entries[g][menu_selected[g]];</div>
<div class="line"> <span class="keywordflow">return</span> window(text(<span class="stringliteral">&quot;Content&quot;</span>), <span class="comment">//</span></div>
<div class="line"> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;menu_selected_global = &quot;</span> + std::to_string(g)),</div>
<div class="line"> text(<span class="stringliteral">&quot;menu_selected[0] = &quot;</span> +</div>
<div class="line"> std::to_string(menu_selected[0])),</div>
<div class="line"> text(<span class="stringliteral">&quot;menu_selected[1] = &quot;</span> +</div>
<div class="line"> std::to_string(menu_selected[1])),</div>
<div class="line"> text(<span class="stringliteral">&quot;menu_selected[2] = &quot;</span> +</div>
<div class="line"> std::to_string(menu_selected[2])),</div>
<div class="line"> text(<span class="stringliteral">&quot;Value = &quot;</span> + value),</div>
<div class="line"> })) |</div>
<div class="line"> flex;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> global = Container::Horizontal({</div>
<div class="line"> menu_global,</div>
<div class="line"> info,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::TerminalOutput();</div>
<div class="line"> screen.Loop(global);</div>
<div class="line"> <span class="keywordflow">return</span> EXIT_SUCCESS;</div>
<div class="line">}</div>
<div class="ttc" id="amenu__multiple_8cpp_html_ac2013764d7f0c7eb57876c3755e98bb3"><div class="ttname"><a href="menu__multiple_8cpp.html#ac2013764d7f0c7eb57876c3755e98bb3">Window</a></div><div class="ttdeci">Component Window(std::string title, Component component)</div><div class="ttdef"><b>Definition</b> <a href="menu__multiple_8cpp_source.html#l00017">menu_multiple.cpp:17</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="menu_style"></a>
menu_style</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/menu_style">Demo</a> </p><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">#include &lt;array&gt;</span> <span class="comment">// for array</span></div>
<div class="line"><span class="preprocessor">#include &lt;chrono&gt;</span> <span class="comment">// for milliseconds</span></div>
<div class="line"><span class="preprocessor">#include &lt;functional&gt;</span> <span class="comment">// for function</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for __shared_ptr_access, shared_ptr, allocator</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for string, char_traits, operator+, basic_string</span></div>
<div class="line"><span class="preprocessor">#include &lt;vector&gt;</span> <span class="comment">// for vector</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="animation_8hpp.html">ftxui/component/animation.hpp</a>&quot;</span> <span class="comment">// for ElasticOut, Linear</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Menu, Horizontal, Renderer, Vertical</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__options_8hpp.html">ftxui/component/component_options.hpp</a>&quot;</span> <span class="comment">// for MenuOption, EntryState, MenuEntryOption, AnimatedColorOption, AnimatedColorsOption, UnderlineOption</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="mouse_8hpp.html">ftxui/component/mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for Component, ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for separator, operator|, Element, text, bgcolor, hbox, bold, color, filler, border, vbox, borderDouble, dim, flex, hcenter</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="color_8hpp.html">ftxui/screen/color.hpp</a>&quot;</span> <span class="comment">// for Color, Color::Red, Color::Black, Color::Yellow, Color::Blue, Color::Default, Color::White</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__style_8cpp.html#abc833415e917ac2a93b5a4f35df2f0fb">VMenu1</a>(std::vector&lt;std::string&gt;* entries, <span class="keywordtype">int</span>* selected);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__style_8cpp.html#ab1c7204fedc90016a50553cdcdc9b58b">VMenu2</a>(std::vector&lt;std::string&gt;* entries, <span class="keywordtype">int</span>* selected);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__style_8cpp.html#aec99d3a88e71643df15281e0041e44a2">VMenu3</a>(std::vector&lt;std::string&gt;* entries, <span class="keywordtype">int</span>* selected);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__style_8cpp.html#afc540158e9fcd015af9e24d4ef072214">VMenu4</a>(std::vector&lt;std::string&gt;* entries, <span class="keywordtype">int</span>* selected);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__style_8cpp.html#a62669e7b3cf3a388a714910a16cce19b">VMenu5</a>(std::vector&lt;std::string&gt;* entries, <span class="keywordtype">int</span>* selected);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__style_8cpp.html#aeeb06101b3a771616149626f203be146">VMenu6</a>(std::vector&lt;std::string&gt;* entries, <span class="keywordtype">int</span>* selected);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__style_8cpp.html#af07f6b560af2a9d723b3e53360d280b5">VMenu7</a>(std::vector&lt;std::string&gt;* entries, <span class="keywordtype">int</span>* selected);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__style_8cpp.html#afade922e195c0cda670066485469de56">VMenu8</a>(std::vector&lt;std::string&gt;* entries, <span class="keywordtype">int</span>* selected);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__style_8cpp.html#a909976f4b60ea372663d733e16011767">HMenu1</a>(std::vector&lt;std::string&gt;* entries, <span class="keywordtype">int</span>* selected);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__style_8cpp.html#a9ec2a6df3ad7dd845b4d4ab507d9d5fe">HMenu2</a>(std::vector&lt;std::string&gt;* entries, <span class="keywordtype">int</span>* selected);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__style_8cpp.html#ab5a58c425dbca17b57cfcbf4b8c98e2e">HMenu3</a>(std::vector&lt;std::string&gt;* entries, <span class="keywordtype">int</span>* selected);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__style_8cpp.html#a1aead66022c928952b560ebab9913346">HMenu4</a>(std::vector&lt;std::string&gt;* entries, <span class="keywordtype">int</span>* selected);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__style_8cpp.html#a16cc679d7e91d82d484eff7e443539cb">HMenu5</a>(std::vector&lt;std::string&gt;* entries, <span class="keywordtype">int</span>* selected);</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::TerminalOutput();</div>
<div class="line"> </div>
<div class="line"> std::vector&lt;std::string&gt; entries{</div>
<div class="line"> <span class="stringliteral">&quot;Monkey&quot;</span>, <span class="stringliteral">&quot;Dog&quot;</span>, <span class="stringliteral">&quot;Cat&quot;</span>, <span class="stringliteral">&quot;Bird&quot;</span>, <span class="stringliteral">&quot;Elephant&quot;</span>, <span class="stringliteral">&quot;Cat&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> std::array&lt;int, 12&gt; selected = {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0};</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> vmenu_1_ = <a class="code hl_function" href="menu__style_8cpp.html#abc833415e917ac2a93b5a4f35df2f0fb">VMenu1</a>(&amp;entries, &amp;selected[0]);</div>
<div class="line"> <span class="keyword">auto</span> vmenu_2_ = <a class="code hl_function" href="menu__style_8cpp.html#ab1c7204fedc90016a50553cdcdc9b58b">VMenu2</a>(&amp;entries, &amp;selected[1]);</div>
<div class="line"> <span class="keyword">auto</span> vmenu_3_ = <a class="code hl_function" href="menu__style_8cpp.html#aec99d3a88e71643df15281e0041e44a2">VMenu3</a>(&amp;entries, &amp;selected[2]);</div>
<div class="line"> <span class="keyword">auto</span> vmenu_4_ = <a class="code hl_function" href="menu__style_8cpp.html#afc540158e9fcd015af9e24d4ef072214">VMenu4</a>(&amp;entries, &amp;selected[3]);</div>
<div class="line"> <span class="keyword">auto</span> vmenu_5_ = <a class="code hl_function" href="menu__style_8cpp.html#a62669e7b3cf3a388a714910a16cce19b">VMenu5</a>(&amp;entries, &amp;selected[4]);</div>
<div class="line"> <span class="keyword">auto</span> vmenu_6_ = <a class="code hl_function" href="menu__style_8cpp.html#aeeb06101b3a771616149626f203be146">VMenu6</a>(&amp;entries, &amp;selected[5]);</div>
<div class="line"> <span class="keyword">auto</span> vmenu_7_ = <a class="code hl_function" href="menu__style_8cpp.html#af07f6b560af2a9d723b3e53360d280b5">VMenu7</a>(&amp;entries, &amp;selected[6]);</div>
<div class="line"> <span class="keyword">auto</span> vmenu_8_ = <a class="code hl_function" href="menu__style_8cpp.html#afade922e195c0cda670066485469de56">VMenu8</a>(&amp;entries, &amp;selected[7]);</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> hmenu_1_ = <a class="code hl_function" href="menu__style_8cpp.html#a909976f4b60ea372663d733e16011767">HMenu1</a>(&amp;entries, &amp;selected[8]);</div>
<div class="line"> <span class="keyword">auto</span> hmenu_2_ = <a class="code hl_function" href="menu__style_8cpp.html#a9ec2a6df3ad7dd845b4d4ab507d9d5fe">HMenu2</a>(&amp;entries, &amp;selected[9]);</div>
<div class="line"> <span class="keyword">auto</span> hmenu_3_ = <a class="code hl_function" href="menu__style_8cpp.html#ab5a58c425dbca17b57cfcbf4b8c98e2e">HMenu3</a>(&amp;entries, &amp;selected[10]);</div>
<div class="line"> <span class="keyword">auto</span> hmenu_4_ = <a class="code hl_function" href="menu__style_8cpp.html#a1aead66022c928952b560ebab9913346">HMenu4</a>(&amp;entries, &amp;selected[11]);</div>
<div class="line"> <span class="keyword">auto</span> hmenu_5_ = <a class="code hl_function" href="menu__style_8cpp.html#a16cc679d7e91d82d484eff7e443539cb">HMenu5</a>(&amp;entries, &amp;selected[12]);</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> container = Container::Vertical({</div>
<div class="line"> Container::Horizontal({</div>
<div class="line"> vmenu_1_,</div>
<div class="line"> vmenu_2_,</div>
<div class="line"> vmenu_3_,</div>
<div class="line"> vmenu_4_,</div>
<div class="line"> vmenu_5_,</div>
<div class="line"> vmenu_6_,</div>
<div class="line"> vmenu_7_,</div>
<div class="line"> vmenu_8_,</div>
<div class="line"> }),</div>
<div class="line"> hmenu_1_,</div>
<div class="line"> hmenu_2_,</div>
<div class="line"> hmenu_3_,</div>
<div class="line"> hmenu_4_,</div>
<div class="line"> hmenu_5_,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> renderer = Renderer(container, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> <span class="comment">//</span></div>
<div class="line"> hbox({</div>
<div class="line"> vbox({</div>
<div class="line"> hbox({</div>
<div class="line"> vmenu_1_-&gt;Render(),</div>
<div class="line"> separator(),</div>
<div class="line"> vmenu_2_-&gt;Render(),</div>
<div class="line"> separator(),</div>
<div class="line"> vmenu_3_-&gt;Render(),</div>
<div class="line"> separator(),</div>
<div class="line"> vmenu_4_-&gt;Render(),</div>
<div class="line"> separator(),</div>
<div class="line"> vmenu_5_-&gt;Render(),</div>
<div class="line"> vmenu_6_-&gt;Render(),</div>
<div class="line"> separator(),</div>
<div class="line"> vmenu_7_-&gt;Render(),</div>
<div class="line"> separator(),</div>
<div class="line"> vmenu_8_-&gt;Render(),</div>
<div class="line"> }),</div>
<div class="line"> separator(),</div>
<div class="line"> hmenu_1_-&gt;Render(),</div>
<div class="line"> separator(),</div>
<div class="line"> hmenu_2_-&gt;Render(),</div>
<div class="line"> separator(),</div>
<div class="line"> hmenu_3_-&gt;Render(),</div>
<div class="line"> separator(),</div>
<div class="line"> hmenu_4_-&gt;Render(),</div>
<div class="line"> hmenu_5_-&gt;Render(),</div>
<div class="line"> }) | border,</div>
<div class="line"> filler(),</div>
<div class="line"> });</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> screen.Loop(renderer);</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__style_8cpp.html#abc833415e917ac2a93b5a4f35df2f0fb">VMenu1</a>(std::vector&lt;std::string&gt;* entries, <span class="keywordtype">int</span>* selected) {</div>
<div class="line"> <span class="keyword">auto</span> option = MenuOption::Vertical();</div>
<div class="line"> option.entries_option.<a class="code hl_variable" href="group__component.html#a5641c45021a8cc20bdd21498563825a0">transform</a> = [](<a class="code hl_struct" href="structftxui_1_1EntryState.html">EntryState</a> state) {</div>
<div class="line"> state.label = (state.active ? <span class="stringliteral">&quot;&gt; &quot;</span> : <span class="stringliteral">&quot; &quot;</span>) + state.label;</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> e = text(state.label);</div>
<div class="line"> <span class="keywordflow">if</span> (state.focused) {</div>
<div class="line"> e = e | bgcolor(Color::Blue);</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">if</span> (state.active) {</div>
<div class="line"> e = e | bold;</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> e;</div>
<div class="line"> };</div>
<div class="line"> <span class="keywordflow">return</span> Menu(entries, selected, option);</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__style_8cpp.html#ab1c7204fedc90016a50553cdcdc9b58b">VMenu2</a>(std::vector&lt;std::string&gt;* entries, <span class="keywordtype">int</span>* selected) {</div>
<div class="line"> <span class="keyword">auto</span> option = MenuOption::Vertical();</div>
<div class="line"> option.entries_option.<a class="code hl_variable" href="group__component.html#a5641c45021a8cc20bdd21498563825a0">transform</a> = [](<a class="code hl_struct" href="structftxui_1_1EntryState.html">EntryState</a> state) {</div>
<div class="line"> state.label += (state.active ? <span class="stringliteral">&quot; &lt;&quot;</span> : <span class="stringliteral">&quot; &quot;</span>);</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> e = hbox(filler(), text(state.label));</div>
<div class="line"> <span class="keywordflow">if</span> (state.focused) {</div>
<div class="line"> e = e | bgcolor(Color::Red);</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">if</span> (state.active) {</div>
<div class="line"> e = e | bold;</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> e;</div>
<div class="line"> };</div>
<div class="line"> <span class="keywordflow">return</span> Menu(entries, selected, option);</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__style_8cpp.html#aec99d3a88e71643df15281e0041e44a2">VMenu3</a>(std::vector&lt;std::string&gt;* entries, <span class="keywordtype">int</span>* selected) {</div>
<div class="line"> <span class="keyword">auto</span> option = MenuOption::Vertical();</div>
<div class="line"> option.entries_option.<a class="code hl_variable" href="group__component.html#a5641c45021a8cc20bdd21498563825a0">transform</a> = [](<a class="code hl_struct" href="structftxui_1_1EntryState.html">EntryState</a> state) {</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> e = state.active ? text(<span class="stringliteral">&quot;[&quot;</span> + state.label + <span class="stringliteral">&quot;]&quot;</span>)</div>
<div class="line"> : text(<span class="stringliteral">&quot; &quot;</span> + state.label + <span class="stringliteral">&quot; &quot;</span>);</div>
<div class="line"> <span class="keywordflow">if</span> (state.focused) {</div>
<div class="line"> e = e | bold;</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> if (state.focused) {</div>
<div class="line"> e = e | color(Color::Blue);</div>
<div class="line"> }</div>
<div class="line"> if (state.active) {</div>
<div class="line"> e = e | bold;</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> e;</div>
<div class="line"> };</div>
<div class="line"> <span class="keywordflow">return</span> Menu(entries, selected, option);</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__style_8cpp.html#afc540158e9fcd015af9e24d4ef072214">VMenu4</a>(std::vector&lt;std::string&gt;* entries, <span class="keywordtype">int</span>* selected) {</div>
<div class="line"> <span class="keyword">auto</span> option = MenuOption::Vertical();</div>
<div class="line"> option.entries_option.<a class="code hl_variable" href="group__component.html#a5641c45021a8cc20bdd21498563825a0">transform</a> = [](<a class="code hl_struct" href="structftxui_1_1EntryState.html">EntryState</a> state) {</div>
<div class="line"> <span class="keywordflow">if</span> (state.active &amp;&amp; state.focused) {</div>
<div class="line"> <span class="keywordflow">return</span> text(state.label) | color(Color::Yellow) | bgcolor(Color::Black) |</div>
<div class="line"> bold;</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">if</span> (state.active) {</div>
<div class="line"> <span class="keywordflow">return</span> text(state.label) | color(Color::Yellow) | bgcolor(Color::Black);</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">if</span> (state.focused) {</div>
<div class="line"> <span class="keywordflow">return</span> text(state.label) | color(Color::Black) | bgcolor(Color::Yellow) |</div>
<div class="line"> bold;</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> text(state.label) | color(Color::Black) | bgcolor(Color::Yellow);</div>
<div class="line"> };</div>
<div class="line"> <span class="keywordflow">return</span> Menu(entries, selected, option);</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__style_8cpp.html#a62669e7b3cf3a388a714910a16cce19b">VMenu5</a>(std::vector&lt;std::string&gt;* entries, <span class="keywordtype">int</span>* selected) {</div>
<div class="line"> <span class="keyword">auto</span> option = MenuOption::Vertical();</div>
<div class="line"> option.entries_option.<a class="code hl_variable" href="group__component.html#a5641c45021a8cc20bdd21498563825a0">transform</a> = [](<a class="code hl_struct" href="structftxui_1_1EntryState.html">EntryState</a> state) {</div>
<div class="line"> <span class="keyword">auto</span> element = text(state.label);</div>
<div class="line"> <span class="keywordflow">if</span> (state.active &amp;&amp; state.focused) {</div>
<div class="line"> <span class="keywordflow">return</span> element | borderDouble;</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">if</span> (state.active) {</div>
<div class="line"> <span class="keywordflow">return</span> element | border;</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">if</span> (state.focused) {</div>
<div class="line"> <span class="keywordflow">return</span> element | bold;</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> element;</div>
<div class="line"> };</div>
<div class="line"> <span class="keywordflow">return</span> Menu(entries, selected, option);</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__style_8cpp.html#aeeb06101b3a771616149626f203be146">VMenu6</a>(std::vector&lt;std::string&gt;* entries, <span class="keywordtype">int</span>* selected) {</div>
<div class="line"> <span class="keyword">auto</span> option = MenuOption::VerticalAnimated();</div>
<div class="line"> option.underline.color_inactive = Color::Default;</div>
<div class="line"> option.underline.color_active = Color::Red;</div>
<div class="line"> option.underline.SetAnimationFunction(animation::easing::Linear);</div>
<div class="line"> <span class="keywordflow">return</span> Menu(entries, selected, option);</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__style_8cpp.html#af07f6b560af2a9d723b3e53360d280b5">VMenu7</a>(std::vector&lt;std::string&gt;* entries, <span class="keywordtype">int</span>* selected) {</div>
<div class="line"> <span class="keyword">auto</span> option = MenuOption::Vertical();</div>
<div class="line"> option.entries_option.<a class="code hl_variable" href="group__component.html#ab7131557fbe84a6b4b2f2ffcff7d44f0">animated_colors</a>.<a class="code hl_variable" href="structftxui_1_1AnimatedColorsOption.html#a1acdd8b06eb18ae37ffb815462c4374a">foreground</a>.<a class="code hl_variable" href="group__component.html#a8740ba80e30dd75e71d09fa1dcf04f3d">enabled</a> = <span class="keyword">true</span>;</div>
<div class="line"> option.entries_option.<a class="code hl_variable" href="group__component.html#ab7131557fbe84a6b4b2f2ffcff7d44f0">animated_colors</a>.<a class="code hl_variable" href="structftxui_1_1AnimatedColorsOption.html#a550692ff465684652d29385a6b24304d">background</a>.<a class="code hl_variable" href="group__component.html#a8740ba80e30dd75e71d09fa1dcf04f3d">enabled</a> = <span class="keyword">true</span>;</div>
<div class="line"> option.entries_option.<a class="code hl_variable" href="group__component.html#ab7131557fbe84a6b4b2f2ffcff7d44f0">animated_colors</a>.<a class="code hl_variable" href="structftxui_1_1AnimatedColorsOption.html#a550692ff465684652d29385a6b24304d">background</a>.<a class="code hl_variable" href="group__component.html#a5c04e41d802330270ae14a9861c1e2df">active</a> = Color::Red;</div>
<div class="line"> option.entries_option.<a class="code hl_variable" href="group__component.html#ab7131557fbe84a6b4b2f2ffcff7d44f0">animated_colors</a>.<a class="code hl_variable" href="structftxui_1_1AnimatedColorsOption.html#a550692ff465684652d29385a6b24304d">background</a>.<a class="code hl_variable" href="group__component.html#a898e4eb6c2a93ea3b71fc373f39854eb">inactive</a> = Color::Black;</div>
<div class="line"> option.entries_option.<a class="code hl_variable" href="group__component.html#ab7131557fbe84a6b4b2f2ffcff7d44f0">animated_colors</a>.<a class="code hl_variable" href="structftxui_1_1AnimatedColorsOption.html#a1acdd8b06eb18ae37ffb815462c4374a">foreground</a>.<a class="code hl_variable" href="group__component.html#a5c04e41d802330270ae14a9861c1e2df">active</a> = Color::White;</div>
<div class="line"> option.entries_option.<a class="code hl_variable" href="group__component.html#ab7131557fbe84a6b4b2f2ffcff7d44f0">animated_colors</a>.<a class="code hl_variable" href="structftxui_1_1AnimatedColorsOption.html#a1acdd8b06eb18ae37ffb815462c4374a">foreground</a>.<a class="code hl_variable" href="group__component.html#a898e4eb6c2a93ea3b71fc373f39854eb">inactive</a> = Color::Red;</div>
<div class="line"> <span class="keywordflow">return</span> Menu(entries, selected, option);</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__style_8cpp.html#afade922e195c0cda670066485469de56">VMenu8</a>(std::vector&lt;std::string&gt;* entries, <span class="keywordtype">int</span>* selected) {</div>
<div class="line"> <span class="keyword">auto</span> option = MenuOption::Vertical();</div>
<div class="line"> option.entries_option.<a class="code hl_variable" href="group__component.html#ab7131557fbe84a6b4b2f2ffcff7d44f0">animated_colors</a>.<a class="code hl_variable" href="structftxui_1_1AnimatedColorsOption.html#a1acdd8b06eb18ae37ffb815462c4374a">foreground</a>.<a class="code hl_function" href="group__component.html#ad186d5a36e45174bbc7c50df85c2e91e">Set</a>(</div>
<div class="line"> Color::Red, Color::White, std::chrono::milliseconds(500));</div>
<div class="line"> <span class="keywordflow">return</span> Menu(entries, selected, option);</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__style_8cpp.html#a909976f4b60ea372663d733e16011767">HMenu1</a>(std::vector&lt;std::string&gt;* entries, <span class="keywordtype">int</span>* selected) {</div>
<div class="line"> <span class="keywordflow">return</span> Menu(entries, selected, MenuOption::Horizontal());</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__style_8cpp.html#a9ec2a6df3ad7dd845b4d4ab507d9d5fe">HMenu2</a>(std::vector&lt;std::string&gt;* entries, <span class="keywordtype">int</span>* selected) {</div>
<div class="line"> <span class="keywordflow">return</span> Menu(entries, selected, MenuOption::Toggle());</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__style_8cpp.html#ab5a58c425dbca17b57cfcbf4b8c98e2e">HMenu3</a>(std::vector&lt;std::string&gt;* entries, <span class="keywordtype">int</span>* selected) {</div>
<div class="line"> <span class="keyword">auto</span> option = MenuOption::Toggle();</div>
<div class="line"> option.elements_infix = [] { <span class="keywordflow">return</span> text(<span class="stringliteral">&quot; 🮣🮠 &quot;</span>); };</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> Menu(entries, selected, option);</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__style_8cpp.html#a1aead66022c928952b560ebab9913346">HMenu4</a>(std::vector&lt;std::string&gt;* entries, <span class="keywordtype">int</span>* selected) {</div>
<div class="line"> <span class="keywordflow">return</span> Menu(entries, selected, MenuOption::HorizontalAnimated());</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__style_8cpp.html#a16cc679d7e91d82d484eff7e443539cb">HMenu5</a>(std::vector&lt;std::string&gt;* entries, <span class="keywordtype">int</span>* selected) {</div>
<div class="line"> <span class="keyword">auto</span> option = MenuOption::HorizontalAnimated();</div>
<div class="line"> option.underline.SetAnimation(std::chrono::milliseconds(1500),</div>
<div class="line"> animation::easing::ElasticOut);</div>
<div class="line"> option.entries_option.<a class="code hl_variable" href="group__component.html#a5641c45021a8cc20bdd21498563825a0">transform</a> = [](<a class="code hl_struct" href="structftxui_1_1EntryState.html">EntryState</a> state) {</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> e = text(state.label) | hcenter | flex;</div>
<div class="line"> <span class="keywordflow">if</span> (state.active &amp;&amp; state.focused) {</div>
<div class="line"> e = e | bold;</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">if</span> (!state.focused &amp;&amp; !state.active) {</div>
<div class="line"> e = e | dim;</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> e;</div>
<div class="line"> };</div>
<div class="line"> option.underline.color_inactive = Color::Default;</div>
<div class="line"> option.underline.color_active = Color::Red;</div>
<div class="line"> <span class="keywordflow">return</span> Menu(entries, selected, option);</div>
<div class="line">}</div>
<div class="ttc" id="aanimation_8hpp_html"><div class="ttname"><a href="animation_8hpp.html">animation.hpp</a></div></div>
<div class="ttc" id="agroup__component_html_ad186d5a36e45174bbc7c50df85c2e91e"><div class="ttname"><a href="group__component.html#ad186d5a36e45174bbc7c50df85c2e91e">ftxui::AnimatedColorOption::Set</a></div><div class="ttdeci">void Set(Color inactive, Color active, animation::Duration duration=std::chrono::milliseconds(250), animation::easing::Function function=animation::easing::QuadraticInOut)</div><div class="ttdoc">A color option that can be animated. @params _inactive The color when the component is inactive....</div><div class="ttdef"><b>Definition</b> <a href="component__options_8cpp_source.html#l00020">component_options.cpp:20</a></div></div>
<div class="ttc" id="amenu__style_8cpp_html_a16cc679d7e91d82d484eff7e443539cb"><div class="ttname"><a href="menu__style_8cpp.html#a16cc679d7e91d82d484eff7e443539cb">HMenu5</a></div><div class="ttdeci">Component HMenu5(std::vector&lt; std::string &gt; *entries, int *selected)</div><div class="ttdef"><b>Definition</b> <a href="menu__style_8cpp_source.html#l00249">menu_style.cpp:249</a></div></div>
<div class="ttc" id="amenu__style_8cpp_html_a1aead66022c928952b560ebab9913346"><div class="ttname"><a href="menu__style_8cpp.html#a1aead66022c928952b560ebab9913346">HMenu4</a></div><div class="ttdeci">Component HMenu4(std::vector&lt; std::string &gt; *entries, int *selected)</div><div class="ttdef"><b>Definition</b> <a href="menu__style_8cpp_source.html#l00245">menu_style.cpp:245</a></div></div>
<div class="ttc" id="amenu__style_8cpp_html_a62669e7b3cf3a388a714910a16cce19b"><div class="ttname"><a href="menu__style_8cpp.html#a62669e7b3cf3a388a714910a16cce19b">VMenu5</a></div><div class="ttdeci">Component VMenu5(std::vector&lt; std::string &gt; *entries, int *selected)</div><div class="ttdef"><b>Definition</b> <a href="menu__style_8cpp_source.html#l00186">menu_style.cpp:186</a></div></div>
<div class="ttc" id="amenu__style_8cpp_html_a909976f4b60ea372663d733e16011767"><div class="ttname"><a href="menu__style_8cpp.html#a909976f4b60ea372663d733e16011767">HMenu1</a></div><div class="ttdeci">Component HMenu1(std::vector&lt; std::string &gt; *entries, int *selected)</div><div class="ttdef"><b>Definition</b> <a href="menu__style_8cpp_source.html#l00230">menu_style.cpp:230</a></div></div>
<div class="ttc" id="amenu__style_8cpp_html_a9ec2a6df3ad7dd845b4d4ab507d9d5fe"><div class="ttname"><a href="menu__style_8cpp.html#a9ec2a6df3ad7dd845b4d4ab507d9d5fe">HMenu2</a></div><div class="ttdeci">Component HMenu2(std::vector&lt; std::string &gt; *entries, int *selected)</div><div class="ttdef"><b>Definition</b> <a href="menu__style_8cpp_source.html#l00234">menu_style.cpp:234</a></div></div>
<div class="ttc" id="amenu__style_8cpp_html_ab1c7204fedc90016a50553cdcdc9b58b"><div class="ttname"><a href="menu__style_8cpp.html#ab1c7204fedc90016a50553cdcdc9b58b">VMenu2</a></div><div class="ttdeci">Component VMenu2(std::vector&lt; std::string &gt; *entries, int *selected)</div><div class="ttdef"><b>Definition</b> <a href="menu__style_8cpp_source.html#l00130">menu_style.cpp:130</a></div></div>
<div class="ttc" id="amenu__style_8cpp_html_ab5a58c425dbca17b57cfcbf4b8c98e2e"><div class="ttname"><a href="menu__style_8cpp.html#ab5a58c425dbca17b57cfcbf4b8c98e2e">HMenu3</a></div><div class="ttdeci">Component HMenu3(std::vector&lt; std::string &gt; *entries, int *selected)</div><div class="ttdef"><b>Definition</b> <a href="menu__style_8cpp_source.html#l00238">menu_style.cpp:238</a></div></div>
<div class="ttc" id="amenu__style_8cpp_html_abc833415e917ac2a93b5a4f35df2f0fb"><div class="ttname"><a href="menu__style_8cpp.html#abc833415e917ac2a93b5a4f35df2f0fb">VMenu1</a></div><div class="ttdeci">Component VMenu1(std::vector&lt; std::string &gt; *entries, int *selected)</div><div class="ttdef"><b>Definition</b> <a href="menu__style_8cpp_source.html#l00114">menu_style.cpp:114</a></div></div>
<div class="ttc" id="amenu__style_8cpp_html_aec99d3a88e71643df15281e0041e44a2"><div class="ttname"><a href="menu__style_8cpp.html#aec99d3a88e71643df15281e0041e44a2">VMenu3</a></div><div class="ttdeci">Component VMenu3(std::vector&lt; std::string &gt; *entries, int *selected)</div><div class="ttdef"><b>Definition</b> <a href="menu__style_8cpp_source.html#l00146">menu_style.cpp:146</a></div></div>
<div class="ttc" id="amenu__style_8cpp_html_aeeb06101b3a771616149626f203be146"><div class="ttname"><a href="menu__style_8cpp.html#aeeb06101b3a771616149626f203be146">VMenu6</a></div><div class="ttdeci">Component VMenu6(std::vector&lt; std::string &gt; *entries, int *selected)</div><div class="ttdef"><b>Definition</b> <a href="menu__style_8cpp_source.html#l00204">menu_style.cpp:204</a></div></div>
<div class="ttc" id="amenu__style_8cpp_html_af07f6b560af2a9d723b3e53360d280b5"><div class="ttname"><a href="menu__style_8cpp.html#af07f6b560af2a9d723b3e53360d280b5">VMenu7</a></div><div class="ttdeci">Component VMenu7(std::vector&lt; std::string &gt; *entries, int *selected)</div><div class="ttdef"><b>Definition</b> <a href="menu__style_8cpp_source.html#l00212">menu_style.cpp:212</a></div></div>
<div class="ttc" id="amenu__style_8cpp_html_afade922e195c0cda670066485469de56"><div class="ttname"><a href="menu__style_8cpp.html#afade922e195c0cda670066485469de56">VMenu8</a></div><div class="ttdeci">Component VMenu8(std::vector&lt; std::string &gt; *entries, int *selected)</div><div class="ttdef"><b>Definition</b> <a href="menu__style_8cpp_source.html#l00223">menu_style.cpp:223</a></div></div>
<div class="ttc" id="amenu__style_8cpp_html_afc540158e9fcd015af9e24d4ef072214"><div class="ttname"><a href="menu__style_8cpp.html#afc540158e9fcd015af9e24d4ef072214">VMenu4</a></div><div class="ttdeci">Component VMenu4(std::vector&lt; std::string &gt; *entries, int *selected)</div><div class="ttdef"><b>Definition</b> <a href="menu__style_8cpp_source.html#l00166">menu_style.cpp:166</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="menu_underline_animated_gallery"></a>
menu_underline_animated_gallery</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/menu_underline_animated_gallery">Demo</a> </p><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">#include &lt;chrono&gt;</span> <span class="comment">// for operator&quot;&quot;ms, literals</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for allocator, shared_ptr, __shared_ptr_access</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for string, operator+, to_string, basic_string</span></div>
<div class="line"><span class="preprocessor">#include &lt;vector&gt;</span> <span class="comment">// for vector</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="animation_8hpp.html">ftxui/component/animation.hpp</a>&quot;</span> <span class="comment">// for BackOut, Duration</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Menu, Renderer, Vertical</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__options_8hpp.html">ftxui/component/component_options.hpp</a>&quot;</span> <span class="comment">// for MenuOption, UnderlineOption</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="mouse_8hpp.html">ftxui/component/mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for Component, ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for text, Element, operator|, borderEmpty, inverted</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="color_8hpp.html">ftxui/screen/color.hpp</a>&quot;</span> <span class="comment">// for Color, Color::Blue, Color::Red</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__underline__animated__gallery_8cpp.html#a488a81f58d76f17bf95ef222f68e0dfe">DummyComponent</a>(<span class="keywordtype">int</span> <span class="keywordtype">id</span>) {</div>
<div class="line"> <span class="keywordflow">return</span> Renderer([<span class="keywordtype">id</span>](<span class="keywordtype">bool</span> focused) {</div>
<div class="line"> <span class="keyword">auto</span> t = text(<span class="stringliteral">&quot;component &quot;</span> + std::to_string(<span class="keywordtype">id</span>));</div>
<div class="line"> <span class="keywordflow">if</span> (focused) {</div>
<div class="line"> t = t | inverted;</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> t;</div>
<div class="line"> });</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="menu__underline__animated__gallery_8cpp.html#abd88e1b2ce2a860c64bbcd44c0e0282b">Text</a>(<span class="keyword">const</span> std::string&amp; t) {</div>
<div class="line"> <span class="keywordflow">return</span> Renderer([t] { <span class="keywordflow">return</span> text(t) | borderEmpty; });</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">using namespace </span>std::literals;</div>
<div class="line"> std::vector&lt;std::string&gt; tab_values{</div>
<div class="line"> <span class="stringliteral">&quot;Tab 1&quot;</span>, <span class="stringliteral">&quot;Tab 2&quot;</span>, <span class="stringliteral">&quot;Tab 3&quot;</span>, <span class="stringliteral">&quot;A very very long tab&quot;</span>, <span class="stringliteral">&quot;&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> <span class="keywordtype">int</span> tab_selected = 0;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> container = Container::Vertical({});</div>
<div class="line"> </div>
<div class="line"> <span class="keywordtype">int</span> frame_count = 0;</div>
<div class="line"> container-&gt;Add(Renderer(</div>
<div class="line"> [&amp;] { <span class="keywordflow">return</span> text(<span class="stringliteral">&quot;Frame count: &quot;</span> + std::to_string(frame_count++)); }));</div>
<div class="line"> </div>
<div class="line"> {</div>
<div class="line"> <span class="keyword">auto</span> option = MenuOption::HorizontalAnimated();</div>
<div class="line"> container-&gt;Add(<a class="code hl_function" href="menu__underline__animated__gallery_8cpp.html#abd88e1b2ce2a860c64bbcd44c0e0282b">Text</a>(<span class="stringliteral">&quot;This demonstrate the Menu component&quot;</span>));</div>
<div class="line"> container-&gt;Add(Menu(&amp;tab_values, &amp;tab_selected, option));</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> {</div>
<div class="line"> container-&gt;Add(<a class="code hl_function" href="menu__underline__animated__gallery_8cpp.html#abd88e1b2ce2a860c64bbcd44c0e0282b">Text</a>(<span class="stringliteral">&quot;Set underline color to blue&quot;</span>));</div>
<div class="line"> <span class="keyword">auto</span> option = MenuOption::HorizontalAnimated();</div>
<div class="line"> option.underline.color_inactive = Color::Blue;</div>
<div class="line"> container-&gt;Add(Menu(&amp;tab_values, &amp;tab_selected, option));</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> {</div>
<div class="line"> container-&gt;Add(<a class="code hl_function" href="menu__underline__animated__gallery_8cpp.html#abd88e1b2ce2a860c64bbcd44c0e0282b">Text</a>(<span class="stringliteral">&quot;Set underline active color to red&quot;</span>));</div>
<div class="line"> <span class="keyword">auto</span> option = MenuOption::HorizontalAnimated();</div>
<div class="line"> option.underline.color_active = Color::Red;</div>
<div class="line"> container-&gt;Add(Menu(&amp;tab_values, &amp;tab_selected, option));</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> {</div>
<div class="line"> container-&gt;Add(<a class="code hl_function" href="menu__underline__animated__gallery_8cpp.html#abd88e1b2ce2a860c64bbcd44c0e0282b">Text</a>(<span class="stringliteral">&quot;Set animation duration to 0ms&quot;</span>));</div>
<div class="line"> <span class="keyword">auto</span> option = MenuOption::HorizontalAnimated();</div>
<div class="line"> option.underline.SetAnimationDuration(0ms);</div>
<div class="line"> container-&gt;Add(Menu(&amp;tab_values, &amp;tab_selected, option));</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> {</div>
<div class="line"> container-&gt;Add(<a class="code hl_function" href="menu__underline__animated__gallery_8cpp.html#abd88e1b2ce2a860c64bbcd44c0e0282b">Text</a>(<span class="stringliteral">&quot;Set animation easing function to back-out&quot;</span>));</div>
<div class="line"> <span class="keyword">auto</span> option = MenuOption::HorizontalAnimated();</div>
<div class="line"> option.underline.SetAnimationFunction(animation::easing::BackOut);</div>
<div class="line"> option.underline.SetAnimationDuration(350ms);</div>
<div class="line"> container-&gt;Add(Menu(&amp;tab_values, &amp;tab_selected, option));</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// option.underline_animation_follower_delay = 250ms</span></div>
<div class="line"> {</div>
<div class="line"> container-&gt;Add(<a class="code hl_function" href="menu__underline__animated__gallery_8cpp.html#abd88e1b2ce2a860c64bbcd44c0e0282b">Text</a>(<span class="stringliteral">&quot;Add delay to desynchronize animation&quot;</span>));</div>
<div class="line"> <span class="keyword">auto</span> option = MenuOption::HorizontalAnimated();</div>
<div class="line"> option.underline.follower_delay = 250ms;</div>
<div class="line"> container-&gt;Add(Menu(&amp;tab_values, &amp;tab_selected, option));</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> container-&gt;SetActiveChild(container-&gt;ChildAt(2));</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::TerminalOutput();</div>
<div class="line"> screen.Loop(container);</div>
<div class="line">}</div>
<div class="ttc" id="amenu__underline__animated__gallery_8cpp_html_a488a81f58d76f17bf95ef222f68e0dfe"><div class="ttname"><a href="menu__underline__animated__gallery_8cpp.html#a488a81f58d76f17bf95ef222f68e0dfe">DummyComponent</a></div><div class="ttdeci">Component DummyComponent(int id)</div><div class="ttdef"><b>Definition</b> <a href="menu__underline__animated__gallery_8cpp_source.html#l00020">menu_underline_animated_gallery.cpp:20</a></div></div>
<div class="ttc" id="amenu__underline__animated__gallery_8cpp_html_abd88e1b2ce2a860c64bbcd44c0e0282b"><div class="ttname"><a href="menu__underline__animated__gallery_8cpp.html#abd88e1b2ce2a860c64bbcd44c0e0282b">Text</a></div><div class="ttdeci">Component Text(const std::string &amp;t)</div><div class="ttdef"><b>Definition</b> <a href="menu__underline__animated__gallery_8cpp_source.html#l00030">menu_underline_animated_gallery.cpp:30</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="modal_dialog"></a>
modal_dialog</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/modal_dialog">Demo</a> </p><div class="fragment"><div class="line"><span class="comment">// Copyright 2022 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">#include &lt;<a class="code" href="component__options_8hpp.html">ftxui/component/component_options.hpp</a>&gt;</span> <span class="comment">// for ButtonOption</span></div>
<div class="line"><span class="preprocessor">#include &lt;<a class="code" href="mouse_8hpp.html">ftxui/component/mouse.hpp</a>&gt;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &lt;functional&gt;</span> <span class="comment">// for function</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for allocator, shared_ptr</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Button, operator|=, Renderer, Vertical, Modal</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive, Component</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for operator|, separator, text, size, Element, vbox, border, GREATER_THAN, WIDTH, center, HEIGHT</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><span class="keyword">auto</span> <a class="code hl_variable" href="modal__dialog_8cpp.html#a1a0df261e66f85913256ea3d321b3e87">button_style</a> = ButtonOption::Animated();</div>
<div class="line"> </div>
<div class="line"><span class="comment">// Definition of the main component. The details are not important.</span></div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="modal__dialog_8cpp.html#aa61b015248766b6067b6d3c99f04c389">MainComponent</a>(std::function&lt;<span class="keywordtype">void</span>()&gt; show_modal,</div>
<div class="line"> std::function&lt;<span class="keywordtype">void</span>()&gt; exit) {</div>
<div class="line"> <span class="keyword">auto</span> component = Container::Vertical({</div>
<div class="line"> Button(<span class="stringliteral">&quot;Show modal&quot;</span>, show_modal, <a class="code hl_variable" href="modal__dialog_8cpp.html#a1a0df261e66f85913256ea3d321b3e87">button_style</a>),</div>
<div class="line"> Button(<span class="stringliteral">&quot;Quit&quot;</span>, exit, <a class="code hl_variable" href="modal__dialog_8cpp.html#a1a0df261e66f85913256ea3d321b3e87">button_style</a>),</div>
<div class="line"> });</div>
<div class="line"> <span class="comment">// Polish how the two buttons are rendered:</span></div>
<div class="line"> component |= Renderer([&amp;](<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> inner) {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;Main component&quot;</span>),</div>
<div class="line"> separator(),</div>
<div class="line"> inner,</div>
<div class="line"> }) <span class="comment">//</span></div>
<div class="line"> | size(WIDTH, GREATER_THAN, 15) <span class="comment">//</span></div>
<div class="line"> | size(HEIGHT, GREATER_THAN, 15) <span class="comment">//</span></div>
<div class="line"> | border <span class="comment">//</span></div>
<div class="line"> | center; <span class="comment">//</span></div>
<div class="line"> });</div>
<div class="line"> <span class="keywordflow">return</span> component;</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><span class="comment">// Definition of the modal component. The details are not important.</span></div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="modal__dialog_8cpp.html#a3b73476f6f304dce17f808a7c3789f5c">ModalComponent</a>(std::function&lt;<span class="keywordtype">void</span>()&gt; do_nothing,</div>
<div class="line"> std::function&lt;<span class="keywordtype">void</span>()&gt; hide_modal) {</div>
<div class="line"> <span class="keyword">auto</span> component = Container::Vertical({</div>
<div class="line"> Button(<span class="stringliteral">&quot;Do nothing&quot;</span>, do_nothing, <a class="code hl_variable" href="modal__dialog_8cpp.html#a1a0df261e66f85913256ea3d321b3e87">button_style</a>),</div>
<div class="line"> Button(<span class="stringliteral">&quot;Quit modal&quot;</span>, hide_modal, <a class="code hl_variable" href="modal__dialog_8cpp.html#a1a0df261e66f85913256ea3d321b3e87">button_style</a>),</div>
<div class="line"> });</div>
<div class="line"> <span class="comment">// Polish how the two buttons are rendered:</span></div>
<div class="line"> component |= Renderer([&amp;](<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> inner) {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;Modal component &quot;</span>),</div>
<div class="line"> separator(),</div>
<div class="line"> inner,</div>
<div class="line"> }) <span class="comment">//</span></div>
<div class="line"> | size(WIDTH, GREATER_THAN, 30) <span class="comment">//</span></div>
<div class="line"> | border; <span class="comment">//</span></div>
<div class="line"> });</div>
<div class="line"> <span class="keywordflow">return</span> component;</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>(<span class="keywordtype">int</span> argc, <span class="keyword">const</span> <span class="keywordtype">char</span>* argv[]) {</div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::TerminalOutput();</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// State of the application:</span></div>
<div class="line"> <span class="keywordtype">bool</span> modal_shown = <span class="keyword">false</span>;</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// Some actions modifying the state:</span></div>
<div class="line"> <span class="keyword">auto</span> show_modal = [&amp;] { modal_shown = <span class="keyword">true</span>; };</div>
<div class="line"> <span class="keyword">auto</span> hide_modal = [&amp;] { modal_shown = <span class="keyword">false</span>; };</div>
<div class="line"> <span class="keyword">auto</span> exit = screen.ExitLoopClosure();</div>
<div class="line"> <span class="keyword">auto</span> do_nothing = [&amp;] {};</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// Instanciate the main and modal components:</span></div>
<div class="line"> <span class="keyword">auto</span> main_component = <a class="code hl_function" href="modal__dialog_8cpp.html#aa61b015248766b6067b6d3c99f04c389">MainComponent</a>(show_modal, exit);</div>
<div class="line"> <span class="keyword">auto</span> modal_component = <a class="code hl_function" href="modal__dialog_8cpp.html#a3b73476f6f304dce17f808a7c3789f5c">ModalComponent</a>(do_nothing, hide_modal);</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// Use the `Modal` function to use together the main component and its modal</span></div>
<div class="line"> <span class="comment">// window. The |modal_shown| boolean controls whether the modal is shown or</span></div>
<div class="line"> <span class="comment">// not.</span></div>
<div class="line"> main_component |= Modal(modal_component, &amp;modal_shown);</div>
<div class="line"> </div>
<div class="line"> screen.Loop(main_component);</div>
<div class="line"> <span class="keywordflow">return</span> 0;</div>
<div class="line">}</div>
<div class="ttc" id="amodal__dialog_8cpp_html_a1a0df261e66f85913256ea3d321b3e87"><div class="ttname"><a href="modal__dialog_8cpp.html#a1a0df261e66f85913256ea3d321b3e87">button_style</a></div><div class="ttdeci">auto button_style</div><div class="ttdef"><b>Definition</b> <a href="modal__dialog_8cpp_source.html#l00015">modal_dialog.cpp:15</a></div></div>
<div class="ttc" id="amodal__dialog_8cpp_html_a3b73476f6f304dce17f808a7c3789f5c"><div class="ttname"><a href="modal__dialog_8cpp.html#a3b73476f6f304dce17f808a7c3789f5c">ModalComponent</a></div><div class="ttdeci">Component ModalComponent(std::function&lt; void()&gt; do_nothing, std::function&lt; void()&gt; hide_modal)</div><div class="ttdef"><b>Definition</b> <a href="modal__dialog_8cpp_source.html#l00040">modal_dialog.cpp:40</a></div></div>
<div class="ttc" id="amodal__dialog_8cpp_html_aa61b015248766b6067b6d3c99f04c389"><div class="ttname"><a href="modal__dialog_8cpp.html#aa61b015248766b6067b6d3c99f04c389">MainComponent</a></div><div class="ttdeci">Component MainComponent(std::function&lt; void()&gt; show_modal, std::function&lt; void()&gt; exit)</div><div class="ttdef"><b>Definition</b> <a href="modal__dialog_8cpp_source.html#l00018">modal_dialog.cpp:18</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="modal_dialog_custom"></a>
modal_dialog_custom</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/modal_dialog_custom">Demo</a> </p><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">#include &lt;memory&gt;</span> <span class="comment">// for allocator, shared_ptr, __shared_ptr_access</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for string, basic_string, char_traits, operator+</span></div>
<div class="line"><span class="preprocessor">#include &lt;vector&gt;</span> <span class="comment">// for vector</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Button, Renderer, Horizontal, Tab</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for operator|, Element, filler, text, hbox, separator, center, vbox, bold, border, clear_under, dbox, size, GREATER_THAN, HEIGHT</span></div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::TerminalOutput();</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// There are two layers. One at depth = 0 and the modal window at depth = 1;</span></div>
<div class="line"> <span class="keywordtype">int</span> depth = 0;</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// The current rating of FTXUI.</span></div>
<div class="line"> std::string rating = <span class="stringliteral">&quot;3/5 stars&quot;</span>;</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// At depth=0, two buttons. One for rating FTXUI and one for quitting.</span></div>
<div class="line"> <span class="keyword">auto</span> button_rate_ftxui = Button(<span class="stringliteral">&quot;Rate FTXUI&quot;</span>, [&amp;] { depth = 1; });</div>
<div class="line"> <span class="keyword">auto</span> button_quit = Button(<span class="stringliteral">&quot;Quit&quot;</span>, screen.ExitLoopClosure());</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> depth_0_container = Container::Horizontal({</div>
<div class="line"> button_rate_ftxui,</div>
<div class="line"> button_quit,</div>
<div class="line"> });</div>
<div class="line"> <span class="keyword">auto</span> depth_0_renderer = Renderer(depth_0_container, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;Modal dialog example&quot;</span>),</div>
<div class="line"> separator(),</div>
<div class="line"> text(<span class="stringliteral">&quot;☆☆☆ FTXUI:&quot;</span> + rating + <span class="stringliteral">&quot; ☆☆☆&quot;</span>) | bold,</div>
<div class="line"> filler(),</div>
<div class="line"> hbox({</div>
<div class="line"> button_rate_ftxui-&gt;Render(),</div>
<div class="line"> filler(),</div>
<div class="line"> button_quit-&gt;Render(),</div>
<div class="line"> }),</div>
<div class="line"> }) |</div>
<div class="line"> border | size(HEIGHT, GREATER_THAN, 18) | center;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// At depth=1, The &quot;modal&quot; window.</span></div>
<div class="line"> std::vector&lt;std::string&gt; rating_labels = {</div>
<div class="line"> <span class="stringliteral">&quot;1/5 stars&quot;</span>, <span class="stringliteral">&quot;2/5 stars&quot;</span>, <span class="stringliteral">&quot;3/5 stars&quot;</span>, <span class="stringliteral">&quot;4/5 stars&quot;</span>, <span class="stringliteral">&quot;5/5 stars&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> <span class="keyword">auto</span> on_rating = [&amp;](std::string new_rating) {</div>
<div class="line"> rating = new_rating;</div>
<div class="line"> depth = 0;</div>
<div class="line"> };</div>
<div class="line"> <span class="keyword">auto</span> depth_1_container = Container::Horizontal({</div>
<div class="line"> Button(&amp;rating_labels[0], [&amp;] { on_rating(rating_labels[0]); }),</div>
<div class="line"> Button(&amp;rating_labels[1], [&amp;] { on_rating(rating_labels[1]); }),</div>
<div class="line"> Button(&amp;rating_labels[2], [&amp;] { on_rating(rating_labels[2]); }),</div>
<div class="line"> Button(&amp;rating_labels[3], [&amp;] { on_rating(rating_labels[3]); }),</div>
<div class="line"> Button(&amp;rating_labels[4], [&amp;] { on_rating(rating_labels[4]); }),</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> depth_1_renderer = Renderer(depth_1_container, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;Do you like FTXUI?&quot;</span>),</div>
<div class="line"> separator(),</div>
<div class="line"> hbox(depth_1_container-&gt;Render()),</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> main_container = Container::Tab(</div>
<div class="line"> {</div>
<div class="line"> depth_0_renderer,</div>
<div class="line"> depth_1_renderer,</div>
<div class="line"> },</div>
<div class="line"> &amp;depth);</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> main_renderer = Renderer(main_container, [&amp;] {</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a> document = depth_0_renderer-&gt;Render();</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">if</span> (depth == 1) {</div>
<div class="line"> document = dbox({</div>
<div class="line"> document,</div>
<div class="line"> depth_1_renderer-&gt;Render() | clear_under | center,</div>
<div class="line"> });</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> document;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> screen.Loop(main_renderer);</div>
<div class="line"> <span class="keywordflow">return</span> 0;</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="nested_screen"></a>
nested_screen</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/nested_screen">Demo</a> </p><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">#include &lt;memory&gt;</span> <span class="comment">// for allocator, shared_ptr, __shared_ptr_access</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for operator+, string, char_traits, basic_string</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Button, Vertical, Renderer</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for separator, text, Element, operator|, vbox, border</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">void</span> <a class="code hl_function" href="nested__screen_8cpp.html#a77fdac0113a8c43983469efa26ce7276">Nested</a>(std::string path) {</div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::FitComponent();</div>
<div class="line"> <span class="keyword">auto</span> back_button = Button(<span class="stringliteral">&quot;Back&quot;</span>, screen.ExitLoopClosure());</div>
<div class="line"> <span class="keyword">auto</span> goto_1 = Button(<span class="stringliteral">&quot;Goto /1&quot;</span>, [path] { <a class="code hl_function" href="nested__screen_8cpp.html#a77fdac0113a8c43983469efa26ce7276">Nested</a>(path + <span class="stringliteral">&quot;/1&quot;</span>); });</div>
<div class="line"> <span class="keyword">auto</span> goto_2 = Button(<span class="stringliteral">&quot;Goto /2&quot;</span>, [path] { <a class="code hl_function" href="nested__screen_8cpp.html#a77fdac0113a8c43983469efa26ce7276">Nested</a>(path + <span class="stringliteral">&quot;/2&quot;</span>); });</div>
<div class="line"> <span class="keyword">auto</span> goto_3 = Button(<span class="stringliteral">&quot;Goto /3&quot;</span>, [path] { <a class="code hl_function" href="nested__screen_8cpp.html#a77fdac0113a8c43983469efa26ce7276">Nested</a>(path + <span class="stringliteral">&quot;/3&quot;</span>); });</div>
<div class="line"> <span class="keyword">auto</span> layout = Container::Vertical({</div>
<div class="line"> back_button,</div>
<div class="line"> goto_1,</div>
<div class="line"> goto_2,</div>
<div class="line"> goto_3,</div>
<div class="line"> });</div>
<div class="line"> <span class="keyword">auto</span> renderer = Renderer(layout, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;path: &quot;</span> + path),</div>
<div class="line"> separator(),</div>
<div class="line"> back_button-&gt;Render(),</div>
<div class="line"> goto_1-&gt;Render(),</div>
<div class="line"> goto_2-&gt;Render(),</div>
<div class="line"> goto_3-&gt;Render(),</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> });</div>
<div class="line"> screen.Loop(renderer);</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::FitComponent();</div>
<div class="line"> <span class="keyword">auto</span> button_quit = Button(<span class="stringliteral">&quot;Quit&quot;</span>, screen.ExitLoopClosure());</div>
<div class="line"> <span class="keyword">auto</span> button_nested = Button(<span class="stringliteral">&quot;Nested&quot;</span>, [] { <a class="code hl_function" href="nested__screen_8cpp.html#a77fdac0113a8c43983469efa26ce7276">Nested</a>(<span class="stringliteral">&quot;&quot;</span>); });</div>
<div class="line"> screen.Loop(Container::Vertical({</div>
<div class="line"> button_quit,</div>
<div class="line"> button_nested,</div>
<div class="line"> }));</div>
<div class="line"> <span class="keywordflow">return</span> 0;</div>
<div class="line">}</div>
<div class="ttc" id="anested__screen_8cpp_html_a77fdac0113a8c43983469efa26ce7276"><div class="ttname"><a href="nested__screen_8cpp.html#a77fdac0113a8c43983469efa26ce7276">Nested</a></div><div class="ttdeci">void Nested(std::string path)</div><div class="ttdef"><b>Definition</b> <a href="nested__screen_8cpp_source.html#l00015">nested_screen.cpp:15</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="print_key_press"></a>
print_key_press</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/print_key_press">Demo</a> </p><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"> </div>
<div class="line"><span class="preprocessor">#include &lt;stddef.h&gt;</span> <span class="comment">// for size_t</span></div>
<div class="line"><span class="preprocessor">#include &lt;algorithm&gt;</span> <span class="comment">// for max</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for allocator, shared_ptr</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for char_traits, operator+, string, basic_string, to_string</span></div>
<div class="line"><span class="preprocessor">#include &lt;utility&gt;</span> <span class="comment">// for move</span></div>
<div class="line"><span class="preprocessor">#include &lt;vector&gt;</span> <span class="comment">// for vector</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for CatchEvent, Renderer</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="event_8hpp.html">ftxui/component/event.hpp</a>&quot;</span> <span class="comment">// for Event</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="mouse_8hpp.html">ftxui/component/mouse.hpp</a>&quot;</span> <span class="comment">// for Mouse, Mouse::Left, Mouse::Middle, Mouse::None, Mouse::Pressed, Mouse::Released, Mouse::Right, Mouse::WheelDown, Mouse::WheelUp</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for text, vbox, window, Element, Elements</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line">std::string <a class="code hl_function" href="print__key__press_8cpp.html#a1bbdd0071095abee0e28134bd4ad9213">Code</a>(<a class="code hl_struct" href="group__component.html#structftxui_1_1Event">Event</a> event) {</div>
<div class="line"> std::string codes;</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keyword">auto</span>&amp; it : event.<a class="code hl_function" href="group__component.html#a947e2de698c4bef07c78674218330677">input</a>()) {</div>
<div class="line"> codes += <span class="stringliteral">&quot; &quot;</span> + std::to_string((<span class="keywordtype">unsigned</span> <span class="keywordtype">int</span>)it);</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> codes;</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::TerminalOutput();</div>
<div class="line"> </div>
<div class="line"> std::vector&lt;Event&gt; keys;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> left_column = Renderer([&amp;] {</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a> children = {</div>
<div class="line"> text(<span class="stringliteral">&quot;Codes&quot;</span>),</div>
<div class="line"> separator(),</div>
<div class="line"> };</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">size_t</span> i = std::max(0, (<span class="keywordtype">int</span>)keys.size() - 20); i &lt; keys.size(); ++i) {</div>
<div class="line"> children.push_back(text(<a class="code hl_function" href="print__key__press_8cpp.html#a1bbdd0071095abee0e28134bd4ad9213">Code</a>(keys[i])));</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> vbox(children);</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> right_column = Renderer([&amp;] {</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a> children = {</div>
<div class="line"> text(<span class="stringliteral">&quot;Event&quot;</span>),</div>
<div class="line"> separator(),</div>
<div class="line"> };</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">size_t</span> i = std::max(0, (<span class="keywordtype">int</span>)keys.size() - 20); i &lt; keys.size(); ++i) {</div>
<div class="line"> children.push_back(text(keys[i].DebugString()));</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> vbox(children);</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keywordtype">int</span> split_size = 40;</div>
<div class="line"> <span class="keyword">auto</span> component = ResizableSplitLeft(left_column, right_column, &amp;split_size);</div>
<div class="line"> component |= border;</div>
<div class="line"> </div>
<div class="line"> component |= CatchEvent([&amp;](<a class="code hl_struct" href="group__component.html#structftxui_1_1Event">Event</a> event) {</div>
<div class="line"> keys.push_back(event);</div>
<div class="line"> <span class="keywordflow">return</span> <span class="keyword">false</span>;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> screen.Loop(component);</div>
<div class="line">}</div>
<div class="ttc" id="agroup__component_html_a947e2de698c4bef07c78674218330677"><div class="ttname"><a href="group__component.html#a947e2de698c4bef07c78674218330677">ftxui::Event::input</a></div><div class="ttdeci">const std::string &amp; input() const</div><div class="ttdef"><b>Definition</b> <a href="event_8hpp_source.html#l00104">event.hpp:104</a></div></div>
<div class="ttc" id="aprint__key__press_8cpp_html_a1bbdd0071095abee0e28134bd4ad9213"><div class="ttname"><a href="print__key__press_8cpp.html#a1bbdd0071095abee0e28134bd4ad9213">Code</a></div><div class="ttdeci">std::string Code(Event event)</div><div class="ttdef"><b>Definition</b> <a href="print__key__press_8cpp_source.html#l00021">print_key_press.cpp:21</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="radiobox"></a>
radiobox</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/radiobox">Demo</a> </p><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">#include &lt;string&gt;</span> <span class="comment">// for string, allocator, basic_string</span></div>
<div class="line"><span class="preprocessor">#include &lt;vector&gt;</span> <span class="comment">// for vector</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Radiobox</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> std::vector&lt;std::string&gt; radiobox_list = {</div>
<div class="line"> <span class="stringliteral">&quot;Use gcc&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Use clang&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Use emscripten&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Use tcc&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> <span class="keywordtype">int</span> selected = 0;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::TerminalOutput();</div>
<div class="line"> screen.Loop(Radiobox(&amp;radiobox_list, &amp;selected));</div>
<div class="line"> <span class="keywordflow">return</span> 0;</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="radiobox_in_frame"></a>
radiobox_in_frame</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/radiobox_in_frame">Demo</a> </p><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">#include &lt;memory&gt;</span> <span class="comment">// for shared_ptr, __shared_ptr_access</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for string, basic_string, operator+, to_string</span></div>
<div class="line"><span class="preprocessor">#include &lt;vector&gt;</span> <span class="comment">// for vector</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Radiobox, Renderer</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for operator|, Element, size, border, frame, HEIGHT, LESS_THAN</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> std::vector&lt;std::string&gt; entries;</div>
<div class="line"> <span class="keywordtype">int</span> selected = 0;</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> i = 0; i &lt; 30; ++i) {</div>
<div class="line"> entries.push_back(<span class="stringliteral">&quot;RadioBox &quot;</span> + std::to_string(i));</div>
<div class="line"> }</div>
<div class="line"> <span class="keyword">auto</span> radiobox = Radiobox(&amp;entries, &amp;selected);</div>
<div class="line"> <span class="keyword">auto</span> renderer = Renderer(radiobox, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> radiobox-&gt;Render() | vscroll_indicator | frame |</div>
<div class="line"> size(HEIGHT, LESS_THAN, 10) | border;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::FitComponent();</div>
<div class="line"> screen.Loop(renderer);</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> 0;</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="renderer"></a>
renderer</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/renderer">Demo</a> </p><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">#include &lt;memory&gt;</span> <span class="comment">// for shared_ptr, allocator, __shared_ptr_access</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Renderer, Button, Vertical</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for operator|, Element, text, bold, border, center, color</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="color_8hpp.html">ftxui/screen/color.hpp</a>&quot;</span> <span class="comment">// for Color, Color::Red</span></div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::FitComponent();</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// A Renderer() is a component using a lambda function as a parameter to</span></div>
<div class="line"> <span class="comment">// render itself.</span></div>
<div class="line"> </div>
<div class="line"> <span class="comment">// 1. Example of focusable renderer:</span></div>
<div class="line"> <span class="keyword">auto</span> renderer_focusable = Renderer([](<span class="keywordtype">bool</span> focused) {</div>
<div class="line"> <span class="keywordflow">if</span> (focused) {</div>
<div class="line"> <span class="keywordflow">return</span> text(<span class="stringliteral">&quot;FOCUSABLE RENDERER()&quot;</span>) | center | bold | border;</div>
<div class="line"> } <span class="keywordflow">else</span> {</div>
<div class="line"> <span class="keywordflow">return</span> text(<span class="stringliteral">&quot; Focusable renderer() &quot;</span>) | center | border;</div>
<div class="line"> }</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// 2. Examples of a non focusable renderer.</span></div>
<div class="line"> <span class="keyword">auto</span> renderer_non_focusable = Renderer([&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> text(<span class="stringliteral">&quot;~~~~~ Non Focusable renderer() ~~~~~&quot;</span>); <span class="comment">//</span></div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// 3. Renderer can wrap other components to redefine their Render() function.</span></div>
<div class="line"> <span class="keyword">auto</span> button = Button(<span class="stringliteral">&quot;Wrapped quit button&quot;</span>, screen.ExitLoopClosure());</div>
<div class="line"> <span class="keyword">auto</span> renderer_wrap = Renderer(button, [&amp;] {</div>
<div class="line"> <span class="keywordflow">if</span> (button-&gt;Focused()) {</div>
<div class="line"> <span class="keywordflow">return</span> button-&gt;Render() | bold | color(Color::Red);</div>
<div class="line"> } <span class="keywordflow">else</span> {</div>
<div class="line"> <span class="keywordflow">return</span> button-&gt;Render();</div>
<div class="line"> }</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// Let&#39;s renderer everyone:</span></div>
<div class="line"> screen.Loop(Container::Vertical({</div>
<div class="line"> renderer_focusable,</div>
<div class="line"> renderer_non_focusable,</div>
<div class="line"> renderer_wrap,</div>
<div class="line"> }));</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="resizable_split"></a>
resizable_split</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/resizable_split">Demo</a> </p><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">#include &lt;memory&gt;</span> <span class="comment">// for shared_ptr, allocator, __shared_ptr_access</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Renderer, ResizableSplitBottom, ResizableSplitLeft, ResizableSplitRight, ResizableSplitTop</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for Element, operator|, text, center, border</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::Fullscreen();</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> middle = Renderer([] { <span class="keywordflow">return</span> text(<span class="stringliteral">&quot;middle&quot;</span>) | center; });</div>
<div class="line"> <span class="keyword">auto</span> <a class="code hl_variable" href="screen_8cpp.html#a972107f15f3c0c099eb9fd605e7f51c6">left</a> = Renderer([] { <span class="keywordflow">return</span> text(<span class="stringliteral">&quot;Left&quot;</span>) | center; });</div>
<div class="line"> <span class="keyword">auto</span> <a class="code hl_variable" href="screen_8cpp.html#aa4b74e56e675912bbc06504407fc7a46">right</a> = Renderer([] { <span class="keywordflow">return</span> text(<span class="stringliteral">&quot;right&quot;</span>) | center; });</div>
<div class="line"> <span class="keyword">auto</span> <a class="code hl_variable" href="screen_8cpp.html#a495e1456dc6a7df7638b2c507c756a24">top</a> = Renderer([] { <span class="keywordflow">return</span> text(<span class="stringliteral">&quot;top&quot;</span>) | center; });</div>
<div class="line"> <span class="keyword">auto</span> bottom = Renderer([] { <span class="keywordflow">return</span> text(<span class="stringliteral">&quot;bottom&quot;</span>) | center; });</div>
<div class="line"> </div>
<div class="line"> <span class="keywordtype">int</span> left_size = 20;</div>
<div class="line"> <span class="keywordtype">int</span> right_size = 20;</div>
<div class="line"> <span class="keywordtype">int</span> top_size = 10;</div>
<div class="line"> <span class="keywordtype">int</span> bottom_size = 10;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> container = middle;</div>
<div class="line"> container = ResizableSplitLeft(<a class="code hl_variable" href="screen_8cpp.html#a972107f15f3c0c099eb9fd605e7f51c6">left</a>, container, &amp;left_size);</div>
<div class="line"> container = ResizableSplitRight(<a class="code hl_variable" href="screen_8cpp.html#aa4b74e56e675912bbc06504407fc7a46">right</a>, container, &amp;right_size);</div>
<div class="line"> container = ResizableSplitTop(<a class="code hl_variable" href="screen_8cpp.html#a495e1456dc6a7df7638b2c507c756a24">top</a>, container, &amp;top_size);</div>
<div class="line"> container = ResizableSplitBottom(bottom, container, &amp;bottom_size);</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> renderer =</div>
<div class="line"> Renderer(container, [&amp;] { <span class="keywordflow">return</span> container-&gt;Render() | border; });</div>
<div class="line"> </div>
<div class="line"> screen.Loop(renderer);</div>
<div class="line">}</div>
<div class="ttc" id="ascreen_8cpp_html_a495e1456dc6a7df7638b2c507c756a24"><div class="ttname"><a href="screen_8cpp.html#a495e1456dc6a7df7638b2c507c756a24">top</a></div><div class="ttdeci">std::uint8_t top</div><div class="ttdef"><b>Definition</b> <a href="screen_8cpp_source.html#l00131">screen.cpp:131</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#l00130">screen.cpp:130</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#l00132">screen.cpp:132</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="scrollbar"></a>
scrollbar</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/scrollbar">Demo</a> </p><div class="fragment"><div class="line"><span class="comment">// Copyright 2023 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">#include &lt;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&gt;</span></div>
<div class="line"><span class="preprocessor">#include &lt;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&gt;</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="scrollbar_8cpp.html#a83db372d294b69185f7a26148935cfc3">DummyWindowContent</a>() {</div>
<div class="line"> <span class="keyword">class </span>Impl : <span class="keyword">public</span> <a class="code hl_class" href="group__component.html#classftxui_1_1ComponentBase">ComponentBase</a> {</div>
<div class="line"> <span class="keyword">private</span>:</div>
<div class="line"> <span class="keywordtype">float</span> scroll_x = 0.1;</div>
<div class="line"> <span class="keywordtype">float</span> scroll_y = 0.1;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">public</span>:</div>
<div class="line"> Impl() {</div>
<div class="line"> <span class="keyword">auto</span> content = Renderer([=] {</div>
<div class="line"> <span class="keyword">const</span> std::string lorem =</div>
<div class="line"> <span class="stringliteral">&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed &quot;</span></div>
<div class="line"> <span class="stringliteral">&quot;do eiusmod tempor incididunt ut labore et dolore magna &quot;</span></div>
<div class="line"> <span class="stringliteral">&quot;aliqua. Ut enim ad minim veniam, quis nostrud exercitation &quot;</span></div>
<div class="line"> <span class="stringliteral">&quot;ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis &quot;</span></div>
<div class="line"> <span class="stringliteral">&quot;aute irure dolor in reprehenderit in voluptate velit esse &quot;</span></div>
<div class="line"> <span class="stringliteral">&quot;cillum dolore eu fugiat nulla pariatur. Excepteur sint &quot;</span></div>
<div class="line"> <span class="stringliteral">&quot;occaecat cupidatat non proident, sunt in culpa qui officia &quot;</span></div>
<div class="line"> <span class="stringliteral">&quot;deserunt mollit anim id est laborum.&quot;</span>;</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> text(lorem.substr(0, -1)), text(lorem.substr(5, -1)), text(<span class="stringliteral">&quot;&quot;</span>),</div>
<div class="line"> text(lorem.substr(10, -1)), text(lorem.substr(15, -1)), text(<span class="stringliteral">&quot;&quot;</span>),</div>
<div class="line"> text(lorem.substr(20, -1)), text(lorem.substr(25, -1)), text(<span class="stringliteral">&quot;&quot;</span>),</div>
<div class="line"> text(lorem.substr(30, -1)), text(lorem.substr(35, -1)), text(<span class="stringliteral">&quot;&quot;</span>),</div>
<div class="line"> text(lorem.substr(40, -1)), text(lorem.substr(45, -1)), text(<span class="stringliteral">&quot;&quot;</span>),</div>
<div class="line"> text(lorem.substr(50, -1)), text(lorem.substr(55, -1)), text(<span class="stringliteral">&quot;&quot;</span>),</div>
<div class="line"> text(lorem.substr(60, -1)), text(lorem.substr(65, -1)), text(<span class="stringliteral">&quot;&quot;</span>),</div>
<div class="line"> text(lorem.substr(70, -1)), text(lorem.substr(75, -1)), text(<span class="stringliteral">&quot;&quot;</span>),</div>
<div class="line"> text(lorem.substr(80, -1)), text(lorem.substr(85, -1)), text(<span class="stringliteral">&quot;&quot;</span>),</div>
<div class="line"> text(lorem.substr(90, -1)), text(lorem.substr(95, -1)), text(<span class="stringliteral">&quot;&quot;</span>),</div>
<div class="line"> text(lorem.substr(100, -1)), text(lorem.substr(105, -1)), text(<span class="stringliteral">&quot;&quot;</span>),</div>
<div class="line"> text(lorem.substr(110, -1)), text(lorem.substr(115, -1)), text(<span class="stringliteral">&quot;&quot;</span>),</div>
<div class="line"> text(lorem.substr(120, -1)), text(lorem.substr(125, -1)), text(<span class="stringliteral">&quot;&quot;</span>),</div>
<div class="line"> text(lorem.substr(130, -1)), text(lorem.substr(135, -1)), text(<span class="stringliteral">&quot;&quot;</span>),</div>
<div class="line"> text(lorem.substr(140, -1)),</div>
<div class="line"> });</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> scrollable_content = Renderer(content, [&amp;, content] {</div>
<div class="line"> <span class="keywordflow">return</span> content-&gt;Render() | focusPositionRelative(scroll_x, scroll_y) |</div>
<div class="line"> frame | flex;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <a class="code hl_struct" href="structftxui_1_1SliderOption.html">SliderOption&lt;float&gt;</a> option_x;</div>
<div class="line"> option_x.<a class="code hl_variable" href="structftxui_1_1SliderOption.html#ab256d6c86a100045ed2329da289dce3a">value</a> = &amp;scroll_x;</div>
<div class="line"> option_x.min = 0.f;</div>
<div class="line"> option_x.max = 1.f;</div>
<div class="line"> option_x.increment = 0.1f;</div>
<div class="line"> option_x.direction = Direction::Right;</div>
<div class="line"> option_x.color_active = Color::Blue;</div>
<div class="line"> option_x.color_inactive = Color::BlueLight;</div>
<div class="line"> <span class="keyword">auto</span> scrollbar_x = Slider(option_x);</div>
<div class="line"> </div>
<div class="line"> <a class="code hl_struct" href="structftxui_1_1SliderOption.html">SliderOption&lt;float&gt;</a> option_y;</div>
<div class="line"> option_y.<a class="code hl_variable" href="structftxui_1_1SliderOption.html#ab256d6c86a100045ed2329da289dce3a">value</a> = &amp;scroll_y;</div>
<div class="line"> option_y.<a class="code hl_variable" href="structftxui_1_1SliderOption.html#a337a8e502154b70ef2a1d4bb3cb47ea9">min</a> = 0.f;</div>
<div class="line"> option_y.<a class="code hl_variable" href="structftxui_1_1SliderOption.html#abd146f0de5789f02aee07c54e819099b">max</a> = 1.f;</div>
<div class="line"> option_y.<a class="code hl_variable" href="structftxui_1_1SliderOption.html#a752366b00bdf7bba57a18e239e86e2e1">increment</a> = 0.1f;</div>
<div class="line"> option_y.<a class="code hl_variable" href="structftxui_1_1SliderOption.html#a53421c695d00016ab925777d423b4eb6">direction</a> = Direction::Down;</div>
<div class="line"> option_y.<a class="code hl_variable" href="structftxui_1_1SliderOption.html#a593f1ba15add21d1972c01372db369df">color_active</a> = Color::Yellow;</div>
<div class="line"> option_y.<a class="code hl_variable" href="structftxui_1_1SliderOption.html#ad5a77e0bc0ce649271a13949a7a0a635">color_inactive</a> = Color::YellowLight;</div>
<div class="line"> <span class="keyword">auto</span> scrollbar_y = Slider(option_y);</div>
<div class="line"> </div>
<div class="line"> Add(Container::Vertical({</div>
<div class="line"> Container::Horizontal({</div>
<div class="line"> scrollable_content,</div>
<div class="line"> scrollbar_y,</div>
<div class="line"> }) | flex,</div>
<div class="line"> Container::Horizontal({</div>
<div class="line"> scrollbar_x,</div>
<div class="line"> Renderer([] { <span class="keywordflow">return</span> text(L<span class="stringliteral">&quot;x&quot;</span>); }),</div>
<div class="line"> }),</div>
<div class="line"> }));</div>
<div class="line"> }</div>
<div class="line"> };</div>
<div class="line"> <span class="keywordflow">return</span> Make&lt;Impl&gt;();</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">auto</span> window_1 = <a class="code hl_function" href="menu__multiple_8cpp.html#ac2013764d7f0c7eb57876c3755e98bb3">Window</a>({</div>
<div class="line"> .inner = <a class="code hl_function" href="scrollbar_8cpp.html#a83db372d294b69185f7a26148935cfc3">DummyWindowContent</a>(),</div>
<div class="line"> .title = <span class="stringliteral">&quot;First window&quot;</span>,</div>
<div class="line"> .width = 80,</div>
<div class="line"> .height = 30,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> window_2 = <a class="code hl_function" href="menu__multiple_8cpp.html#ac2013764d7f0c7eb57876c3755e98bb3">Window</a>({</div>
<div class="line"> .inner = <a class="code hl_function" href="scrollbar_8cpp.html#a83db372d294b69185f7a26148935cfc3">DummyWindowContent</a>(),</div>
<div class="line"> .title = <span class="stringliteral">&quot;My window&quot;</span>,</div>
<div class="line"> .left = 40,</div>
<div class="line"> .top = 20,</div>
<div class="line"> .width = 80,</div>
<div class="line"> .height = 30,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> window_container = Container::Stacked({</div>
<div class="line"> window_1,</div>
<div class="line"> window_2,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::Fullscreen();</div>
<div class="line"> screen.Loop(window_container);</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> EXIT_SUCCESS;</div>
<div class="line">}</div>
<div class="ttc" id="agroup__component_html_classftxui_1_1ComponentBase"><div class="ttname"><a href="group__component.html#classftxui_1_1ComponentBase">ftxui::ComponentBase</a></div><div class="ttdoc">It implement rendering itself as ftxui::Element. It implement keyboard navigation by responding to ft...</div><div class="ttdef"><b>Definition</b> <a href="component__base_8hpp_source.html#l00030">component_base.hpp:30</a></div></div>
<div class="ttc" id="ascrollbar_8cpp_html_a83db372d294b69185f7a26148935cfc3"><div class="ttname"><a href="scrollbar_8cpp.html#a83db372d294b69185f7a26148935cfc3">DummyWindowContent</a></div><div class="ttdeci">Component DummyWindowContent()</div><div class="ttdef"><b>Definition</b> <a href="scrollbar_8cpp_source.html#l00010">scrollbar.cpp:10</a></div></div>
<div class="ttc" id="astructftxui_1_1SliderOption_html"><div class="ttname"><a href="structftxui_1_1SliderOption.html">ftxui::SliderOption</a></div><div class="ttdef"><b>Definition</b> <a href="component__options_8hpp_source.html#l00225">component_options.hpp:225</a></div></div>
<div class="ttc" id="astructftxui_1_1SliderOption_html_a337a8e502154b70ef2a1d4bb3cb47ea9"><div class="ttname"><a href="structftxui_1_1SliderOption.html#a337a8e502154b70ef2a1d4bb3cb47ea9">ftxui::SliderOption::min</a></div><div class="ttdeci">ConstRef&lt; T &gt; min</div><div class="ttdef"><b>Definition</b> <a href="component__options_8hpp_source.html#l00227">component_options.hpp:227</a></div></div>
<div class="ttc" id="astructftxui_1_1SliderOption_html_a53421c695d00016ab925777d423b4eb6"><div class="ttname"><a href="structftxui_1_1SliderOption.html#a53421c695d00016ab925777d423b4eb6">ftxui::SliderOption::direction</a></div><div class="ttdeci">Direction direction</div><div class="ttdef"><b>Definition</b> <a href="component__options_8hpp_source.html#l00230">component_options.hpp:230</a></div></div>
<div class="ttc" id="astructftxui_1_1SliderOption_html_a593f1ba15add21d1972c01372db369df"><div class="ttname"><a href="structftxui_1_1SliderOption.html#a593f1ba15add21d1972c01372db369df">ftxui::SliderOption::color_active</a></div><div class="ttdeci">Color color_active</div><div class="ttdef"><b>Definition</b> <a href="component__options_8hpp_source.html#l00231">component_options.hpp:231</a></div></div>
<div class="ttc" id="astructftxui_1_1SliderOption_html_a752366b00bdf7bba57a18e239e86e2e1"><div class="ttname"><a href="structftxui_1_1SliderOption.html#a752366b00bdf7bba57a18e239e86e2e1">ftxui::SliderOption::increment</a></div><div class="ttdeci">ConstRef&lt; T &gt; increment</div><div class="ttdef"><b>Definition</b> <a href="component__options_8hpp_source.html#l00229">component_options.hpp:229</a></div></div>
<div class="ttc" id="astructftxui_1_1SliderOption_html_ab256d6c86a100045ed2329da289dce3a"><div class="ttname"><a href="structftxui_1_1SliderOption.html#ab256d6c86a100045ed2329da289dce3a">ftxui::SliderOption::value</a></div><div class="ttdeci">Ref&lt; T &gt; value</div><div class="ttdef"><b>Definition</b> <a href="component__options_8hpp_source.html#l00226">component_options.hpp:226</a></div></div>
<div class="ttc" id="astructftxui_1_1SliderOption_html_abd146f0de5789f02aee07c54e819099b"><div class="ttname"><a href="structftxui_1_1SliderOption.html#abd146f0de5789f02aee07c54e819099b">ftxui::SliderOption::max</a></div><div class="ttdeci">ConstRef&lt; T &gt; max</div><div class="ttdef"><b>Definition</b> <a href="component__options_8hpp_source.html#l00228">component_options.hpp:228</a></div></div>
<div class="ttc" id="astructftxui_1_1SliderOption_html_ad5a77e0bc0ce649271a13949a7a0a635"><div class="ttname"><a href="structftxui_1_1SliderOption.html#ad5a77e0bc0ce649271a13949a7a0a635">ftxui::SliderOption::color_inactive</a></div><div class="ttdeci">Color color_inactive</div><div class="ttdef"><b>Definition</b> <a href="component__options_8hpp_source.html#l00232">component_options.hpp:232</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="selection"></a>
selection</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/selection">Demo</a> </p><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">#include &lt;string&gt;</span> <span class="comment">// for char_traits, operator+, string, basic_string</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Input, Renderer, Vertical</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__options_8hpp.html">ftxui/component/component_options.hpp</a>&quot;</span> <span class="comment">// for InputOption</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for Component, ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for text, hbox, separator, Element, operator|, vbox, border</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="ref_8hpp.html">ftxui/util/ref.hpp</a>&quot;</span> <span class="comment">// for Ref</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</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="examples_2component_2selection_8cpp.html#a693bf20426978b4a6d5114374d8c521d">LoremIpsum</a>() {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;FTXUI: A powerful library for building user interfaces.&quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;Enjoy a rich set of components and a declarative style.&quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;Create beautiful and responsive UIs with minimal effort.&quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;Join the community and experience the power of FTXUI.&quot;</span>),</div>
<div class="line"> });</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::TerminalOutput();</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> quit =</div>
<div class="line"> Button(<span class="stringliteral">&quot;Quit&quot;</span>, screen.ExitLoopClosure(), ButtonOption::Animated());</div>
<div class="line"> </div>
<div class="line"> <span class="keywordtype">int</span> selection_change_counter = 0;</div>
<div class="line"> std::string selection_content = <span class="stringliteral">&quot;&quot;</span>;</div>
<div class="line"> screen.SelectionChange([&amp;] {</div>
<div class="line"> selection_change_counter++;</div>
<div class="line"> selection_content = screen.GetSelection();</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// The components:</span></div>
<div class="line"> <span class="keyword">auto</span> renderer = Renderer(quit, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;Select changed: &quot;</span> + std::to_string(selection_change_counter) +</div>
<div class="line"> <span class="stringliteral">&quot; times&quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;Currently selected: &quot;</span>),</div>
<div class="line"> paragraph(selection_content) | vscroll_indicator | frame | border |</div>
<div class="line"> size(HEIGHT, EQUAL, 10),</div>
<div class="line"> window(text(<span class="stringliteral">&quot;Horizontal split&quot;</span>), hbox({</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2selection_8cpp.html#a693bf20426978b4a6d5114374d8c521d">LoremIpsum</a>(),</div>
<div class="line"> separator(),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2selection_8cpp.html#a693bf20426978b4a6d5114374d8c521d">LoremIpsum</a>(),</div>
<div class="line"> separator(),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2selection_8cpp.html#a693bf20426978b4a6d5114374d8c521d">LoremIpsum</a>(),</div>
<div class="line"> })),</div>
<div class="line"> window(text(<span class="stringliteral">&quot;Vertical split&quot;</span>), vbox({</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2selection_8cpp.html#a693bf20426978b4a6d5114374d8c521d">LoremIpsum</a>(),</div>
<div class="line"> separator(),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2selection_8cpp.html#a693bf20426978b4a6d5114374d8c521d">LoremIpsum</a>(),</div>
<div class="line"> separator(),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2selection_8cpp.html#a693bf20426978b4a6d5114374d8c521d">LoremIpsum</a>(),</div>
<div class="line"> })),</div>
<div class="line"> window(text(<span class="stringliteral">&quot;Grid split with different style&quot;</span>),</div>
<div class="line"> vbox({</div>
<div class="line"> hbox({</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2selection_8cpp.html#a693bf20426978b4a6d5114374d8c521d">LoremIpsum</a>(),</div>
<div class="line"> separator(),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2selection_8cpp.html#a693bf20426978b4a6d5114374d8c521d">LoremIpsum</a>() <span class="comment">//</span></div>
<div class="line"> | selectionBackgroundColor(Color::Yellow) <span class="comment">//</span></div>
<div class="line"> | selectionColor(Color::Black) <span class="comment">//</span></div>
<div class="line"> | selectionStyleReset,</div>
<div class="line"> separator(),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2selection_8cpp.html#a693bf20426978b4a6d5114374d8c521d">LoremIpsum</a>() | selectionColor(Color::Blue),</div>
<div class="line"> }),</div>
<div class="line"> separator(),</div>
<div class="line"> hbox({</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2selection_8cpp.html#a693bf20426978b4a6d5114374d8c521d">LoremIpsum</a>() | selectionColor(Color::Red),</div>
<div class="line"> separator(),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2selection_8cpp.html#a693bf20426978b4a6d5114374d8c521d">LoremIpsum</a>() | selectionStyle([](<a class="code hl_struct" href="group__screen.html#structftxui_1_1Pixel">Pixel</a>&amp; pixel) {</div>
<div class="line"> pixel.<a class="code hl_variable" href="group__screen.html#afe0ea73f380e746092213b879003afd6">underlined_double</a> = <span class="keyword">true</span>;</div>
<div class="line"> }),</div>
<div class="line"> separator(),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2selection_8cpp.html#a693bf20426978b4a6d5114374d8c521d">LoremIpsum</a>(),</div>
<div class="line"> }),</div>
<div class="line"> })),</div>
<div class="line"> quit-&gt;Render(),</div>
<div class="line"> });</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> screen.Loop(renderer);</div>
<div class="line">}</div>
<div class="ttc" id="aexamples_2component_2selection_8cpp_html_a693bf20426978b4a6d5114374d8c521d"><div class="ttname"><a href="examples_2component_2selection_8cpp.html#a693bf20426978b4a6d5114374d8c521d">LoremIpsum</a></div><div class="ttdeci">Element LoremIpsum()</div><div class="ttdef"><b>Definition</b> <a href="examples_2component_2selection_8cpp_source.html#l00015">examples/component/selection.cpp:15</a></div></div>
<div class="ttc" id="agroup__screen_html_afe0ea73f380e746092213b879003afd6"><div class="ttname"><a href="group__screen.html#afe0ea73f380e746092213b879003afd6">ftxui::Pixel::underlined_double</a></div><div class="ttdeci">bool underlined_double</div><div class="ttdef"><b>Definition</b> <a href="pixel_8hpp_source.html#l00034">pixel.hpp:34</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="slider"></a>
slider</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/slider">Demo</a> </p><div class="fragment"><div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Slider</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::TerminalOutput();</div>
<div class="line"> <span class="keywordtype">int</span> value = 50;</div>
<div class="line"> <span class="keyword">auto</span> slider = Slider(<span class="stringliteral">&quot;Value:&quot;</span>, &amp;value, 0, 100, 1);</div>
<div class="line"> screen.Loop(slider);</div>
<div class="line">}</div>
<div class="line"> </div>
<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><!-- fragment --><h1><a class="anchor" id="slider_direction"></a>
slider_direction</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/slider_direction">Demo</a> </p><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">#include &lt;array&gt;</span> <span class="comment">// for array</span></div>
<div class="line"><span class="preprocessor">#include &lt;cmath&gt;</span> <span class="comment">// for sin</span></div>
<div class="line"><span class="preprocessor">#include &lt;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&gt;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &lt;<a class="code" href="component__options_8hpp.html">ftxui/component/component_options.hpp</a>&gt;</span> <span class="comment">// for SliderOption</span></div>
<div class="line"><span class="preprocessor">#include &lt;<a class="code" href="direction_8hpp.html">ftxui/dom/direction.hpp</a>&gt;</span> <span class="comment">// for Direction, Direction::Up</span></div>
<div class="line"><span class="preprocessor">#include &lt;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&gt;</span> <span class="comment">// for size, GREATER_THAN, HEIGHT</span></div>
<div class="line"><span class="preprocessor">#include &lt;<a class="code" href="ref_8hpp.html">ftxui/util/ref.hpp</a>&gt;</span> <span class="comment">// for ConstRef, Ref</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for shared_ptr, __shared_ptr_access</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Horizontal, Slider, operator|=</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::TerminalOutput();</div>
<div class="line"> std::array&lt;int, 30&gt; values;</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">size_t</span> i = 0; i &lt; values.size(); ++i) {</div>
<div class="line"> values[i] = 50 + 20 * std::sin(i * 0.3);</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> layout_horizontal = Container::Horizontal({});</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keyword">auto</span>&amp; value : values) {</div>
<div class="line"> <span class="comment">// In C++17:</span></div>
<div class="line"> <a class="code hl_struct" href="structftxui_1_1SliderOption.html">SliderOption&lt;int&gt;</a> option;</div>
<div class="line"> option.<a class="code hl_variable" href="structftxui_1_1SliderOption.html#ab256d6c86a100045ed2329da289dce3a">value</a> = &amp;value;</div>
<div class="line"> option.<a class="code hl_variable" href="structftxui_1_1SliderOption.html#abd146f0de5789f02aee07c54e819099b">max</a> = 100;</div>
<div class="line"> option.<a class="code hl_variable" href="structftxui_1_1SliderOption.html#a752366b00bdf7bba57a18e239e86e2e1">increment</a> = 5;</div>
<div class="line"> option.<a class="code hl_variable" href="structftxui_1_1SliderOption.html#a53421c695d00016ab925777d423b4eb6">direction</a> = Direction::Up;</div>
<div class="line"> layout_horizontal-&gt;Add(Slider&lt;int&gt;(option));</div>
<div class="line"> </div>
<div class="line"> <span class="comment">/* In C++20:</span></div>
<div class="line"><span class="comment"> layout_horizontal-&gt;Add(Slider&lt;int&gt;({</span></div>
<div class="line"><span class="comment"> .value = &amp;values[i],</span></div>
<div class="line"><span class="comment"> .max = 100,</span></div>
<div class="line"><span class="comment"> .increment = 5,</span></div>
<div class="line"><span class="comment"> .direction = Direction::Up,</span></div>
<div class="line"><span class="comment"> }));</span></div>
<div class="line"><span class="comment"> */</span></div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> layout_horizontal |= size(HEIGHT, GREATER_THAN, 20);</div>
<div class="line"> </div>
<div class="line"> screen.Loop(layout_horizontal);</div>
<div class="line">}</div>
<div class="ttc" id="adirection_8hpp_html"><div class="ttname"><a href="direction_8hpp.html">direction.hpp</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="slider_rgb"></a>
slider_rgb</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/slider_rgb">Demo</a> </p><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">#include &lt;memory&gt;</span> <span class="comment">// for allocator, shared_ptr, __shared_ptr_access</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for char_traits, operator+, to_string</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Slider, Renderer, Vertical</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for separator, operator|, Element, size, text, vbox, xflex, bgcolor, hbox, GREATER_THAN, WIDTH, border, HEIGHT, LESS_THAN</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="color_8hpp.html">ftxui/screen/color.hpp</a>&quot;</span> <span class="comment">// for Color</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</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="slider__rgb_8cpp.html#ac5038fb3740e7d9137dfb4969a9a8035">ColorTile</a>(<span class="keywordtype">int</span> red, <span class="keywordtype">int</span> green, <span class="keywordtype">int</span> blue) {</div>
<div class="line"> <span class="keywordflow">return</span> text(<span class="stringliteral">&quot;&quot;</span>) | size(WIDTH, GREATER_THAN, 14) |</div>
<div class="line"> size(HEIGHT, GREATER_THAN, 7) | bgcolor(Color::RGB(red, green, blue));</div>
<div class="line">}</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="slider__rgb_8cpp.html#acfbf512737b012658b0c3b6997da144e">ColorString</a>(<span class="keywordtype">int</span> red, <span class="keywordtype">int</span> green, <span class="keywordtype">int</span> blue) {</div>
<div class="line"> <span class="keywordflow">return</span> text(<span class="stringliteral">&quot;RGB = (&quot;</span> + <span class="comment">//</span></div>
<div class="line"> std::to_string(red) + <span class="stringliteral">&quot;,&quot;</span> + <span class="comment">//</span></div>
<div class="line"> std::to_string(green) + <span class="stringliteral">&quot;,&quot;</span> + <span class="comment">//</span></div>
<div class="line"> std::to_string(blue) + <span class="stringliteral">&quot;)&quot;</span> <span class="comment">//</span></div>
<div class="line"> );</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keywordtype">int</span> red = 128;</div>
<div class="line"> <span class="keywordtype">int</span> green = 25;</div>
<div class="line"> <span class="keywordtype">int</span> blue = 100;</div>
<div class="line"> <span class="keyword">auto</span> slider_red = Slider(<span class="stringliteral">&quot;Red :&quot;</span>, &amp;red, 0, 255, 1);</div>
<div class="line"> <span class="keyword">auto</span> slider_green = Slider(<span class="stringliteral">&quot;Green:&quot;</span>, &amp;green, 0, 255, 1);</div>
<div class="line"> <span class="keyword">auto</span> slider_blue = Slider(<span class="stringliteral">&quot;Blue :&quot;</span>, &amp;blue, 0, 255, 1);</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> container = Container::Vertical({</div>
<div class="line"> slider_red,</div>
<div class="line"> slider_green,</div>
<div class="line"> slider_blue,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> renderer = Renderer(container, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> hbox({</div>
<div class="line"> <a class="code hl_function" href="slider__rgb_8cpp.html#ac5038fb3740e7d9137dfb4969a9a8035">ColorTile</a>(red, green, blue),</div>
<div class="line"> separator(),</div>
<div class="line"> vbox({</div>
<div class="line"> slider_red-&gt;Render(),</div>
<div class="line"> separator(),</div>
<div class="line"> slider_green-&gt;Render(),</div>
<div class="line"> separator(),</div>
<div class="line"> slider_blue-&gt;Render(),</div>
<div class="line"> separator(),</div>
<div class="line"> <a class="code hl_function" href="slider__rgb_8cpp.html#acfbf512737b012658b0c3b6997da144e">ColorString</a>(red, green, blue),</div>
<div class="line"> }) | xflex,</div>
<div class="line"> }) |</div>
<div class="line"> border | size(WIDTH, LESS_THAN, 80);</div>
<div class="line"> });</div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::TerminalOutput();</div>
<div class="line"> screen.Loop(renderer);</div>
<div class="line">}</div>
<div class="ttc" id="aslider__rgb_8cpp_html_ac5038fb3740e7d9137dfb4969a9a8035"><div class="ttname"><a href="slider__rgb_8cpp.html#ac5038fb3740e7d9137dfb4969a9a8035">ColorTile</a></div><div class="ttdeci">Element ColorTile(int red, int green, int blue)</div><div class="ttdef"><b>Definition</b> <a href="slider__rgb_8cpp_source.html#l00016">slider_rgb.cpp:16</a></div></div>
<div class="ttc" id="aslider__rgb_8cpp_html_acfbf512737b012658b0c3b6997da144e"><div class="ttname"><a href="slider__rgb_8cpp.html#acfbf512737b012658b0c3b6997da144e">ColorString</a></div><div class="ttdeci">Element ColorString(int red, int green, int blue)</div><div class="ttdef"><b>Definition</b> <a href="slider__rgb_8cpp_source.html#l00021">slider_rgb.cpp:21</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="tab_horizontal"></a>
tab_horizontal</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/tab_horizontal">Demo</a> </p><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">#include &lt;memory&gt;</span> <span class="comment">// for allocator, __shared_ptr_access, shared_ptr</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for string, basic_string</span></div>
<div class="line"><span class="preprocessor">#include &lt;vector&gt;</span> <span class="comment">// for vector</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Radiobox, Renderer, Tab, Toggle, Vertical</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for Element, separator, operator|, vbox, border</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> std::vector&lt;std::string&gt; tab_values{</div>
<div class="line"> <span class="stringliteral">&quot;tab_1&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;tab_2&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;tab_3&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> <span class="keywordtype">int</span> tab_selected = 0;</div>
<div class="line"> <span class="keyword">auto</span> tab_toggle = Toggle(&amp;tab_values, &amp;tab_selected);</div>
<div class="line"> </div>
<div class="line"> std::vector&lt;std::string&gt; tab_1_entries{</div>
<div class="line"> <span class="stringliteral">&quot;Forest&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Water&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;I don&#39;t know&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> <span class="keywordtype">int</span> tab_1_selected = 0;</div>
<div class="line"> </div>
<div class="line"> std::vector&lt;std::string&gt; tab_2_entries{</div>
<div class="line"> <span class="stringliteral">&quot;Hello&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Hi&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Hay&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> <span class="keywordtype">int</span> tab_2_selected = 0;</div>
<div class="line"> </div>
<div class="line"> std::vector&lt;std::string&gt; tab_3_entries{</div>
<div class="line"> <span class="stringliteral">&quot;Table&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Nothing&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Is&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Empty&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> <span class="keywordtype">int</span> tab_3_selected = 0;</div>
<div class="line"> <span class="keyword">auto</span> tab_container = Container::Tab(</div>
<div class="line"> {</div>
<div class="line"> Radiobox(&amp;tab_1_entries, &amp;tab_1_selected),</div>
<div class="line"> Radiobox(&amp;tab_2_entries, &amp;tab_2_selected),</div>
<div class="line"> Radiobox(&amp;tab_3_entries, &amp;tab_3_selected),</div>
<div class="line"> },</div>
<div class="line"> &amp;tab_selected);</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> container = Container::Vertical({</div>
<div class="line"> tab_toggle,</div>
<div class="line"> tab_container,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> renderer = Renderer(container, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> tab_toggle-&gt;Render(),</div>
<div class="line"> separator(),</div>
<div class="line"> tab_container-&gt;Render(),</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::TerminalOutput();</div>
<div class="line"> screen.Loop(renderer);</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="tab_vertical"></a>
tab_vertical</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/tab_vertical">Demo</a> </p><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">#include &lt;memory&gt;</span> <span class="comment">// for allocator, __shared_ptr_access, shared_ptr</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for string, basic_string</span></div>
<div class="line"><span class="preprocessor">#include &lt;vector&gt;</span> <span class="comment">// for vector</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Radiobox, Horizontal, Menu, Renderer, Tab</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for Element, separator, hbox, operator|, border</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> std::vector&lt;std::string&gt; tab_values{</div>
<div class="line"> <span class="stringliteral">&quot;tab_1&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;tab_2&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;tab_3&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> <span class="keywordtype">int</span> tab_selected = 0;</div>
<div class="line"> <span class="keyword">auto</span> tab_menu = Menu(&amp;tab_values, &amp;tab_selected);</div>
<div class="line"> </div>
<div class="line"> std::vector&lt;std::string&gt; tab_1_entries{</div>
<div class="line"> <span class="stringliteral">&quot;Forest&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Water&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;I don&#39;t know&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> <span class="keywordtype">int</span> tab_1_selected = 0;</div>
<div class="line"> </div>
<div class="line"> std::vector&lt;std::string&gt; tab_2_entries{</div>
<div class="line"> <span class="stringliteral">&quot;Hello&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Hi&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Hay&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> <span class="keywordtype">int</span> tab_2_selected = 0;</div>
<div class="line"> </div>
<div class="line"> std::vector&lt;std::string&gt; tab_3_entries{</div>
<div class="line"> <span class="stringliteral">&quot;Table&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Nothing&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Is&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Empty&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> <span class="keywordtype">int</span> tab_3_selected = 0;</div>
<div class="line"> <span class="keyword">auto</span> tab_container = Container::Tab(</div>
<div class="line"> {</div>
<div class="line"> Radiobox(&amp;tab_1_entries, &amp;tab_1_selected),</div>
<div class="line"> Radiobox(&amp;tab_2_entries, &amp;tab_2_selected),</div>
<div class="line"> Radiobox(&amp;tab_3_entries, &amp;tab_3_selected),</div>
<div class="line"> },</div>
<div class="line"> &amp;tab_selected);</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> container = Container::Horizontal({</div>
<div class="line"> tab_menu,</div>
<div class="line"> tab_container,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> renderer = Renderer(container, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> hbox({</div>
<div class="line"> tab_menu-&gt;Render(),</div>
<div class="line"> separator(),</div>
<div class="line"> tab_container-&gt;Render(),</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::TerminalOutput();</div>
<div class="line"> screen.Loop(renderer);</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="textarea"></a>
textarea</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/textarea">Demo</a> </p><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">#include &lt;memory&gt;</span> <span class="comment">// for allocator, __shared_ptr_access, shared_ptr</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for string</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Input, Renderer, ResizableSplitLeft</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase, Component</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for operator|, separator, text, Element, flex, vbox, border</span></div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"> std::string content_1;</div>
<div class="line"> std::string content_2;</div>
<div class="line"> <span class="keyword">auto</span> textarea_1 = Input(&amp;content_1);</div>
<div class="line"> <span class="keyword">auto</span> textarea_2 = Input(&amp;content_2);</div>
<div class="line"> <span class="keywordtype">int</span> size = 50;</div>
<div class="line"> <span class="keyword">auto</span> layout = ResizableSplitLeft(textarea_1, textarea_2, &amp;size);</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> component = Renderer(layout, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;Input:&quot;</span>),</div>
<div class="line"> separator(),</div>
<div class="line"> layout-&gt;Render() | flex,</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::Fullscreen();</div>
<div class="line"> screen.Loop(component);</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="toggle"></a>
toggle</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/toggle">Demo</a> </p><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">#include &lt;memory&gt;</span> <span class="comment">// for allocator, __shared_ptr_access</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for string, basic_string</span></div>
<div class="line"><span class="preprocessor">#include &lt;vector&gt;</span> <span class="comment">// for vector</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Toggle, Renderer, Vertical</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for Component, ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for text, hbox, vbox, Element</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> std::vector&lt;std::string&gt; toggle_1_entries = {</div>
<div class="line"> <span class="stringliteral">&quot;On&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Off&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> std::vector&lt;std::string&gt; toggle_2_entries = {</div>
<div class="line"> <span class="stringliteral">&quot;Enabled&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Disabled&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> std::vector&lt;std::string&gt; toggle_3_entries = {</div>
<div class="line"> <span class="stringliteral">&quot;10€&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;0€&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> std::vector&lt;std::string&gt; toggle_4_entries = {</div>
<div class="line"> <span class="stringliteral">&quot;Nothing&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;One element&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Several elements&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <span class="keywordtype">int</span> toggle_1_selected = 0;</div>
<div class="line"> <span class="keywordtype">int</span> toggle_2_selected = 0;</div>
<div class="line"> <span class="keywordtype">int</span> toggle_3_selected = 0;</div>
<div class="line"> <span class="keywordtype">int</span> toggle_4_selected = 0;</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> toggle_1 = Toggle(&amp;toggle_1_entries, &amp;toggle_1_selected);</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> toggle_2 = Toggle(&amp;toggle_2_entries, &amp;toggle_2_selected);</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> toggle_3 = Toggle(&amp;toggle_3_entries, &amp;toggle_3_selected);</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> toggle_4 = Toggle(&amp;toggle_4_entries, &amp;toggle_4_selected);</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> container = Container::Vertical({</div>
<div class="line"> toggle_1,</div>
<div class="line"> toggle_2,</div>
<div class="line"> toggle_3,</div>
<div class="line"> toggle_4,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> renderer = Renderer(container, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;Choose your options:&quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;&quot;</span>),</div>
<div class="line"> hbox(text(<span class="stringliteral">&quot; * Poweroff on startup : &quot;</span>), toggle_1-&gt;Render()),</div>
<div class="line"> hbox(text(<span class="stringliteral">&quot; * Out of process : &quot;</span>), toggle_2-&gt;Render()),</div>
<div class="line"> hbox(text(<span class="stringliteral">&quot; * Price of the information : &quot;</span>), toggle_3-&gt;Render()),</div>
<div class="line"> hbox(text(<span class="stringliteral">&quot; * Number of elements : &quot;</span>), toggle_4-&gt;Render()),</div>
<div class="line"> });</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::TerminalOutput();</div>
<div class="line"> screen.Loop(renderer);</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="window"></a>
window</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/window">Demo</a> </p><div class="fragment"><div class="line"><span class="comment">// Copyright 2023 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">#include &lt;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&gt;</span></div>
<div class="line"><span class="preprocessor">#include &lt;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&gt;</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="scrollbar_8cpp.html#a83db372d294b69185f7a26148935cfc3">DummyWindowContent</a>() {</div>
<div class="line"> <span class="keyword">class </span>Impl : <span class="keyword">public</span> <a class="code hl_class" href="group__component.html#classftxui_1_1ComponentBase">ComponentBase</a> {</div>
<div class="line"> <span class="keyword">private</span>:</div>
<div class="line"> <span class="keywordtype">bool</span> checked[3] = {<span class="keyword">false</span>, <span class="keyword">false</span>, <span class="keyword">false</span>};</div>
<div class="line"> <span class="keywordtype">float</span> slider = 50;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">public</span>:</div>
<div class="line"> Impl() {</div>
<div class="line"> Add(Container::Vertical({</div>
<div class="line"> Checkbox(<span class="stringliteral">&quot;Check me&quot;</span>, &amp;checked[0]),</div>
<div class="line"> Checkbox(<span class="stringliteral">&quot;Check me&quot;</span>, &amp;checked[1]),</div>
<div class="line"> Checkbox(<span class="stringliteral">&quot;Check me&quot;</span>, &amp;checked[2]),</div>
<div class="line"> Slider(<span class="stringliteral">&quot;Slider&quot;</span>, &amp;slider, 0.f, 100.f),</div>
<div class="line"> }));</div>
<div class="line"> }</div>
<div class="line"> };</div>
<div class="line"> <span class="keywordflow">return</span> Make&lt;Impl&gt;();</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keywordtype">int</span> window_1_left = 20;</div>
<div class="line"> <span class="keywordtype">int</span> window_1_top = 10;</div>
<div class="line"> <span class="keywordtype">int</span> window_1_width = 40;</div>
<div class="line"> <span class="keywordtype">int</span> window_1_height = 20;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> window_1 = <a class="code hl_function" href="menu__multiple_8cpp.html#ac2013764d7f0c7eb57876c3755e98bb3">Window</a>({</div>
<div class="line"> .inner = <a class="code hl_function" href="scrollbar_8cpp.html#a83db372d294b69185f7a26148935cfc3">DummyWindowContent</a>(),</div>
<div class="line"> .title = <span class="stringliteral">&quot;First window&quot;</span>,</div>
<div class="line"> .left = &amp;window_1_left,</div>
<div class="line"> .top = &amp;window_1_top,</div>
<div class="line"> .width = &amp;window_1_width,</div>
<div class="line"> .height = &amp;window_1_height,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> window_2 = <a class="code hl_function" href="menu__multiple_8cpp.html#ac2013764d7f0c7eb57876c3755e98bb3">Window</a>({</div>
<div class="line"> .inner = <a class="code hl_function" href="scrollbar_8cpp.html#a83db372d294b69185f7a26148935cfc3">DummyWindowContent</a>(),</div>
<div class="line"> .title = <span class="stringliteral">&quot;My window&quot;</span>,</div>
<div class="line"> .left = 40,</div>
<div class="line"> .top = 20,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> window_3 = <a class="code hl_function" href="menu__multiple_8cpp.html#ac2013764d7f0c7eb57876c3755e98bb3">Window</a>({</div>
<div class="line"> .inner = <a class="code hl_function" href="scrollbar_8cpp.html#a83db372d294b69185f7a26148935cfc3">DummyWindowContent</a>(),</div>
<div class="line"> .title = <span class="stringliteral">&quot;My window&quot;</span>,</div>
<div class="line"> .left = 60,</div>
<div class="line"> .top = 30,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> window_4 = <a class="code hl_function" href="menu__multiple_8cpp.html#ac2013764d7f0c7eb57876c3755e98bb3">Window</a>({</div>
<div class="line"> .inner = <a class="code hl_function" href="scrollbar_8cpp.html#a83db372d294b69185f7a26148935cfc3">DummyWindowContent</a>(),</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> window_5 = <a class="code hl_function" href="menu__multiple_8cpp.html#ac2013764d7f0c7eb57876c3755e98bb3">Window</a>({});</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> window_container = Container::Stacked({</div>
<div class="line"> window_1,</div>
<div class="line"> window_2,</div>
<div class="line"> window_3,</div>
<div class="line"> window_4,</div>
<div class="line"> window_5,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> display_win_1 = Renderer([&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> text(<span class="stringliteral">&quot;window_1: &quot;</span> + <span class="comment">//</span></div>
<div class="line"> std::to_string(window_1_width) + <span class="stringliteral">&quot;x&quot;</span> +</div>
<div class="line"> std::to_string(window_1_height) + <span class="stringliteral">&quot; + &quot;</span> +</div>
<div class="line"> std::to_string(window_1_left) + <span class="stringliteral">&quot;,&quot;</span> +</div>
<div class="line"> std::to_string(window_1_top));</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> layout = Container::Vertical({</div>
<div class="line"> display_win_1,</div>
<div class="line"> window_container,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::Fullscreen();</div>
<div class="line"> screen.Loop(layout);</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> EXIT_SUCCESS;</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="with_restored_io"></a>
with_restored_io</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/with_restored_io">Demo</a> </p><div class="fragment"><div class="line"><span class="comment">// Copyright 2022 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">#include &lt;cstdlib&gt;</span> <span class="comment">// for system, EXIT_SUCCESS</span></div>
<div class="line"><span class="preprocessor">#include &lt;iostream&gt;</span> <span class="comment">// for operator&lt;&lt;, basic_ostream, basic_ostream::operator&lt;&lt;, cout, endl, flush, ostream, basic_ostream&lt;&gt;::__ostream_type, cin</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for shared_ptr, __shared_ptr_access, allocator</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for getline, string</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="captured__mouse_8hpp.html">ftxui/component/captured_mouse.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Button, Horizontal, Renderer</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for operator|, filler, Element, borderEmpty, hbox, size, paragraph, vbox, LESS_THAN, border, center, HEIGHT, WIDTH</span></div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::Fullscreen();</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// When pressing this button, &quot;screen.WithRestoredIO&quot; will execute the</span></div>
<div class="line"> <span class="comment">// temporarily uninstall the terminal hook and execute the provided callback</span></div>
<div class="line"> <span class="comment">// function. This allow running the application in a non-interactive mode.</span></div>
<div class="line"> <span class="keyword">auto</span> btn_run = Button(<span class="stringliteral">&quot;Execute with restored IO&quot;</span>, screen.WithRestoredIO([] {</div>
<div class="line"> std::cout &lt;&lt; <span class="stringliteral">&quot;This is a child program using stdin/stdout.&quot;</span> &lt;&lt; std::endl;</div>
<div class="line"> for (int i = 0; i &lt; 10; ++i) {</div>
<div class="line"> std::cout &lt;&lt; <span class="stringliteral">&quot;Please enter 10 strings (&quot;</span> &lt;&lt; i &lt;&lt; <span class="stringliteral">&quot;/10)&quot;</span> &lt;&lt; std::flush;</div>
<div class="line"> std::string input;</div>
<div class="line"> std::getline(std::cin, input);</div>
<div class="line"> }</div>
<div class="line"> }));</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> btn_quit = Button(<span class="stringliteral">&quot;Quit&quot;</span>, screen.ExitLoopClosure());</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> layout = Container::Horizontal({</div>
<div class="line"> btn_run,</div>
<div class="line"> btn_quit,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> renderer = Renderer(layout, [&amp;] {</div>
<div class="line"> <span class="keyword">auto</span> explanation = paragraph(</div>
<div class="line"> <span class="stringliteral">&quot;After clicking this button, the ScreenInteractive will be &quot;</span></div>
<div class="line"> <span class="stringliteral">&quot;suspended and access to stdin/stdout will temporarilly be &quot;</span></div>
<div class="line"> <span class="stringliteral">&quot;restore for running a function.&quot;</span>);</div>
<div class="line"> <span class="keyword">auto</span> element = vbox({</div>
<div class="line"> explanation | borderEmpty,</div>
<div class="line"> hbox({</div>
<div class="line"> btn_run-&gt;Render(),</div>
<div class="line"> filler(),</div>
<div class="line"> btn_quit-&gt;Render(),</div>
<div class="line"> }),</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> element = element | borderEmpty | border | size(WIDTH, LESS_THAN, 80) |</div>
<div class="line"> size(HEIGHT, LESS_THAN, 20) | center;</div>
<div class="line"> <span class="keywordflow">return</span> element;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> screen.Loop(renderer);</div>
<div class="line"> <span class="keywordflow">return</span> EXIT_SUCCESS;</div>
<div class="line">}</div>
</div><!-- fragment --> </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="navelem"><a class="el" href="module-component.html">ftxui / component</a></li>
<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>