Files
FTXUI/zh-CH/module-component-examples.html
2025-12-13 19:38:34 +00:00

4785 lines
490 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!-- HTML header for doxygen 1.9.8-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh">
<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 -->
<!-- 制作者 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','搜索',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">载入中...</div>
<div class="SRStatus" id="Searching">搜索中...</div>
<div class="SRStatus" id="NoMatches">未找到</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>目录</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="#resizable_split_clamp">resizable_split_clamp</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">// 版权所有 2020 Arthur Sonzogni. 保留所有权利。</span></div>
<div class="line"><span class="comment">// 本源代码的使用受 MIT 许可证的约束,该许可证可在</span></div>
<div class="line"><span class="comment">// LICENSE 文件中找到。</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">// 这是一个辅助函数,用于创建具有自定义样式的按钮。</span></div>
<div class="line"><span class="comment">// 样式由一个 lambda 函数定义,该函数接受一个 EntryState 并</span></div>
<div class="line"><span class="comment">// 返回一个 Element。</span></div>
<div class="line"><span class="comment">// 我们使用 `center` 来使文本在按钮内居中,然后使用 `border` 来</span></div>
<div class="line"><span class="comment">// 在按钮周围添加边框,最后使用 `flex` 来使按钮填充</span></div>
<div class="line"><span class="comment">// 可用空间。</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">// 组件树。这定义了如何使用键盘导航。</span></div>
<div class="line"><span class="comment">// 选定的 `row` 共享以获得网格布局。</span></div>
<div class="line"> </div>
<div class="line"> <span class="comment">// 修改它们在屏幕上的渲染方式:</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>定义</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>定义</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">AnimatedButton 组件的选项。</div><div class="ttdef"><b>定义</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">#include &quot;ftxui/component/component_base.hpp&quot; // 用于 ComponentBase</div><div class="ttdef"><b>定义</b> <a href="animation_8hpp_source.html#l00009">animation.hpp:9</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">来自 |ButtonOption|、|CheckboxOption|、 |RadioboxOption|、|MenuEntryOption|、|MenuOption| 的转换参数。</div><div class="ttdef"><b>定义</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">// 版权所有 2020 Arthur Sonzogni. 保留所有权利。</span></div>
<div class="line"><span class="comment">// 此源代码的使用受 MIT 许可的约束MIT 许可可在</span></div>
<div class="line"><span class="comment">// LICENSE 文件中找到。</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">// 组件树。这定义了如何使用键盘进行导航。</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">// 修改它们在屏幕上的渲染方式:</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">// 版权所有 2022 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 此源代码的使用受 MIT 许可证的管辖,该许可证可在以下文件中找到:</span></div>
<div class="line"><span class="comment">// LICENSE 文件。</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// 用于 allocator, __shared_ptr_access, shared_ptr</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// 用于 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">// 用于 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">// 用于 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">// 用于 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">// 用于 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">// 用于 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">// 用于 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">// 用于 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> <a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a> = 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(<a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a>);</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> 0;</div>
<div class="line">}</div>
<div class="ttc" id="awith__restored__io_8cpp_html_a63598717de7973f11f57a488d6424e4a"><div class="ttname"><a href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a></div><div class="ttdeci">auto renderer</div><div class="ttdef"><b>定义</b> <a href="with__restored__io_8cpp_source.html#l00037">with_restored_io.cpp:37</a></div></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">// 版权所有 2020 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 本源代码受 MIT 许可证的约束,可在</span></div>
<div class="line"><span class="comment">// LICENSE 文件中找到。</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// 用于 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">// 用于 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">// 用于 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">// 用于 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">// 用于 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">// 用于 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">// 用于 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">// 用于 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">// 版权所有 2021 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 此源代码的使用受 MIT 许可证的约束,该许可证可在以下位置找到</span></div>
<div class="line"><span class="comment">// LICENSED 文件。</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">// 一个跟随鼠标的三角形,使用盲文符号。</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;多条线(盲文)&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">// 一个跟随鼠标的三角形,使用块状符号。</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;多条线(块状)&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">// 一个跟随鼠标的圆形,使用盲文符号。</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;一个圆形(盲文)&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">// 一个跟随鼠标的圆形,使用块状符号。</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;一个圆形(块状)&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">// 一个跟随鼠标的填充圆形,使用盲文符号。</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;一个填充圆形(盲文)&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">// 一个跟随鼠标的填充圆形,使用块状符号。</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;一个填充圆形(块状)&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">// 一个跟随鼠标的椭圆形,使用盲文符号。</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;一个椭圆形(盲文)&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">// 一个跟随鼠标的椭圆形,使用块状符号。</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;一个椭圆形(块状)&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">// 一个跟随鼠标的填充椭圆形,使用盲文符号。</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;一个填充椭圆形(盲文)&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">// 一个跟随鼠标的填充椭圆形,使用块状符号。</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;一个填充椭圆形(块状)&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">// 跟随鼠标的文本</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;一段文本&quot;</span>);</div>
<div class="line"> c.DrawText(mouse_x, mouse_y, <span class="stringliteral">&quot;这是一段带有效果的文本&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;一个图表&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;一个对称填充图表&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;一个二维高斯图&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">// 这捕获了鼠标的最后位置。</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;线(盲文)&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;线(块状)&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;圆形(盲文)&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;圆形(块状)&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;填充圆形(盲文)&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;填充圆形(块状)&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;椭圆形(盲文)&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;椭圆形(块状)&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;填充椭圆形(盲文)&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;填充椭圆形(块状)&quot;</span>,</div>
<div class="line"> </div>
<div class="line"> <span class="stringliteral">&quot;图表1 简单&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;图表2 填充&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;图表3 3D&quot;</span>,</div>
<div class="line"> </div>
<div class="line"> <span class="stringliteral">&quot;文本&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">// 添加一些分隔符来装饰整个组件:</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>定义</b> <a href="event_8hpp_source.html#l00108">event.hpp:108</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>定义</b> <a href="event_8hpp_source.html#l00143">event.hpp:143</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">代表一个事件。它可以是按键事件、终端大小调整等等...</div><div class="ttdef"><b>定义</b> <a href="event_8hpp_source.html#l00028">event.hpp:28</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 是一个与绘图操作相关的可绘制缓冲区。</div><div class="ttdef"><b>定义</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>定义</b> <a href="pixel_8hpp_source.html#l00048">pixel.hpp:48</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>定义</b> <a href="pixel_8hpp_source.html#l00028">pixel.hpp:28</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>定义</b> <a href="pixel_8hpp_source.html#l00032">pixel.hpp:32</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">一个 Unicode 字符及其相关样式。</div><div class="ttdef"><b>定义</b> <a href="pixel_8hpp_source.html#l00014">pixel.hpp:14</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">// 版权所有 2021 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 本源代码的使用受 MIT 许可协议的约束,该协议可在 LICENSE 文件中找到。</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">// 版权所有 2020 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 本源代码的使用受 MIT 许可证的管辖,该许可证可在</span></div>
<div class="line"><span class="comment">// LICENSE 文件中找到。</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> <a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a> = 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) | <a class="code hl_function" href="group__dom.html#gae8537acd423d47cf07e61bd774fb1098">border</a>;</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(<a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a>);</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> 0;</div>
<div class="line">}</div>
<div class="ttc" id="agroup__dom_html_gae8537acd423d47cf07e61bd774fb1098"><div class="ttname"><a href="group__dom.html#gae8537acd423d47cf07e61bd774fb1098">border</a></div><div class="ttdeci">Element border(Element child)</div><div class="ttdoc">在元素周围绘制边框。</div><div class="ttdef"><b>定义</b> <a href="src_2ftxui_2dom_2border_8cpp_source.html#l00225">src/ftxui/dom/border.cpp:225</a></div></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. 保留所有权利。</span></div>
<div class="line"><span class="comment">// 此源代码的使用受 MIT 许可协议的约束,具体请参阅</span></div>
<div class="line"><span class="comment">// LICENSE 文件。</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">// 接受组件列表,垂直显示它们,向右偏移一列。</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>定义</b> <a href="examples_2component_2collapsible_8cpp_source.html#l00017">examples/component/collapsible.cpp:17</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>定义</b> <a href="examples_2component_2collapsible_8cpp_source.html#l00027">examples/component/collapsible.cpp:27</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>定义</b> <a href="component__base_8hpp_source.html#l00023">component_base.hpp:23</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">// 版权所有 2021 Arthur Sonzogni. 保留所有权利。</span></div>
<div class="line"><span class="comment">// 本源代码的使用受 MIT 许可证的约束,该许可证可在以下位置找到:</span></div>
<div class="line"><span class="comment">// LICENSE 文件。</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">// 一个示例,展示如何将多个组件组合成一个并保持它们的</span></div>
<div class="line"><span class="comment">// 交互性。</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">// 渲染器用新的渲染函数装饰其子组件。子组件对事件的反应方式</span></div>
<div class="line"> <span class="comment">// 保持不变。</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::Horizontal</span></div>
<div class="line"> <span class="comment">// 它并排渲染其子组件。它保持它们的交互性并</span></div>
<div class="line"> <span class="comment">// 提供使用箭头键从一个导航到另一个的逻辑。</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">// 感谢 Chris Morgan 提供此示例!</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">// 本源代码的使用受MIT许可证的约束该许可证可在LICENSE文件中找到。</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">// 创建一个组件,用于计算绘制的帧数和处理的事件数。</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> <a class="code hl_variable" href="with__restored__io_8cpp.html#a1a8bb385160d2854b0c2ebb85db2d212">EXIT_SUCCESS</a>;</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 是一个管理组件事件循环的类。</div><div class="ttdef"><b>定义</b> <a href="loop_8hpp_source.html#l00055">loop.hpp:55</a></div></div>
<div class="ttc" id="aloop_8hpp_html"><div class="ttname"><a href="loop_8hpp.html">loop.hpp</a></div></div>
<div class="ttc" id="awith__restored__io_8cpp_html_a1a8bb385160d2854b0c2ebb85db2d212"><div class="ttname"><a href="with__restored__io_8cpp.html#a1a8bb385160d2854b0c2ebb85db2d212">EXIT_SUCCESS</a></div><div class="ttdeci">return EXIT_SUCCESS</div><div class="ttdef"><b>定义</b> <a href="with__restored__io_8cpp_source.html#l00057">with_restored_io.cpp:57</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">// 版权所有 2020 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 本源代码的使用受 MIT 许可的约束,该许可可在 LICENSE 文件中找到。</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> <a class="code hl_variable" href="with__restored__io_8cpp.html#a73bcbd53d13c2f16ee8bdc6532798bd4">layout</a> = 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(<a class="code hl_variable" href="with__restored__io_8cpp.html#a73bcbd53d13c2f16ee8bdc6532798bd4">layout</a>);</div>
<div class="line">}</div>
<div class="ttc" id="awith__restored__io_8cpp_html_a73bcbd53d13c2f16ee8bdc6532798bd4"><div class="ttname"><a href="with__restored__io_8cpp.html#a73bcbd53d13c2f16ee8bdc6532798bd4">layout</a></div><div class="ttdeci">auto layout</div><div class="ttdef"><b>定义</b> <a href="with__restored__io_8cpp_source.html#l00032">with_restored_io.cpp:32</a></div></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">// 版权所有 2020 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 此源代码的使用受 MIT 许可证的约束,该许可证可在</span></div>
<div class="line"><span class="comment">// LICENSE 文件中找到。</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) | <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(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 | <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(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) | <a class="code hl_function" href="group__dom.html#gaf20f7d6fb275d109f0bdc01a2e4d3f3e">borderEmpty</a>;</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 |= <a class="code hl_function" href="group__dom.html#gaf20f7d6fb275d109f0bdc01a2e4d3f3e">borderEmpty</a>;</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) | <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(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 | <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(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="agroup__dom_html_gaaac1622d43662a6a02113d9230a4fdd4"><div class="ttname"><a href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a></div><div class="ttdeci">Element bgcolor(const LinearGradient &amp;gradient, Element child)</div><div class="ttdoc">使用线性渐变效果设置元素的背景色。</div><div class="ttdef"><b>定义</b> <a href="src_2ftxui_2dom_2linear__gradient_8cpp_source.html#l00255">src/ftxui/dom/linear_gradient.cpp:255</a></div></div>
<div class="ttc" id="agroup__dom_html_gaf20f7d6fb275d109f0bdc01a2e4d3f3e"><div class="ttname"><a href="group__dom.html#gaf20f7d6fb275d109f0bdc01a2e4d3f3e">borderEmpty</a></div><div class="ttdeci">Element borderEmpty(Element child)</div><div class="ttdoc">在元素周围绘制一个空边框。</div><div class="ttdef"><b>定义</b> <a href="src_2ftxui_2dom_2border_8cpp_source.html#l00475">src/ftxui/dom/border.cpp:475</a></div></div>
<div class="ttc" id="anamespaceftxui_html_a2bc31f2d685189e5c61d2293a1f51b4f"><div class="ttname"><a href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">ftxui::Element</a></div><div class="ttdeci">std::shared_ptr&lt; Node &gt; Element</div><div class="ttdef"><b>定义</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">// 版权所有 2020 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 此源代码的使用受 MIT 许可证的约束,该许可证可在</span></div>
<div class="line"><span class="comment">// LICENSE 文件中找到。</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 = <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(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"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::HSV(index * 25, 255, 255)) |</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(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 | <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(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"> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(text(<span class="stringliteral">&quot;FlexboxConfig::Direction&quot;</span>),</div>
<div class="line"> radiobox_direction-&gt;Render()),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(text(<span class="stringliteral">&quot;FlexboxConfig::Wrap&quot;</span>), radiobox_wrap-&gt;Render()),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(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"> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(text(<span class="stringliteral">&quot;FlexboxConfig::JustifyContent&quot;</span>),</div>
<div class="line"> radiobox_justify_content-&gt;Render()),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(text(<span class="stringliteral">&quot;FlexboxConfig::AlignItems&quot;</span>),</div>
<div class="line"> radiobox_align_items-&gt;Render()),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(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 | <a class="code hl_function" href="group__dom.html#gae8537acd423d47cf07e61bd774fb1098">border</a>,</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>定义</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>定义</b> <a href="flexbox__config_8hpp_source.html#l00095">flexbox_config.hpp:95</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>定义</b> <a href="flexbox__config_8hpp_source.html#l00080">flexbox_config.hpp:80</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>定义</b> <a href="flexbox__config_8hpp_source.html#l00084">flexbox_config.hpp:84</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>定义</b> <a href="flexbox__config_8hpp_source.html#l00029">flexbox_config.hpp:29</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>定义</b> <a href="flexbox__config_8hpp_source.html#l00036">flexbox_config.hpp:36</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>定义</b> <a href="flexbox__config_8hpp_source.html#l00045">flexbox_config.hpp:45</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="ttdoc">默认情况下,弹性项目将全部尝试适应一行。您可以通过此属性更改它,并允许项目根据需要换行。</div><div class="ttdef"><b>定义</b> <a href="flexbox__config_8hpp_source.html#l00039">flexbox_config.hpp:39</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>定义</b> <a href="flexbox__config_8hpp_source.html#l00074">flexbox_config.hpp:74</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>定义</b> <a href="flexbox__config_8hpp_source.html#l00070">flexbox_config.hpp:70</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>定义</b> <a href="flexbox__config_8hpp_source.html#l00050">flexbox_config.hpp:50</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">设置 flexbox 方向。</div><div class="ttdef"><b>定义</b> <a href="flexbox__config_8cpp_source.html#l00009">flexbox_config.cpp:9</a></div></div>
<div class="ttc" id="agroup__dom_html_ga03049def08fa7a5eaa4d5e897152bc1a"><div class="ttname"><a href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a></div><div class="ttdeci">Element window(Element title, Element content, BorderStyle border)</div><div class="ttdoc">绘制带有标题和边框的窗口。</div><div class="ttdef"><b>定义</b> <a href="src_2ftxui_2dom_2border_8cpp_source.html#l00507">src/ftxui/dom/border.cpp:507</a></div></div>
<div class="ttc" id="agroup__dom_html_ga050df9c8ed04eec13309d6c0542c636d"><div class="ttname"><a href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a></div><div class="ttdeci">Element color(const LinearGradient &amp;gradient, Element child)</div><div class="ttdoc">使用线性渐变效果设置元素的前景色。</div><div class="ttdef"><b>定义</b> <a href="src_2ftxui_2dom_2linear__gradient_8cpp_source.html#l00239">src/ftxui/dom/linear_gradient.cpp:239</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 是一个配置结构体,定义了弹性盒子容器的布局属性。</div><div class="ttdef"><b>定义</b> <a href="flexbox__config_8hpp_source.html#l00026">flexbox_config.hpp:26</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. 保留所有权利。</span></div>
<div class="line"><span class="comment">// 此源代码的使用受 MIT 许可协议的约束,该协议可在</span></div>
<div class="line"><span class="comment">// LICENSE 文件中找到。</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// 用于分配器、shared_ptr、__shared_ptr_access</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// 用于 operator+、char_traits、to_string、string</span></div>
<div class="line"><span class="preprocessor">#include &lt;vector&gt;</span> <span class="comment">// 用于 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">// 用于 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">// 用于 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">// 用于 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">// 用于 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">// 用于 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">// 用于 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"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(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> <a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a> = 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(<a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a>);</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>定义</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">// 版权所有 2020 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 此源代码的使用受 MIT 许可证的约束,该许可证可在 LICENSE 文件中找到。</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>定义</b> <a href="focus__cursor_8cpp_source.html#l00012">focus_cursor.cpp:12</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>定义</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">// 版权所有 2020 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 本源代码的使用受 MIT 许可证的约束,该许可证可在</span></div>
<div class="line"><span class="comment">// LICENSE 文件中找到。</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">// 在左侧带标题的情况下漂亮地显示组件。</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">// -- 菜单</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">// -- 切换------------------------------------------------------------------</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">// -- 复选框 ---------------------------------------------------------------</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">// -- 单选框 ---------------------------------------------------------------</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">// -- 输入 ------------------------------------------------------------------</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">// -- 按钮 -----------------------------------------------------------------</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">// -- 滑块 -----------------------------------------------------------------</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">// 大文本:</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">// -- 布局</span></div>
<div class="line"> <span class="comment">// -----------------------------------------------------------------</span></div>
<div class="line"> <span class="keyword">auto</span> <a class="code hl_variable" href="with__restored__io_8cpp.html#a73bcbd53d13c2f16ee8bdc6532798bd4">layout</a> = 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(<a class="code hl_variable" href="with__restored__io_8cpp.html#a73bcbd53d13c2f16ee8bdc6532798bd4">layout</a>, [&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) | <a class="code hl_function" href="group__dom.html#gae8537acd423d47cf07e61bd774fb1098">border</a>;</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>定义</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">// 版权所有 2020 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 本源代码的使用受 MIT 许可协议的约束,该协议可在</span></div>
<div class="line"><span class="comment">// LICENSE 文件中找到。</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)) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(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)) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(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">// 编译器</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">// 编译器</span></div>
<div class="line"> line.push_back(text(compiler_entries[compiler_selected]) | bold);</div>
<div class="line"> <span class="comment">// 标志</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">// 可执行文件</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_) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::BlueLight) |</div>
<div class="line"> bold);</div>
<div class="line"> }</div>
<div class="line"> <span class="comment">// 输入</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) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(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 = <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(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"> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(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 = <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(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"> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(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">// 旋转器</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">// 颜色</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"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Default, text(<span class="stringliteral">&quot;Default&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Black, text(<span class="stringliteral">&quot;Black&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::GrayDark, text(<span class="stringliteral">&quot;GrayDark&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::GrayLight, text(<span class="stringliteral">&quot;GrayLight&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::White, text(<span class="stringliteral">&quot;White&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Blue, text(<span class="stringliteral">&quot;Blue&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::BlueLight, text(<span class="stringliteral">&quot;BlueLight&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Cyan, text(<span class="stringliteral">&quot;Cyan&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::CyanLight, text(<span class="stringliteral">&quot;CyanLight&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Green, text(<span class="stringliteral">&quot;Green&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::GreenLight, text(<span class="stringliteral">&quot;GreenLight&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Magenta, text(<span class="stringliteral">&quot;Magenta&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::MagentaLight, text(<span class="stringliteral">&quot;MagentaLight&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Red, text(<span class="stringliteral">&quot;Red&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::RedLight, text(<span class="stringliteral">&quot;RedLight&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Yellow, text(<span class="stringliteral">&quot;Yellow&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::YellowLight, text(<span class="stringliteral">&quot;YellowLight&quot;</span>)),</div>
<div class="line"> }),</div>
<div class="line"> vbox({</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::Default, text(<span class="stringliteral">&quot;Default&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::Black, text(<span class="stringliteral">&quot;Black&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::GrayDark, text(<span class="stringliteral">&quot;GrayDark&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::GrayLight, text(<span class="stringliteral">&quot;GrayLight&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::White, text(<span class="stringliteral">&quot;White&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::Blue, text(<span class="stringliteral">&quot;Blue&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::BlueLight, text(<span class="stringliteral">&quot;BlueLight&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::Cyan, text(<span class="stringliteral">&quot;Cyan&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::CyanLight, text(<span class="stringliteral">&quot;CyanLight&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::Green, text(<span class="stringliteral">&quot;Green&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::GreenLight, text(<span class="stringliteral">&quot;GreenLight&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::Magenta, text(<span class="stringliteral">&quot;Magenta&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::MagentaLight, text(<span class="stringliteral">&quot;MagentaLight&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::Red, text(<span class="stringliteral">&quot;Red&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::RedLight, text(<span class="stringliteral">&quot;RedLight&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::Yellow, text(<span class="stringliteral">&quot;Yellow&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(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>) | <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(<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">// 真彩色显示。</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"> | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::HSV(hue, saturation, value)) <span class="comment">//</span></div>
<div class="line"> | <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(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">// 仪表</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) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Black),</div>
<div class="line"> render_gauge(100) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::GrayDark),</div>
<div class="line"> render_gauge(50) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::GrayLight),</div>
<div class="line"> render_gauge(6894) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::White),</div>
<div class="line"> separator(),</div>
<div class="line"> render_gauge(6841) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Blue),</div>
<div class="line"> render_gauge(9813) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::BlueLight),</div>
<div class="line"> render_gauge(98765) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Cyan),</div>
<div class="line"> render_gauge(98) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::CyanLight),</div>
<div class="line"> render_gauge(9846) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Green),</div>
<div class="line"> render_gauge(1122) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::GreenLight),</div>
<div class="line"> render_gauge(84) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Magenta),</div>
<div class="line"> render_gauge(645) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::MagentaLight),</div>
<div class="line"> render_gauge(568) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Red),</div>
<div class="line"> render_gauge(2222) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::RedLight),</div>
<div class="line"> render_gauge(220) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Yellow),</div>
<div class="line"> render_gauge(348) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(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">// 段落</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> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(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"> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(text(<span class="stringliteral">&quot;Align left:&quot;</span>), paragraphAlignLeft(str)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(text(<span class="stringliteral">&quot;Align center:&quot;</span>), paragraphAlignCenter(str)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(text(<span class="stringliteral">&quot;Align right:&quot;</span>), paragraphAlignRight(str)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(text(<span class="stringliteral">&quot;Align justify:&quot;</span>), paragraphAlignJustify(str)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(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"> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(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">// 标签页</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">// 更新应用程序的状态。</span></div>
<div class="line"> shift++;</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// 请求绘制新帧。</span></div>
<div class="line"> screen.RequestAnimationFrame();</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// 执行事件,并绘制下一帧。</span></div>
<div class="line"> loop.RunOnce();</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// 短暂休眠以控制帧率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>定义</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">Input 组件的选项。</div><div class="ttdef"><b>定义</b> <a href="component__options_8hpp_source.html#l00163">component_options.hpp:163</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">设置 flexbox flex direction。</div><div class="ttdef"><b>定义</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>定义</b> <a href="color_8hpp_source.html#l00070">color.hpp:70</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 是一个表示终端用户界面中颜色的类。</div><div class="ttdef"><b>定义</b> <a href="color_8hpp_source.html#l00020">color.hpp:20</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>定义</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">// 版权所有 2020 Arthur Sonzogni. 保留所有权利。</span></div>
<div class="line"><span class="comment">// 本源代码的使用受 MIT 许可协议的约束,</span></div>
<div class="line"><span class="comment">// 该协议可在 LICENSE 文件中找到。</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">// 数据:</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">// 基本输入组件:</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">// 密码输入组件:</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">// 电话号码输入组件:</span></div>
<div class="line"> <span class="comment">// 我们使用 `CatchEvent` 来过滤非数字字符。</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">// 组件树:</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">// 调整组件树的渲染方式:</span></div>
<div class="line"> <span class="keyword">auto</span> <a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a> = 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(<a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a>);</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>定义</b> <a href="event_8hpp_source.html#l00106">event.hpp:106</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">使用 '*' 遮盖输入内容。</div><div class="ttdef"><b>定义</b> <a href="component__options_8hpp_source.html#l00179">component_options.hpp:179</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">// 版权所有 2021 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 本源代码的使用受 MIT 许可证的约束,该许可证可在 LICENSE 文件中找到。</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> <a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a> = 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(<a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a>);</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">// 本源代码受MIT许可证管理可在LICENSE文件中找到。</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 |= <a class="code hl_function" href="group__dom.html#gaf20f7d6fb275d109f0bdc01a2e4d3f3e">borderEmpty</a>;</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 |= <a class="code hl_function" href="group__dom.html#ga052b504344f3bc1ff86b3493cd934215">borderDouble</a>;</div>
<div class="line"> state.element |= <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::White);</div>
<div class="line"> state.element |= <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Black);</div>
<div class="line"> } <span class="keywordflow">else</span> <span class="keywordflow">if</span> (state.hovered) {</div>
<div class="line"> state.element |= <a class="code hl_function" href="group__dom.html#ga3cf2db223a5efaa370f0ca6bb405b80e">borderRounded</a>;</div>
<div class="line"> state.element |= <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(<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 |= <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::White);</div>
<div class="line"> } <span class="keywordflow">else</span> {</div>
<div class="line"> state.element |= <a class="code hl_function" href="group__dom.html#gae8537acd423d47cf07e61bd774fb1098">border</a>;</div>
<div class="line"> state.element |= <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(<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 |= <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(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 | <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::Red),</div>
<div class="line"> separatorEmpty(),</div>
<div class="line"> separator() | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(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 |= <a class="code hl_function" href="group__dom.html#gaf20f7d6fb275d109f0bdc01a2e4d3f3e">borderEmpty</a>;</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 |= <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::Black);</div>
<div class="line"> } <span class="keywordflow">else</span> {</div>
<div class="line"> state.element |= <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(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 |= <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(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>定义</b> <a href="component__options_8hpp_source.html#l00178">component_options.hpp:178</a></div></div>
<div class="ttc" id="agroup__dom_html_ga052b504344f3bc1ff86b3493cd934215"><div class="ttname"><a href="group__dom.html#ga052b504344f3bc1ff86b3493cd934215">borderDouble</a></div><div class="ttdeci">Element borderDouble(Element child)</div><div class="ttdoc">在元素周围绘制双线边框。</div><div class="ttdef"><b>定义</b> <a href="src_2ftxui_2dom_2border_8cpp_source.html#l00405">src/ftxui/dom/border.cpp:405</a></div></div>
<div class="ttc" id="agroup__dom_html_ga3cf2db223a5efaa370f0ca6bb405b80e"><div class="ttname"><a href="group__dom.html#ga3cf2db223a5efaa370f0ca6bb405b80e">borderRounded</a></div><div class="ttdeci">Element borderRounded(Element child)</div><div class="ttdoc">在元素周围绘制圆角边框。</div><div class="ttdef"><b>定义</b> <a href="src_2ftxui_2dom_2border_8cpp_source.html#l00440">src/ftxui/dom/border.cpp:440</a></div></div>
<div class="ttc" id="agroup__dom_html_structftxui_1_1LinearGradient"><div class="ttname"><a href="group__dom.html#structftxui_1_1LinearGradient">ftxui::LinearGradient</a></div><div class="ttdoc">一个表示线性渐变颜色效果设置的类。</div><div class="ttdef"><b>定义</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">用于定义 Input 组件的样式。</div><div class="ttdef"><b>定义</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">// 本源代码的使用受 MIT 许可证的约束,该许可证可在 LICENSE 文件中找到。</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> <a class="code hl_variable" href="with__restored__io_8cpp.html#a73bcbd53d13c2f16ee8bdc6532798bd4">layout</a> = 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> <a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a> = Renderer(<a class="code hl_variable" href="with__restored__io_8cpp.html#a73bcbd53d13c2f16ee8bdc6532798bd4">layout</a>, [&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"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(<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"> <a class="code hl_variable" href="with__restored__io_8cpp.html#a73bcbd53d13c2f16ee8bdc6532798bd4">layout</a>-&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(<a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a>);</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>定义</b> <a href="src_2ftxui_2dom_2linear__gradient_8cpp_source.html#l00022">src/ftxui/dom/linear_gradient.cpp:22</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">// 本源代码的使用受MIT许可证的约束该许可证可在LICENSE文件中找到。</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> <a class="code hl_variable" href="with__restored__io_8cpp.html#a73bcbd53d13c2f16ee8bdc6532798bd4">layout</a> = 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>) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(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(<a class="code hl_variable" href="with__restored__io_8cpp.html#a73bcbd53d13c2f16ee8bdc6532798bd4">layout</a>);</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">// 版权所有 2020 Arthur Sonzogni. 保留所有权利。</span></div>
<div class="line"><span class="comment">// 本源代码的使用受 MIT 许可证的约束,该许可证可在 LICENSE 文件中找到。</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>定义</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">Menu 组件的选项。</div><div class="ttdef"><b>定义</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">// 版权所有 2020 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 本源代码的使用受 MIT 许可证管辖,该许可证可在</span></div>
<div class="line"><span class="comment">// LICENSE 文件中找到。</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> <a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a> = 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">// -------- 顶部面板 --------------</span></div>
<div class="line"> hbox({</div>
<div class="line"> <span class="comment">// -------- 左侧菜单 --------------</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">// -------- 右侧菜单 --------------</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">// -------- 底部面板 --------------</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(<a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a>);</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">// 版权所有 2020 Arthur Sonzogni. 保留所有权利。</span></div>
<div class="line"><span class="comment">// 此源代码的使用受 MIT 许可证的约束,该许可证可在</span></div>
<div class="line"><span class="comment">// LICENSE 文件中找到。</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">// 为某些菜单项定义特殊样式。</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) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(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">// 将菜单与边框一起显示</span></div>
<div class="line"> <span class="keyword">auto</span> <a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a> = 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(<a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a>);</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>定义</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">MenuEntry 组件的选项。</div><div class="ttdef"><b>定义</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>定义</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">// 版权所有 2020 Arthur Sonzogni. 保留所有权利。</span></div>
<div class="line"><span class="comment">// 此源代码的使用受 MIT 许可证的约束,该许可证可在以下文件中找到:</span></div>
<div class="line"><span class="comment">// LICENSE 文件。</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">// 为某些菜单项定义特殊样式。</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> <a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a> = 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 | <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::Black);</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> screen.Loop(<a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a>);</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>定义</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>定义</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>定义</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>定义</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>定义</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>定义</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">// 版权所有 2020 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 本源代码的使用受 MIT 许可证的约束,该许可证可在 LICENSE 文件中找到。</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> <a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a> = 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) | <a class="code hl_function" href="group__dom.html#gae8537acd423d47cf07e61bd774fb1098">border</a>;</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(<a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a>);</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">// 版权所有 2020 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 此源代码的使用受 MIT 许可证的约束,该许可证可在 LICENSE 文件中找到。</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> <a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a> = 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(<a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a>);</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. 保留所有权利。</span></div>
<div class="line"><span class="comment">// 本源代码的使用受 MIT 许可证的约束,该许可证可在</span></div>
<div class="line"><span class="comment">// LICENSE 文件中找到。</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> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(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> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(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> <a class="code hl_variable" href="with__restored__io_8cpp.html#a1a8bb385160d2854b0c2ebb85db2d212">EXIT_SUCCESS</a>;</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>定义</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">// 版权所有 2020 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 本源代码的使用受 MIT 许可证的约束,该许可证可在</span></div>
<div class="line"><span class="comment">// LICENSE 文件中找到。</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> <a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a> = 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(<a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a>);</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 | <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(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 | <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(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) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Yellow) | <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(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) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Yellow) | <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(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) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Black) | <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::Yellow) |</div>
<div class="line"> bold;</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> text(state.label) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Black) | <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(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 | <a class="code hl_function" href="group__dom.html#ga052b504344f3bc1ff86b3493cd934215">borderDouble</a>;</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 | <a class="code hl_function" href="group__dom.html#gae8537acd423d47cf07e61bd774fb1098">border</a>;</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">一个可动画的颜色选项。 @params _inactive 当组件不活动时的颜色。 @params _active 当组件活动时的颜色。 @params _duration 动画的持续时间。 @para...</div><div class="ttdef"><b>定义</b> <a href="component__options_8cpp_source.html#l00019">component_options.cpp:19</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>定义</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>定义</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>定义</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>定义</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>定义</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>定义</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>定义</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>定义</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>定义</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>定义</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>定义</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>定义</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>定义</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">// 版权所有 2020 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 本源代码的使用受 MIT 许可证的约束,该许可证可在以下文件中找到:</span></div>
<div class="line"><span class="comment">// LICENSE 文件。</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) | <a class="code hl_function" href="group__dom.html#gaf20f7d6fb275d109f0bdc01a2e4d3f3e">borderEmpty</a>; });</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>定义</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>定义</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">// 版权所有 2022 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 本源代码受 MIT 许可协议的约束,该协议可在 LICENSE 文件中找到。</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">// 主组件的定义。细节不重要。</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">// 优化两个按钮的渲染方式:</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">// 模态组件的定义。细节不重要。</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"> | <a class="code hl_function" href="group__dom.html#gae8537acd423d47cf07e61bd774fb1098">border</a>; <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">// 应用程序状态:</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">// 修改状态的一些操作:</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">// 实例化主组件和模态组件:</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">// 使用 `Modal` 函数将主组件和模态窗口一起使用。</span></div>
<div class="line"> <span class="comment">// |modal_shown| 布尔值控制模态窗口是否显示。</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>定义</b> <a href="modal__dialog_8cpp_source.html#l00014">modal_dialog.cpp:14</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>定义</b> <a href="modal__dialog_8cpp_source.html#l00039">modal_dialog.cpp:39</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>定义</b> <a href="modal__dialog_8cpp_source.html#l00017">modal_dialog.cpp:17</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">// 版权所有 2020 Arthur Sonzogni. 保留所有权利。</span></div>
<div class="line"><span class="comment">// 此源代码的使用受 MIT 许可证的约束MIT 许可证可在以下位置找到:</span></div>
<div class="line"><span class="comment">// LICENSE 文件。</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">// 有两层。一层在深度 = 0模态窗口在深度 = 1</span></div>
<div class="line"> <span class="keywordtype">int</span> depth = 0;</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// 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">// 在深度=0时有两个按钮。一个用于评价 FTXUI一个用于退出。</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">// 在深度=1时是“模态”窗口。</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">// 版权所有 2020 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 此源代码的使用受 MIT 许可证的约束,</span></div>
<div class="line"><span class="comment">// 该许可证可在 LICENSE 文件中找到。</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> <a class="code hl_variable" href="with__restored__io_8cpp.html#a73bcbd53d13c2f16ee8bdc6532798bd4">layout</a> = 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> <a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a> = Renderer(<a class="code hl_variable" href="with__restored__io_8cpp.html#a73bcbd53d13c2f16ee8bdc6532798bd4">layout</a>, [&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(<a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a>);</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>定义</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">// 版权所有 2020 Arthur Sonzogni. 保留所有权利。</span></div>
<div class="line"><span class="comment">// 本源代码的使用受 MIT 许可证的约束,该许可证可在</span></div>
<div class="line"><span class="comment">// LICENSE 文件中找到。</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 |= <a class="code hl_function" href="group__dom.html#gae8537acd423d47cf07e61bd774fb1098">border</a>;</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>定义</b> <a href="event_8hpp_source.html#l00103">event.hpp:103</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>定义</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. 版权所有。</span></div>
<div class="line"><span class="comment">// 本源代码的使用受 MIT 许可协议的约束,该协议可在 LICENSE 文件中找到。</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">// 版权所有 2020 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 此源代码的使用受 MIT 许可证的约束,该许可证可在 LICENSE 文件中找到。</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> <a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a> = 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) | <a class="code hl_function" href="group__dom.html#gae8537acd423d47cf07e61bd774fb1098">border</a>;</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(<a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a>);</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">// 版权所有 2020 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 本源代码的使用受 MIT 许可证的约束,该许可证可在 LICENSE 文件中找到。</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">// Renderer() 是一个使用 lambda 函数作为参数来渲染自身的组件。</span></div>
<div class="line"> <span class="comment">// 1. 可聚焦渲染器的示例:</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 | <a class="code hl_function" href="group__dom.html#gae8537acd423d47cf07e61bd774fb1098">border</a>;</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 | <a class="code hl_function" href="group__dom.html#gae8537acd423d47cf07e61bd774fb1098">border</a>;</div>
<div class="line"> }</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// 2. 不可聚焦渲染器的示例。</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 可以包装其他组件以重新定义它们的 Render() 函数。</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 | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(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. 版权所有。</span></div>
<div class="line"><span class="comment">// 本源代码受 MIT 许可证的约束,可在 LICENSE 文件中找到。</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// 用于 shared_ptr, allocator, __shared_ptr_access</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">// 用于 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">// 用于 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">// 用于 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">// 用于 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="comment">// 状态:</span></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="comment">// 渲染器:</span></div>
<div class="line"> <span class="keyword">auto</span> RendererInfo = [](<span class="keyword">const</span> std::string&amp; name, <span class="keywordtype">int</span>* size) {</div>
<div class="line"> <span class="keywordflow">return</span> Renderer([name, size] {</div>
<div class="line"> <span class="keywordflow">return</span> text(name + <span class="stringliteral">&quot;: &quot;</span> + std::to_string(*size)) | center;</div>
<div class="line"> });</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> = RendererInfo(<span class="stringliteral">&quot;Left&quot;</span>, &amp;left_size);</div>
<div class="line"> <span class="keyword">auto</span> <a class="code hl_variable" href="screen_8cpp.html#aa4b74e56e675912bbc06504407fc7a46">right</a> = RendererInfo(<span class="stringliteral">&quot;Right&quot;</span>, &amp;right_size);</div>
<div class="line"> <span class="keyword">auto</span> <a class="code hl_variable" href="screen_8cpp.html#a495e1456dc6a7df7638b2c507c756a24">top</a> = RendererInfo(<span class="stringliteral">&quot;Top&quot;</span>, &amp;top_size);</div>
<div class="line"> <span class="keyword">auto</span> bottom = RendererInfo(<span class="stringliteral">&quot;Bottom&quot;</span>, &amp;bottom_size);</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> <a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a> =</div>
<div class="line"> Renderer(container, [&amp;] { <span class="keywordflow">return</span> container-&gt;Render() | <a class="code hl_function" href="group__dom.html#gae8537acd423d47cf07e61bd774fb1098">border</a>; });</div>
<div class="line"> </div>
<div class="line"> screen.Loop(<a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a>);</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>定义</b> <a href="screen_8cpp_source.html#l00130">screen.cpp:130</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>定义</b> <a href="screen_8cpp_source.html#l00129">screen.cpp:129</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>定义</b> <a href="screen_8cpp_source.html#l00131">screen.cpp:131</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="resizable_split_clamp"></a>
resizable_split_clamp</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/resizable_split_clamp">Demo</a> </p><div class="fragment"><div class="line"><span class="comment">// 版权所有 2025 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 此源代码的使用受 MIT 许可证的约束,该许可证可在</span></div>
<div class="line"><span class="comment">// LICENSE 文件中找到。</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="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="comment">// 状态:</span></div>
<div class="line"> <span class="keywordtype">int</span> size = 40;</div>
<div class="line"> <span class="keywordtype">int</span> size_min = 10;</div>
<div class="line"> <span class="keywordtype">int</span> size_max = 80;</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// 渲染器:</span></div>
<div class="line"> <span class="keyword">auto</span> split = ResizableSplit({</div>
<div class="line"> .main = Renderer([] { <span class="keywordflow">return</span> text(<span class="stringliteral">&quot;Left&quot;</span>) | center; }),</div>
<div class="line"> .back = Renderer([] { <span class="keywordflow">return</span> text(<span class="stringliteral">&quot;Right&quot;</span>) | center; }),</div>
<div class="line"> .direction = Direction::Left,</div>
<div class="line"> .main_size = &amp;size,</div>
<div class="line"> .min = &amp;size_min,</div>
<div class="line"> .max = &amp;size_max,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> <a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a> = Renderer(split, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(text(<span class="stringliteral">&quot;Drag the separator with the mouse&quot;</span>),</div>
<div class="line"> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;Min: &quot;</span> + std::to_string(size_min)),</div>
<div class="line"> text(<span class="stringliteral">&quot;Max: &quot;</span> + std::to_string(size_max)),</div>
<div class="line"> text(<span class="stringliteral">&quot;Size: &quot;</span> + std::to_string(size)),</div>
<div class="line"> separator(),</div>
<div class="line"> split-&gt;Render() | flex,</div>
<div class="line"> }));</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> screen.Loop(<a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a>);</div>
<div class="line">}</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">// 版权所有 2023 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 本源代码受 MIT 许可证的约束,该许可证可在 LICENSE 文件中找到。</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> <a class="code hl_variable" href="with__restored__io_8cpp.html#a1a8bb385160d2854b0c2ebb85db2d212">EXIT_SUCCESS</a>;</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">它将自身实现为 ftxui::Element。它通过响应 ftxui::Event 来实现键盘导航。</div><div class="ttdef"><b>定义</b> <a href="component__base_8hpp_source.html#l00028">component_base.hpp:28</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>定义</b> <a href="scrollbar_8cpp_source.html#l00009">scrollbar.cpp:9</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>定义</b> <a href="component__options_8hpp_source.html#l00228">component_options.hpp:228</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>定义</b> <a href="component__options_8hpp_source.html#l00230">component_options.hpp:230</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>定义</b> <a href="component__options_8hpp_source.html#l00233">component_options.hpp:233</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>定义</b> <a href="component__options_8hpp_source.html#l00234">component_options.hpp:234</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>定义</b> <a href="component__options_8hpp_source.html#l00232">component_options.hpp:232</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>定义</b> <a href="component__options_8hpp_source.html#l00229">component_options.hpp:229</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>定义</b> <a href="component__options_8hpp_source.html#l00231">component_options.hpp:231</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>定义</b> <a href="component__options_8hpp_source.html#l00235">component_options.hpp:235</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">// 版权所有 2020 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 本源代码受 MIT 许可证的约束,您可以在 LICENSE 文件中找到该许可证。</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一个用于构建用户界面的强大库。&quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;享受丰富的组件集和声明式风格。&quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;以最小的努力创建美观且响应迅速的 UI。&quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;加入社区,体验 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;退出&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">// 组件:</span></div>
<div class="line"> <span class="keyword">auto</span> <a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a> = Renderer(quit, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;选择已更改:&quot;</span> + std::to_string(selection_change_counter) +</div>
<div class="line"> <span class="stringliteral">&quot;&quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;当前选中:&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"> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(text(<span class="stringliteral">&quot;水平分割&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"> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(text(<span class="stringliteral">&quot;垂直分割&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"> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(text(<span class="stringliteral">&quot;具有不同样式的网格分割&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(<a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a>);</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>定义</b> <a href="examples_2component_2selection_8cpp_source.html#l00014">examples/component/selection.cpp:14</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>定义</b> <a href="pixel_8hpp_source.html#l00033">pixel.hpp:33</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">// 适用于 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">// 适用于 滑块</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">// 适用于 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">// 版权所有 2020 Arthur Sonzogni. 保留所有权利。</span></div>
<div class="line"><span class="comment">// 此源代码的使用受 MIT 许可的约束MIT 许可可在</span></div>
<div class="line"><span class="comment">// LICENSE 文件中找到。</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. 保留所有权利。</span></div>
<div class="line"><span class="comment">// 本源代码的使用受 MIT 许可证的约束,该许可证可在 LICENSE 文件中找到。</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">// 在 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">/* 在 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">// 版权所有 2020 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 本源代码受 MIT 许可证的约束,可在 LICENSE 文件中找到。</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) | <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(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> <a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a> = 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(<a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a>);</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>定义</b> <a href="slider__rgb_8cpp_source.html#l00015">slider_rgb.cpp:15</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>定义</b> <a href="slider__rgb_8cpp_source.html#l00020">slider_rgb.cpp:20</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">// 版权所有 2020 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 此源代码受 MIT 许可证的约束,该许可证可在</span></div>
<div class="line"><span class="comment">// LICENSE 文件中找到。</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> <a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a> = 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(<a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a>);</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">// 版权所有 2020 Arthur Sonzogni. 保留所有权利。</span></div>
<div class="line"><span class="comment">// 此源代码的使用受 MIT 许可证的约束,该许可证可在</span></div>
<div class="line"><span class="comment">// LICENSE 文件中找到。</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// 用于 allocator, __shared_ptr_access, shared_ptr</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// 用于 string, basic_string</span></div>
<div class="line"><span class="preprocessor">#include &lt;vector&gt;</span> <span class="comment">// 用于 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">// 用于 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">// 用于 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">// 用于 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">// 用于 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">// 用于 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> <a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a> = 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(<a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a>);</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">// 版权所有 2020 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 此源代码受 MIT 许可证的约束,可在</span></div>
<div class="line"><span class="comment">// LICENSE 文件中找到。</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> <a class="code hl_variable" href="with__restored__io_8cpp.html#a73bcbd53d13c2f16ee8bdc6532798bd4">layout</a> = ResizableSplitLeft(textarea_1, textarea_2, &amp;size);</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> component = Renderer(<a class="code hl_variable" href="with__restored__io_8cpp.html#a73bcbd53d13c2f16ee8bdc6532798bd4">layout</a>, [&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"> <a class="code hl_variable" href="with__restored__io_8cpp.html#a73bcbd53d13c2f16ee8bdc6532798bd4">layout</a>-&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">// 版权所有 2020 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 此源代码的使用受 MIT 许可证的约束,该许可证可在以下文件中找到:</span></div>
<div class="line"><span class="comment">// LICENSE 文件。</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> <a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a> = 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(<a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a>);</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">// 版权所有 2023 Arthur Sonzogni. 保留所有权利。</span></div>
<div class="line"><span class="comment">// 本源代码受 MIT 许可证的约束,可在</span></div>
<div class="line"><span class="comment">// LICENSE 文件中找到。</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> <a class="code hl_variable" href="with__restored__io_8cpp.html#a73bcbd53d13c2f16ee8bdc6532798bd4">layout</a> = 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(<a class="code hl_variable" href="with__restored__io_8cpp.html#a73bcbd53d13c2f16ee8bdc6532798bd4">layout</a>);</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> <a class="code hl_variable" href="with__restored__io_8cpp.html#a1a8bb385160d2854b0c2ebb85db2d212">EXIT_SUCCESS</a>;</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">// 版权所有 2022 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 本源代码的使用受 MIT 许可协议的约束,该协议可在</span></div>
<div class="line"><span class="comment">// the LICENSE 文件中找到。</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">// 按下此按钮时,&quot;screen.WithRestoredIO&quot; 将暂时卸载终端钩子并执行提供的回调</span></div>
<div class="line"> <span class="comment">// 函数。这允许应用程序以非交互模式运行。 auto btn_run = Button(&quot;Execute with restored IO&quot;, screen.WithRestoredIO([] {</span></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"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> 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> <a class="code hl_variable" href="with__restored__io_8cpp.html#a2daa5f517fecc8d00fdc4fef2c1b5b9d">btn_quit</a> = Button(<span class="stringliteral">&quot;Quit&quot;</span>, screen.ExitLoopClosure());</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> <a class="code hl_variable" href="with__restored__io_8cpp.html#a73bcbd53d13c2f16ee8bdc6532798bd4">layout</a> = Container::Horizontal({</div>
<div class="line"> btn_run,</div>
<div class="line"> <a class="code hl_variable" href="with__restored__io_8cpp.html#a2daa5f517fecc8d00fdc4fef2c1b5b9d">btn_quit</a>,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> <a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a> = Renderer(<a class="code hl_variable" href="with__restored__io_8cpp.html#a73bcbd53d13c2f16ee8bdc6532798bd4">layout</a>, [&amp;] {</div>
<div class="line"> <span class="keyword">auto</span> explanation = paragraph(</div>
<div class="line"> <span class="stringliteral">&quot;单击此按钮后ScreenInteractive 将被 &quot;</span></div>
<div class="line"> <span class="stringliteral">&quot;暂停,并且对 stdin/stdout 的访问将暂时 &quot;</span></div>
<div class="line"> <span class="stringliteral">&quot;恢复以运行函数。&quot;</span>);</div>
<div class="line"> <span class="keyword">auto</span> element = vbox({</div>
<div class="line"> explanation | <a class="code hl_function" href="group__dom.html#gaf20f7d6fb275d109f0bdc01a2e4d3f3e">borderEmpty</a>,</div>
<div class="line"> hbox({</div>
<div class="line"> btn_run-&gt;Render(),</div>
<div class="line"> filler(),</div>
<div class="line"> <a class="code hl_variable" href="with__restored__io_8cpp.html#a2daa5f517fecc8d00fdc4fef2c1b5b9d">btn_quit</a>-&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(<a class="code hl_variable" href="with__restored__io_8cpp.html#a63598717de7973f11f57a488d6424e4a">renderer</a>);</div>
<div class="line"> <span class="keywordflow">return</span> <a class="code hl_variable" href="with__restored__io_8cpp.html#a1a8bb385160d2854b0c2ebb85db2d212">EXIT_SUCCESS</a>;</div>
<div class="line">}</div>
<div class="ttc" id="awith__restored__io_8cpp_html_a2daa5f517fecc8d00fdc4fef2c1b5b9d"><div class="ttname"><a href="with__restored__io_8cpp.html#a2daa5f517fecc8d00fdc4fef2c1b5b9d">btn_quit</a></div><div class="ttdeci">auto btn_quit</div><div class="ttdef"><b>定义</b> <a href="with__restored__io_8cpp_source.html#l00030">with_restored_io.cpp:30</a></div></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! -->
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const projectNumber = document.getElementById('projectname');
if (!projectNumber) {
console.warn('Doxygen element with ID "projectnumber" not found. Cannot add version switcher.');
return;
}
const langs = ["en", "es", "fr", "ja", "zh-CH", "zh-TW"];
const lang_paths = {"en": "../index.html", "es": "../es/index.html", "fr": "../fr/index.html", "ja": "../ja/index.html", "zh-CH": "index.html", "zh-TW": "../zh-TW/index.html"};
const lang_display = {"en": "English", "es": "Espa\u00f1ol", "fr": "Fran\u00e7ais", "ja": "\u65e5\u672c\u8a9e", "zh-CH": "\u4e2d\u6587 (\u7b80\u4f53)", "zh-TW": "\u4e2d\u6587 (\u7e41\u9ad4)"};
const versions = ["main"];
const version_paths = {"main": "index.html"};
const currentLang = "zh-CH";
const currentVersion = "main";
// Helper function to create a styled select element
const createSelect = (options, current, paths, label, displayMap = null) => {
const select = document.createElement('select');
select.title = label;
select.onchange = function() {
const selectedValue = this.value;
if (selectedValue in paths) {
window.location.href = paths[selectedValue];
}
};
// Sort versions: 'main' first, then others numerically descending.
options.sort((a, b) => {
if (a === 'main') return -1;
if (b === 'main') return 1;
return b.localeCompare(a, undefined, { numeric: true, sensitivity: 'base' });
});
options.forEach(v => {
const option = document.createElement('option');
option.value = v;
// Use the displayMap if provided, otherwise default to the value (v)
option.textContent = displayMap ? displayMap[v] : v;
if (v === current) {
option.selected = true;
}
select.appendChild(option);
});
// Apply some styling to make it look good.
Object.assign(select.style, {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
color: 'white',
border: '1px solid rgba(255, 255, 255, 0.2)',
padding: '5px',
borderRadius: '5px',
fontSize: '14px',
fontFamily: 'inherit',
margin: '0 5px 0 0',
cursor: 'pointer'
});
return select;
};
// 1. Create Language Switcher, passing the language display names map
const langSelect = createSelect(langs, currentLang, lang_paths, 'Select Language', lang_display);
// 2. Create Version Switcher
const versionSelect = createSelect(versions, currentVersion, version_paths, 'Select Version');
// 3. Create FTXUI title.
const ftxuiTitle = document.createElement('span');
ftxuiTitle.textContent = 'FTXUI: ';
Object.assign(ftxuiTitle.style, {
color: 'white',
fontSize: '20px',
fontWeight: 'bold',
marginRight: '10px'
});
// 3. Create a container to hold both selectors
const container = document.createElement('div');
container.id = 'version-lang-switchers';
Object.assign(container.style, {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
width: 'auto'
});
container.appendChild(ftxuiTitle);
container.appendChild(langSelect);
container.appendChild(versionSelect);
Object.assign(container.style, {
backgroundColor: 'rgba(0, 0, 0, 0.5)',
padding: '5px 10px',
borderRadius: '8px'
});
// Replace the Doxygen project number element with our container.
projectNumber.replaceWith(container);
// Clean up the original Doxygen project number text if it still exists nearby
const parent = container.parentElement;
if (parent) {
const textNode = Array.from(parent.childNodes).find(n => n.nodeType === 3 && n.textContent.trim() !== '');
if (textNode) {
textNode.remove();
}
}
});
</script>
</body>
</html>