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

2171 lines
197 KiB
HTML

<!-- HTML header for doxygen 1.9.8-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=11"/>
<meta name="generator" content="Doxygen 1.12.0"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>FTXUI: Example</title>
<link href="tabs.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="dynsections.js"></script>
<script type="text/javascript" src="doxygen-awesome-fragment-copy-button.js"></script>
<script type="text/javascript" src="doxygen-awesome-paragraph-link.js"></script>
<script type="text/javascript" src="doxygen-awesome-interactive-toc.js"></script>
<script type="text/javascript" src="doxygen-awesome-tabs.js"></script>
<script type="module">
DoxygenAwesomeFragmentCopyButton.init()
DoxygenAwesomeParagraphLink.init()
DoxygenAwesomeInteractiveToc.init()
DoxygenAwesomeTabs.init()
await new Promise(r => window.addEventListener('DOMContentLoaded', r));
// Remove title when a img[alt='title-img'] is present.
// Find an image with the alt "img-title".
const img = document.querySelector("img[alt='title-img']");
const header = document.querySelector(".headertitle");
if (img && header) {
// Hide the header title progressively.
header.style.display = "none";
// Show progressively the image.
img.style.maxHeight = "40vh";
img.style.maxWidth = "100%";
img.style.objectFit = "contain";
}
// In the "examples.html" page. Turn every link with text
// "examples/<...>
//
// Add a "demo" link toward.
// https://arthursonzogni.github.io/FTXUI/examples/?file=<...>
const examples = document.querySelectorAll("a")
examples.forEach((example) => {
if (!example.textContent.startsWith("examples/")) {
return;
}
// Remove the ".cpp" extension from the example name.
const exampleName = example.textContent.replace("examples/", "").replace(".cpp", "");
const a = document.createElement("a");
a.textContent = "[demo]";
a.href = "https://arthursonzogni.github.io/FTXUI/examples/?file=" + exampleName;
a.style.marginRight= "1em";
a.style.fontWeight = "bold";
example.parentElement.insertBefore(a, example)
});
// If the current URL ends with -example.html, we can add a link to the demo
// as well using the div.title textContent.
const url = new URL(window.location.href);
if (url.pathname.endsWith("-example.html")) {
// Get the title text.
const title = document.querySelector("div.title").textContent;
const example = title.replace("examples/", "").replace(".cpp", "");
// Create a link to the demo.
const a = document.createElement("a");
a.textContent = "[demo]";
a.href = "https://arthursonzogni.github.io/FTXUI/examples/?file=" + example;
a.style.marginLeft = "1em";
a.style.fontWeight = "bold";
a.style.display = "inline-block";
// Insert the link after the title.
const titleDiv = document.querySelector("div.title");
if (titleDiv) {
titleDiv.insertBefore(a, titleDiv.nextSibling);
}
}
</script>
<script type="module">
// Click on the navtree, except for the main page where this is already done
// automatically.
let delay = 0;
while(true) {
const navtree = document.querySelector("div.item.selected");
if (!navtree) {
delay *= 2;
delay += 1;
await new Promise(resolve => setTimeout(resolve, delay));
continue;
}
// Include only selected navtree items.
console.log("navtree.textContent", navtree.textContent);
if (!navtree.textContent.includes("Getting Started") &&
!navtree.textContent.includes("Installation") &&
!navtree.textContent.includes("ftxui / screen") &&
!navtree.textContent.includes("ftxui / dom") &&
!navtree.textContent.includes("ftxui / component") &&
!navtree.textContent.includes("Reference")) {
break;
}
// Find the first link inside the navtree.
const link = navtree.querySelector("a");
if (link) {
// Simulate a click on the link.
link.click();
break;
}
}
</script>
<link href="navtree.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="navtreedata.js"></script>
<script type="text/javascript" src="navtree.js"></script>
<script type="text/javascript" src="resize.js"></script>
<script type="text/javascript" src="cookie.js"></script>
<link href="search/search.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="search/searchdata.js"></script>
<script type="text/javascript" src="search/search.js"></script>
<link href="doxygen.css" rel="stylesheet" type="text/css" />
<link href="doxygen-awesome.css" rel="stylesheet" type="text/css"/>
<link href="stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
<div id="titlearea">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr id="projectrow">
<td id="projectalign">
<div id="projectname">FTXUI<span id="projectnumber">&#160;6.1.9</span>
</div>
<div id="projectbrief">C++ functional terminal UI.</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- end header part -->
<!-- Generated by Doxygen 1.12.0 -->
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
var searchBox = new SearchBox("searchBox", "search/",'.html');
/* @license-end */
</script>
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
$(function() { codefold.init(0); });
/* @license-end */
</script>
<script type="text/javascript" src="menudata.js"></script>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
$(function() {
initMenu('',true,false,'search.php','Search',true);
$(function() { init_search(); });
});
/* @license-end */
</script>
<div id="main-nav"></div>
</div><!-- top -->
<div id="side-nav" class="ui-resizable side-nav-resizable">
<div id="nav-tree">
<div id="nav-tree-contents">
<div id="nav-sync" class="sync"></div>
</div>
</div>
<div id="splitbar" style="-moz-user-select:none;"
class="ui-resizable-handle">
</div>
</div>
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
$(function(){initNavTree('module-dom-examples.html',''); initResizable(true); });
/* @license-end */
</script>
<div id="doc-content">
<!-- window showing the filter options -->
<div id="MSearchSelectWindow"
onmouseover="return searchBox.OnSearchSelectShow()"
onmouseout="return searchBox.OnSearchSelectHide()"
onkeydown="return searchBox.OnSearchSelectKey(event)">
</div>
<!-- iframe showing the search results (closed by default) -->
<div id="MSearchResultsWindow">
<div id="MSearchResults">
<div class="SRPage">
<div id="SRIndex">
<div id="SRResults"></div>
<div class="SRStatus" id="Loading">Loading...</div>
<div class="SRStatus" id="Searching">Searching...</div>
<div class="SRStatus" id="NoMatches">No Matches</div>
</div>
</div>
</div>
</div>
<div><div class="header">
<div class="headertitle"><div class="title">Example</div></div>
</div><!--header-->
<div class="contents">
<div class="toc"><h3>Table of Contents</h3>
<ul>
<li class="level1">
<a href="#border">border</a>
</li>
<li class="level1">
<a href="#border_colored">border_colored</a>
</li>
<li class="level1">
<a href="#border_style">border_style</a>
</li>
<li class="level1">
<a href="#canvas">canvas</a>
</li>
<li class="level1">
<a href="#color_gallery">color_gallery</a>
</li>
<li class="level1">
<a href="#color_info_palette256">color_info_palette256</a>
</li>
<li class="level1">
<a href="#color_truecolor_hsv">color_truecolor_HSV</a>
</li>
<li class="level1">
<a href="#color_truecolor_rgb">color_truecolor_RGB</a>
</li>
<li class="level1">
<a href="#dbox">dbox</a>
</li>
<li class="level1">
<a href="#gauge">gauge</a>
</li>
<li class="level1">
<a href="#gauge_direction">gauge_direction</a>
</li>
<li class="level1">
<a href="#graph">graph</a>
</li>
<li class="level1">
<a href="#gridbox">gridbox</a>
</li>
<li class="level1">
<a href="#hflow">hflow</a>
</li>
<li class="level1">
<a href="#html_like">html_like</a>
</li>
<li class="level1">
<a href="#linear_gradient">linear_gradient</a>
</li>
<li class="level1">
<a href="#package_manager">package_manager</a>
</li>
<li class="level1">
<a href="#paragraph">paragraph</a>
</li>
<li class="level1">
<a href="#separator">separator</a>
</li>
<li class="level1">
<a href="#separator_style">separator_style</a>
</li>
<li class="level1">
<a href="#size">size</a>
</li>
<li class="level1">
<a href="#spinner">spinner</a>
</li>
<li class="level1">
<a href="#style_blink">style_blink</a>
</li>
<li class="level1">
<a href="#style_bold">style_bold</a>
</li>
<li class="level1">
<a href="#style_color">style_color</a>
</li>
<li class="level1">
<a href="#style_dim">style_dim</a>
</li>
<li class="level1">
<a href="#style_gallery">style_gallery</a>
</li>
<li class="level1">
<a href="#style_hyperlink">style_hyperlink</a>
</li>
<li class="level1">
<a href="#style_inverted">style_inverted</a>
</li>
<li class="level1">
<a href="#style_italic">style_italic</a>
</li>
<li class="level1">
<a href="#style_strikethrough">style_strikethrough</a>
</li>
<li class="level1">
<a href="#style_underlined">style_underlined</a>
</li>
<li class="level1">
<a href="#style_underlined_double">style_underlined_double</a>
</li>
<li class="level1">
<a href="#table">table</a>
</li>
<li class="level1">
<a href="#vbox_hbox">vbox_hbox</a>
</li>
<li class="level1">
<a href="#vflow">vflow</a>
</li>
</ul>
</div>
<div class="textblock"><h1><a class="anchor" id="border"></a>
border</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/border">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;stdlib.h&gt;</span> <span class="comment">// for EXIT_SUCCESS</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, operator|, vbox, border, Element, Fit, hbox</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 Full, Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for allocator</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</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 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"> <span class="keyword">auto</span> document = <span class="comment">//</span></div>
<div class="line"> hbox({</div>
<div class="line"> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;Line 1&quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;Line 2&quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;Line 3&quot;</span>),</div>
<div class="line"> }) | border,</div>
<div class="line"> </div>
<div class="line"> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;Line 4&quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;Line 5&quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;Line 6&quot;</span>),</div>
<div class="line"> }) | border,</div>
<div class="line"> </div>
<div class="line"> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;Line 7&quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;Line 8&quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;Line 9&quot;</span>),</div>
<div class="line"> }) | border,</div>
<div class="line"> });</div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> screen.Print();</div>
<div class="line"> <span class="keywordflow">return</span> EXIT_SUCCESS;</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="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_ae66f6b31b5ad750f1fe042a706a4e3d4"><div class="ttname"><a href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a></div><div class="ttdeci">int main()</div><div class="ttdef"><b>Definition</b> <a href="examples_2component_2button_8cpp_source.html#l00030">examples/component/button.cpp:30</a></div></div>
<div class="ttc" id="agroup__dom_html_gad4b8aa9392f56ba41e2b421e046a7d83"><div class="ttname"><a href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a></div><div class="ttdeci">void Render(Screen &amp;screen, const Element &amp;element)</div><div class="ttdoc">在 ftxui::Screen 上顯示元素。</div><div class="ttdef"><b>Definition</b> <a href="node_8cpp_source.html#l00082">node.cpp:82</a></div></div>
<div class="ttc" id="anamespaceftxui_html"><div class="ttname"><a href="namespaceftxui.html">ftxui</a></div><div class="ttdoc">FTXUI 的 ftxui:: 命名空間</div><div class="ttdef"><b>Definition</b> <a href="animation_8hpp_source.html#l00010">animation.hpp:10</a></div></div>
<div class="ttc" id="anode_8hpp_html"><div class="ttname"><a href="node_8hpp.html">node.hpp</a></div></div>
<div class="ttc" id="ascreen_8hpp_html"><div class="ttname"><a href="screen_8hpp.html">screen.hpp</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="border_colored"></a>
border_colored</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/border_colored">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="elements_8hpp.html">ftxui/dom/elements.hpp</a>&gt;</span> <span class="comment">// for operator|, text, Element, Fit, borderDouble, borderHeavy, borderLight, borderRounded, vbox</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 Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;iostream&gt;</span> <span class="comment">// for endl, cout, ostream</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for allocator</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</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 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="keyword">auto</span> make_boxed = [] {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;borderLight&quot;</span>) | borderStyled(LIGHT, Color::Red),</div>
<div class="line"> text(<span class="stringliteral">&quot;borderDashed&quot;</span>) | borderStyled(DASHED, Color::Green),</div>
<div class="line"> text(<span class="stringliteral">&quot;borderHeavy&quot;</span>) | borderStyled(HEAVY, Color::Blue),</div>
<div class="line"> text(<span class="stringliteral">&quot;borderDouble&quot;</span>) | borderStyled(DOUBLE, Color::Yellow),</div>
<div class="line"> text(<span class="stringliteral">&quot;borderRounded&quot;</span>) | borderStyled(ROUNDED, Color::Cyan),</div>
<div class="line"> });</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> document = hbox({</div>
<div class="line"> make_boxed(),</div>
<div class="line"> separator() | color(Color::Red),</div>
<div class="line"> make_boxed(),</div>
<div class="line"> separator() | color(Color::Red),</div>
<div class="line"> make_boxed(),</div>
<div class="line"> }) |</div>
<div class="line"> borderStyled(ROUNDED, Color::Red);</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen =</div>
<div class="line"> Screen::Create(Dimension::Fit(document), Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> screen.Print();</div>
<div class="line"> std::cout &lt;&lt; std::endl;</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="border_style"></a>
border_style</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/border_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="elements_8hpp.html">ftxui/dom/elements.hpp</a>&gt;</span> <span class="comment">// for operator|, text, Element, Fit, borderDouble, borderHeavy, borderLight, borderRounded, vbox</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 Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;iostream&gt;</span> <span class="comment">// for endl, cout, ostream</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for allocator</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</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 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="keyword">auto</span> document = vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;borderLight&quot;</span>) | borderLight,</div>
<div class="line"> text(<span class="stringliteral">&quot;borderDashed&quot;</span>) | borderDashed,</div>
<div class="line"> text(<span class="stringliteral">&quot;borderHeavy&quot;</span>) | borderHeavy,</div>
<div class="line"> text(<span class="stringliteral">&quot;borderDouble&quot;</span>) | borderDouble,</div>
<div class="line"> text(<span class="stringliteral">&quot;borderRounded&quot;</span>) | borderRounded,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen =</div>
<div class="line"> Screen::Create(Dimension::Fit(document), Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> screen.Print();</div>
<div class="line"> std::cout &lt;&lt; std::endl;</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="canvas"></a>
canvas</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/canvas">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="comment">// 用於 getchar</span></div>
<div class="line"> <span class="comment">// 用於 cos</span></div>
<div class="line"> <span class="comment">// 用於 Fit, canvas, operator|, border, Element</span></div>
<div class="line"> <span class="comment">// 用於 Pixel, Screen</span></div>
<div class="line"> <span class="comment">// 用於 vector, allocator</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="canvas_8hpp.html">ftxui/dom/canvas.hpp</a>&quot;</span> <span class="comment">// 用於 Canvas</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// 用於 Render</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::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="keyword">auto</span> c = <a class="code hl_struct" href="group__dom.html#structftxui_1_1Canvas">Canvas</a>(100, 100);</div>
<div class="line"> </div>
<div class="line"> c.DrawText(0, 0, <span class="stringliteral">&quot;This is a canvas&quot;</span>, [](<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"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// 三角形:</span></div>
<div class="line"> c.DrawPointLine(10, 10, 80, 10, Color::Red);</div>
<div class="line"> c.DrawPointLine(80, 10, 80, 40, Color::Blue);</div>
<div class="line"> c.DrawPointLine(80, 40, 10, 10, Color::Green);</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// 圓形,未填充和已填充:</span></div>
<div class="line"> c.DrawPointCircle(30, 50, 20);</div>
<div class="line"> c.DrawPointCircleFilled(40, 40, 10);</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// 繪製函數:</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(80 + 20 * cos(x * 0.2));</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> x = 0; x &lt; 99; x++) {</div>
<div class="line"> c.DrawPointLine(x, ys[x], x + 1, ys[x + 1], Color::Red);</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> document = <a class="code hl_function" href="src_2ftxui_2dom_2canvas_8cpp.html#a57d7bdf155e190de514a689abb4e9a35">canvas</a>(&amp;c) | border;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> screen.Print();</div>
<div class="line"> getchar();</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="agroup__dom_html_structftxui_1_1Canvas"><div class="ttname"><a href="group__dom.html#structftxui_1_1Canvas">ftxui::Canvas</a></div><div class="ttdoc">畫布是與繪圖操作相關聯的可繪製緩衝區。</div><div class="ttdef"><b>Definition</b> <a href="canvas_8hpp_source.html#l00035">canvas.hpp:35</a></div></div>
<div class="ttc" id="agroup__screen_html_a2ce82adc1d02baf22df658b903dcb351"><div class="ttname"><a href="group__screen.html#a2ce82adc1d02baf22df658b903dcb351">ftxui::Pixel::foreground_color</a></div><div class="ttdeci">Color foreground_color</div><div class="ttdef"><b>Definition</b> <a href="pixel_8hpp_source.html#l00048">pixel.hpp:48</a></div></div>
<div class="ttc" id="agroup__screen_html_a7c8849e8321ea248cd4991ea8ef198eb"><div class="ttname"><a href="group__screen.html#a7c8849e8321ea248cd4991ea8ef198eb">ftxui::Pixel::underlined</a></div><div class="ttdeci">bool underlined</div><div class="ttdef"><b>Definition</b> <a href="pixel_8hpp_source.html#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>Definition</b> <a href="pixel_8hpp_source.html#l00014">pixel.hpp:14</a></div></div>
<div class="ttc" id="asrc_2ftxui_2dom_2canvas_8cpp_html_a57d7bdf155e190de514a689abb4e9a35"><div class="ttname"><a href="src_2ftxui_2dom_2canvas_8cpp.html#a57d7bdf155e190de514a689abb4e9a35">canvas</a></div><div class="ttdeci">Element canvas(ConstRef&lt; Canvas &gt; canvas)</div><div class="ttdoc">從 Canvas 或對 Canvas 的參考中產生一個元素。</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2canvas_8cpp_source.html#l00886">src/ftxui/dom/canvas.cpp:886</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="color_gallery"></a>
color_gallery</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/color_gallery">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;<a class="code" href="color__info_8hpp.html">ftxui/screen/color_info.hpp</a>&gt;</span> <span class="comment">// for ColorInfo</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 Full, Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;<a class="code" href="terminal_8hpp.html">ftxui/screen/terminal.hpp</a>&gt;</span> <span class="comment">// for ColorSupport, Color, Palette16, Palette256, TrueColor</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;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="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for text, bgcolor, color, vbox, hbox, separator, operator|, Elements, Element, Fit, border</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</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, Color::Blue, Color::BlueLight, Color::Cyan, Color::CyanLight, Color::Default, Color::GrayDark, Color::GrayLight, Color::Green, Color::GreenLight, Color::Magenta, Color::MagentaLight, Color::Red, Color::RedLight, Color::White, Color::Yellow, Color::YellowLight, Color::Palette256, ftxui</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"><span class="preprocessor">#include &quot;<a class="code" href="color__info__sorted__2d_8ipp.html">./color_info_sorted_2d.ipp</a>&quot;</span> <span class="comment">// for ColorInfoSorted2D</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="comment">// clang-format off</span></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 色調色板:&quot;</span>),</div>
<div class="line"> separator(),</div>
<div class="line"> hbox(</div>
<div class="line"> vbox(</div>
<div class="line"> color(Color::Default, text(<span class="stringliteral">&quot;Default&quot;</span>)),</div>
<div class="line"> color(Color::Black, text(<span class="stringliteral">&quot;Black&quot;</span>)),</div>
<div class="line"> color(Color::GrayDark, text(<span class="stringliteral">&quot;GrayDark&quot;</span>)),</div>
<div class="line"> color(Color::GrayLight, text(<span class="stringliteral">&quot;GrayLight&quot;</span>)),</div>
<div class="line"> color(Color::White, text(<span class="stringliteral">&quot;White&quot;</span>)),</div>
<div class="line"> color(Color::Blue, text(<span class="stringliteral">&quot;Blue&quot;</span>)),</div>
<div class="line"> color(Color::BlueLight, text(<span class="stringliteral">&quot;BlueLight&quot;</span>)),</div>
<div class="line"> color(Color::Cyan, text(<span class="stringliteral">&quot;Cyan&quot;</span>)),</div>
<div class="line"> color(Color::CyanLight, text(<span class="stringliteral">&quot;CyanLight&quot;</span>)),</div>
<div class="line"> color(Color::Green, text(<span class="stringliteral">&quot;Green&quot;</span>)),</div>
<div class="line"> color(Color::GreenLight, text(<span class="stringliteral">&quot;GreenLight&quot;</span>)),</div>
<div class="line"> color(Color::Magenta, text(<span class="stringliteral">&quot;Magenta&quot;</span>)),</div>
<div class="line"> color(Color::MagentaLight, text(<span class="stringliteral">&quot;MagentaLight&quot;</span>)),</div>
<div class="line"> color(Color::Red, text(<span class="stringliteral">&quot;Red&quot;</span>)),</div>
<div class="line"> color(Color::RedLight, text(<span class="stringliteral">&quot;RedLight&quot;</span>)),</div>
<div class="line"> color(Color::Yellow, text(<span class="stringliteral">&quot;Yellow&quot;</span>)),</div>
<div class="line"> color(Color::YellowLight, text(<span class="stringliteral">&quot;YellowLight&quot;</span>))</div>
<div class="line"> ),</div>
<div class="line"> vbox(</div>
<div class="line"> bgcolor(Color::Default, text(<span class="stringliteral">&quot;Default&quot;</span>)),</div>
<div class="line"> bgcolor(Color::Black, text(<span class="stringliteral">&quot;Black&quot;</span>)),</div>
<div class="line"> bgcolor(Color::GrayDark, text(<span class="stringliteral">&quot;GrayDark&quot;</span>)),</div>
<div class="line"> bgcolor(Color::GrayLight, text(<span class="stringliteral">&quot;GrayLight&quot;</span>)),</div>
<div class="line"> bgcolor(Color::White, text(<span class="stringliteral">&quot;White&quot;</span>)),</div>
<div class="line"> bgcolor(Color::Blue, text(<span class="stringliteral">&quot;Blue&quot;</span>)),</div>
<div class="line"> bgcolor(Color::BlueLight, text(<span class="stringliteral">&quot;BlueLight&quot;</span>)),</div>
<div class="line"> bgcolor(Color::Cyan, text(<span class="stringliteral">&quot;Cyan&quot;</span>)),</div>
<div class="line"> bgcolor(Color::CyanLight, text(<span class="stringliteral">&quot;CyanLight&quot;</span>)),</div>
<div class="line"> bgcolor(Color::Green, text(<span class="stringliteral">&quot;Green&quot;</span>)),</div>
<div class="line"> bgcolor(Color::GreenLight, text(<span class="stringliteral">&quot;GreenLight&quot;</span>)),</div>
<div class="line"> bgcolor(Color::Magenta, text(<span class="stringliteral">&quot;Magenta&quot;</span>)),</div>
<div class="line"> bgcolor(Color::MagentaLight, text(<span class="stringliteral">&quot;MagentaLight&quot;</span>)),</div>
<div class="line"> bgcolor(Color::Red, text(<span class="stringliteral">&quot;Red&quot;</span>)),</div>
<div class="line"> bgcolor(Color::RedLight, text(<span class="stringliteral">&quot;RedLight&quot;</span>)),</div>
<div class="line"> bgcolor(Color::Yellow, text(<span class="stringliteral">&quot;Yellow&quot;</span>)),</div>
<div class="line"> bgcolor(Color::YellowLight, text(<span class="stringliteral">&quot;YellowLight&quot;</span>))</div>
<div class="line"> )</div>
<div class="line"> )</div>
<div class="line"> );</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// clang-format on</span></div>
<div class="line"> <span class="keyword">auto</span> palette_256_color_display = text(<span class="stringliteral">&quot;256 色調色板:&quot;</span>);</div>
<div class="line"> {</div>
<div class="line"> std::vector&lt;std::vector&lt;ColorInfo&gt;&gt; info_columns = <a class="code hl_function" href="color__info__sorted__2d_8ipp.html#a0f08918d6064cd2a0e56cb9ec74033ca">ColorInfoSorted2D</a>();</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a> columns;</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keyword">auto</span>&amp; column : info_columns) {</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a> column_elements;</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keyword">auto</span>&amp; it : column) {</div>
<div class="line"> column_elements.push_back(</div>
<div class="line"> text(<span class="stringliteral">&quot; &quot;</span>) | bgcolor(<a class="code hl_class" href="group__screen.html#classftxui_1_1Color">Color</a>(<a class="code hl_enumeration" href="group__screen.html#abd07c48f62cc507fafa2486a43130fcf">Color::Palette256</a>(it.index_256))));</div>
<div class="line"> }</div>
<div class="line"> columns.push_back(hbox(std::move(column_elements)));</div>
<div class="line"> }</div>
<div class="line"> palette_256_color_display = vbox({</div>
<div class="line"> palette_256_color_display,</div>
<div class="line"> separator(),</div>
<div class="line"> vbox(columns),</div>
<div class="line"> });</div>
<div class="line"> }</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;真彩色: 24位元:&quot;</span>);</div>
<div class="line"> {</div>
<div class="line"> <span class="keyword">const</span> <span class="keywordtype">int</span> max_value = 255;</div>
<div class="line"> <span class="keyword">const</span> <span class="keywordtype">int</span> value_increment = 8;</div>
<div class="line"> <span class="keyword">const</span> <span class="keywordtype">int</span> hue_increment = 6;</div>
<div class="line"> <span class="keywordtype">int</span> saturation = max_value;</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; max_value; value += 2 * value_increment) {</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; max_value; hue += hue_increment) {</div>
<div class="line"> line.push_back(</div>
<div class="line"> text(<span class="stringliteral">&quot;&quot;</span>) <span class="comment">//</span></div>
<div class="line"> | color(Color::HSV(hue, saturation, value)) <span class="comment">//</span></div>
<div class="line"> | bgcolor(Color::HSV(hue, saturation, value + value_increment)));</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"> }</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> terminal_info =</div>
<div class="line"> vbox({</div>
<div class="line"> Terminal::ColorSupport() &gt;= Terminal::Color::Palette16</div>
<div class="line"> ? text(<span class="stringliteral">&quot; 16 色調色板支援 : 是&quot;</span>)</div>
<div class="line"> : text(<span class="stringliteral">&quot; 16 色調色板支援 : 否&quot;</span>),</div>
<div class="line"> <a class="code hl_namespace" href="namespaceTerminal.html">Terminal</a>::ColorSupport() &gt;= <a class="code hl_namespace" href="namespaceTerminal.html">Terminal</a>::<a class="code hl_class" href="group__screen.html#classftxui_1_1Color">Color</a>::<a class="code hl_enumvalue" href="group__screen.html#ggab87bacfdad76e61b9412d7124be44c1ca7b88ab2a5c8fe8866c96ea4acb623876">Palette256</a></div>
<div class="line"> ? text(<span class="stringliteral">&quot;256 色調色板支援 : 是&quot;</span>)</div>
<div class="line"> : text(<span class="stringliteral">&quot;256 色調色板支援 : 否&quot;</span>),</div>
<div class="line"> <a class="code hl_namespace" href="namespaceTerminal.html">Terminal</a>::ColorSupport() &gt;= <a class="code hl_namespace" href="namespaceTerminal.html">Terminal</a>::<a class="code hl_class" href="group__screen.html#classftxui_1_1Color">Color</a>::<a class="code hl_enumvalue" href="group__screen.html#ggab87bacfdad76e61b9412d7124be44c1ca7afd9568e82d523c91b2bfe0cc47be29">TrueColor</a></div>
<div class="line"> ? text(<span class="stringliteral">&quot; 真彩色支援 : 是&quot;</span>)</div>
<div class="line"> : text(<span class="stringliteral">&quot; 真彩色支援 : 否&quot;</span>),</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> document = vbox({hbox({</div>
<div class="line"> basic_color_display,</div>
<div class="line"> text(<span class="stringliteral">&quot; &quot;</span>),</div>
<div class="line"> palette_256_color_display,</div>
<div class="line"> text(<span class="stringliteral">&quot; &quot;</span>),</div>
<div class="line"> true_color_display,</div>
<div class="line"> }),</div>
<div class="line"> terminal_info});</div>
<div class="line"> <span class="comment">// clang-format on</span></div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> </div>
<div class="line"> screen.Print();</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"><div class="ttname"><a href="color__info__sorted__2d_8ipp.html">color_info_sorted_2d.ipp</a></div></div>
<div class="ttc" id="acolor__info__sorted__2d_8ipp_html_a0f08918d6064cd2a0e56cb9ec74033ca"><div class="ttname"><a href="color__info__sorted__2d_8ipp.html#a0f08918d6064cd2a0e56cb9ec74033ca">ColorInfoSorted2D</a></div><div class="ttdeci">std::vector&lt; std::vector&lt; ftxui::ColorInfo &gt; &gt; ColorInfoSorted2D()</div><div class="ttdef"><b>Definition</b> <a href="color__info__sorted__2d_8ipp_source.html#l00005">color_info_sorted_2d.ipp:5</a></div></div>
<div class="ttc" id="agroup__screen_html_abd07c48f62cc507fafa2486a43130fcf"><div class="ttname"><a href="group__screen.html#abd07c48f62cc507fafa2486a43130fcf">ftxui::Color::Palette256</a></div><div class="ttdeci">Palette256</div><div class="ttdef"><b>Definition</b> <a href="color_8hpp_source.html#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>Definition</b> <a href="color_8hpp_source.html#l00020">color.hpp:20</a></div></div>
<div class="ttc" id="agroup__screen_html_ggab87bacfdad76e61b9412d7124be44c1ca7afd9568e82d523c91b2bfe0cc47be29"><div class="ttname"><a href="group__screen.html#ggab87bacfdad76e61b9412d7124be44c1ca7afd9568e82d523c91b2bfe0cc47be29">ftxui::Terminal::TrueColor</a></div><div class="ttdeci">@ TrueColor</div><div class="ttdef"><b>Definition</b> <a href="terminal_8hpp_source.html#l00026">terminal.hpp:26</a></div></div>
<div class="ttc" id="agroup__screen_html_ggab87bacfdad76e61b9412d7124be44c1ca7b88ab2a5c8fe8866c96ea4acb623876"><div class="ttname"><a href="group__screen.html#ggab87bacfdad76e61b9412d7124be44c1ca7b88ab2a5c8fe8866c96ea4acb623876">ftxui::Terminal::Palette256</a></div><div class="ttdeci">@ Palette256</div><div class="ttdef"><b>Definition</b> <a href="terminal_8hpp_source.html#l00025">terminal.hpp:25</a></div></div>
<div class="ttc" id="anamespaceTerminal_html"><div class="ttname"><a href="namespaceTerminal.html">Terminal</a></div><div class="ttdoc">FTXUI ftxui::Terminal:: 命名空間</div></div>
<div class="ttc" id="anamespaceftxui_html_a5d4aa06ca6cc6a72e981bd5386f93f0a"><div class="ttname"><a href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">ftxui::Elements</a></div><div class="ttdeci">std::vector&lt; Element &gt; Elements</div><div class="ttdef"><b>Definition</b> <a href="elements_8hpp_source.html#l00023">elements.hpp:23</a></div></div>
<div class="ttc" id="aterminal_8hpp_html"><div class="ttname"><a href="terminal_8hpp.html">terminal.hpp</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="color_info_palette256"></a>
color_info_palette256</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/color_info_palette256">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="elements_8hpp.html">ftxui/dom/elements.hpp</a>&gt;</span> <span class="comment">// for text, bgcolor, hbox, operator|, Elements, Fit, vbox, Element</span></div>
<div class="line"><span class="preprocessor">#include &lt;<a class="code" href="color__info_8hpp.html">ftxui/screen/color_info.hpp</a>&gt;</span> <span class="comment">// for ColorInfo</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 Full, Screen</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, allocator</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</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::Palette256, ftxui</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"><span class="preprocessor">#include &quot;<a class="code" href="color__info__sorted__2d_8ipp.html">./color_info_sorted_2d.ipp</a>&quot;</span> <span class="comment">// for ColorInfoSorted2D</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"> 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"> </div>
<div class="line"> <span class="comment">// Draw every columns</span></div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a> columns_elements;</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(hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot; &quot;</span>) | bgcolor(<a class="code hl_class" href="group__screen.html#classftxui_1_1Color">Color</a>(<a class="code hl_enumeration" href="group__screen.html#abd07c48f62cc507fafa2486a43130fcf">Color::Palette256</a>(it.index_256))),</div>
<div class="line"> text(it.name),</div>
<div class="line"> }));</div>
<div class="line"> }</div>
<div class="line"> columns_elements.push_back(vbox(std::move(column_elements)));</div>
<div class="line"> }</div>
<div class="line"> <span class="keyword">auto</span> document = hbox(std::move(columns_elements));</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> </div>
<div class="line"> screen.Print();</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="color_truecolor_hsv"></a>
color_truecolor_HSV</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/color_truecolor_HSV">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="elements_8hpp.html">ftxui/dom/elements.hpp</a>&gt;</span> <span class="comment">// for operator|, Elements, Fit, bgcolor, color, hbox, text, vbox, Element</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 Full, Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for allocator</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="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</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, 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> 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 += 20) {</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 += 2) {</div>
<div class="line"> line.push_back(text(<span class="stringliteral">&quot;&quot;</span>) <span class="comment">//</span></div>
<div class="line"> | color(Color::HSV(hue, saturation, value)) <span class="comment">//</span></div>
<div class="line"> | bgcolor(Color::HSV(hue, saturation, value + 10)));</div>
<div class="line"> }</div>
<div class="line"> array.push_back(hbox(std::move(line)));</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> document = vbox(std::move(array));</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> </div>
<div class="line"> screen.Print();</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="color_truecolor_rgb"></a>
color_truecolor_RGB</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/color_truecolor_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;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&gt;</span> <span class="comment">// 為了 hbox, text, bgcolor, operator|, vbox, Elements, window, Element, Fit</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">// 為了 Full, Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// 為了 allocator</span></div>
<div class="line"><span class="preprocessor">#include &lt;utility&gt;</span> <span class="comment">// 為了 move</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// 為了 Render</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, 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"> <a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a> red_line;</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a> green_line;</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a> blue_line;</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a> cyan_line;</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a> magenta_line;</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a> yellow_line;</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> value = 0; value &lt; 255; value += 3) {</div>
<div class="line"> <span class="keywordtype">int</span> v = value * value / 255;</div>
<div class="line"> red_line.push_back(text(<span class="stringliteral">&quot; &quot;</span>) | bgcolor(Color::RGB(v, 0, 0)));</div>
<div class="line"> green_line.push_back(text(<span class="stringliteral">&quot; &quot;</span>) | bgcolor(Color::RGB(0, v, 0)));</div>
<div class="line"> blue_line.push_back(text(<span class="stringliteral">&quot; &quot;</span>) | bgcolor(Color::RGB(0, 0, v)));</div>
<div class="line"> cyan_line.push_back(text(<span class="stringliteral">&quot; &quot;</span>) | bgcolor(Color::RGB(0, v, v)));</div>
<div class="line"> magenta_line.push_back(text(<span class="stringliteral">&quot; &quot;</span>) | bgcolor(Color::RGB(v, 0, v)));</div>
<div class="line"> yellow_line.push_back(text(<span class="stringliteral">&quot; &quot;</span>) | bgcolor(Color::RGB(v, v, 0)));</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> document = vbox({</div>
<div class="line"> window(text(<span class="stringliteral">&quot;原色&quot;</span>),</div>
<div class="line"> vbox({</div>
<div class="line"> hbox({text(<span class="stringliteral">&quot;紅色線 :&quot;</span>), hbox(std::move(red_line))}),</div>
<div class="line"> hbox({text(<span class="stringliteral">&quot;綠色線 :&quot;</span>), hbox(std::move(green_line))}),</div>
<div class="line"> hbox({text(<span class="stringliteral">&quot;藍色線 :&quot;</span>), hbox(std::move(blue_line))}),</div>
<div class="line"> })),</div>
<div class="line"> window(text(<span class="stringliteral">&quot;輔色&quot;</span>),</div>
<div class="line"> vbox({</div>
<div class="line"> hbox({text(<span class="stringliteral">&quot;青色線 :&quot;</span>), hbox(std::move(cyan_line))}),</div>
<div class="line"> hbox({text(<span class="stringliteral">&quot;洋紅色線:&quot;</span>), hbox(std::move(magenta_line))}),</div>
<div class="line"> hbox({text(<span class="stringliteral">&quot;黃色線 :&quot;</span>), hbox(std::move(yellow_line))}),</div>
<div class="line"> })),</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> </div>
<div class="line"> screen.Print();</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="dbox"></a>
dbox</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/dbox">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="elements_8hpp.html">ftxui/dom/elements.hpp</a>&gt;</span> <span class="comment">// for text, operator|, border, Element, vbox, center, Fit, dbox</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 Full, Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for allocator</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</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 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"> <span class="keyword">auto</span> document = dbox({</div>
<div class="line"> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;line_1&quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;line_2&quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;line_3&quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;line_4&quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;line_5&quot;</span>),</div>
<div class="line"> }) | border,</div>
<div class="line"> text(<span class="stringliteral">&quot;overlay&quot;</span>) | border | center,</div>
<div class="line"> });</div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> </div>
<div class="line"> screen.Print();</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="gauge"></a>
gauge</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/gauge">Demo</a> </p><div class="fragment"><div class="line"><span class="comment">// Copyright 2020 Arthur Sonzogni. All rights reserved.</span></div>
<div class="line"><span class="comment">// Use of this source code is governed by the MIT license that can be found in</span></div>
<div class="line"><span class="comment">// the LICENSE file.</span></div>
<div class="line"><span class="preprocessor">#include &lt;chrono&gt;</span> <span class="comment">// for operator&quot;&quot;s, chrono_literals</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, gauge, operator|, flex, hbox, Element</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 Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;iostream&gt;</span> <span class="comment">// for cout, endl, ostream</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for allocator, char_traits, operator+, operator&lt;&lt;, string, to_string, basic_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="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</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 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"> <span class="keyword">using namespace </span>std::chrono_literals;</div>
<div class="line"> </div>
<div class="line"> std::string reset_position;</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">float</span> percentage = 0.0f; percentage &lt;= 1.0f; percentage += 0.002f) {</div>
<div class="line"> std::string data_downloaded =</div>
<div class="line"> std::to_string(<span class="keywordtype">int</span>(percentage * 5000)) + <span class="stringliteral">&quot;/5000&quot;</span>;</div>
<div class="line"> <span class="keyword">auto</span> document = hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;downloading:&quot;</span>),</div>
<div class="line"> gauge(percentage) | flex,</div>
<div class="line"> text(<span class="stringliteral">&quot; &quot;</span> + data_downloaded),</div>
<div class="line"> });</div>
<div class="line"> <span class="keyword">auto</span> screen = <a class="code hl_class" href="group__screen.html#classftxui_1_1Screen">Screen</a>(100, 1);</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> std::cout &lt;&lt; reset_position;</div>
<div class="line"> screen.Print();</div>
<div class="line"> reset_position = screen.ResetPosition();</div>
<div class="line"> </div>
<div class="line"> std::this_thread::sleep_for(0.01s);</div>
<div class="line"> }</div>
<div class="line"> std::cout &lt;&lt; std::endl;</div>
<div class="line">}</div>
<div class="ttc" id="agroup__screen_html_classftxui_1_1Screen"><div class="ttname"><a href="group__screen.html#classftxui_1_1Screen">ftxui::Screen</a></div><div class="ttdoc">像素的矩形網格。</div><div class="ttdef"><b>Definition</b> <a href="screen_8hpp_source.html#l00026">screen.hpp:26</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="gauge_direction"></a>
gauge_direction</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/gauge_direction">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;chrono&gt;</span> <span class="comment">// 用於 operator&quot;&quot;s, chrono_literals</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">// 用於 filler, operator|, separator, text, border, Element, vbox, vtext, hbox, center, gaugeDown, gaugeLeft, gaugeRight, gaugeUp</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">// 用於 Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;iostream&gt;</span> <span class="comment">// 用於 cout, endl, ostream</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// 用於 allocator, operator+, operator&lt;&lt;, string, to_string</span></div>
<div class="line"><span class="preprocessor">#include &lt;thread&gt;</span> <span class="comment">// 用於 sleep_for</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// 用於 Render</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">// 用於 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"> <span class="keyword">using namespace </span>std::chrono_literals;</div>
<div class="line"> </div>
<div class="line"> std::string reset_position;</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">float</span> percentage = 0.0f; percentage &lt;= 1.0f; percentage += 0.002f) {</div>
<div class="line"> std::string data_downloaded =</div>
<div class="line"> std::to_string(<span class="keywordtype">int</span>(percentage * 5000)) + <span class="stringliteral">&quot;/5000&quot;</span>;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> gauge_up = <span class="comment">//</span></div>
<div class="line"> hbox({</div>
<div class="line"> vtext(<span class="stringliteral">&quot;gauge vertical&quot;</span>),</div>
<div class="line"> separator(),</div>
<div class="line"> gaugeUp(percentage),</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> gauge_down = <span class="comment">//</span></div>
<div class="line"> hbox({</div>
<div class="line"> vtext(<span class="stringliteral">&quot;gauge vertical&quot;</span>),</div>
<div class="line"> separator(),</div>
<div class="line"> gaugeDown(percentage),</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> gauge_right = <span class="comment">//</span></div>
<div class="line"> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;gauge horizontal&quot;</span>),</div>
<div class="line"> separator(),</div>
<div class="line"> gaugeRight(percentage),</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> gauge_left = <span class="comment">//</span></div>
<div class="line"> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;gauge horizontal&quot;</span>),</div>
<div class="line"> separator(),</div>
<div class="line"> gaugeLeft(percentage),</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> document = hbox({</div>
<div class="line"> gauge_up,</div>
<div class="line"> filler(),</div>
<div class="line"> vbox({</div>
<div class="line"> gauge_right,</div>
<div class="line"> filler(),</div>
<div class="line"> text(data_downloaded) | border | center,</div>
<div class="line"> filler(),</div>
<div class="line"> gauge_left,</div>
<div class="line"> }),</div>
<div class="line"> filler(),</div>
<div class="line"> gauge_down,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = <a class="code hl_class" href="group__screen.html#classftxui_1_1Screen">Screen</a>(32, 16);</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> std::cout &lt;&lt; reset_position;</div>
<div class="line"> screen.Print();</div>
<div class="line"> reset_position = screen.ResetPosition();</div>
<div class="line"> </div>
<div class="line"> std::this_thread::sleep_for(0.01s);</div>
<div class="line"> }</div>
<div class="line"> std::cout &lt;&lt; std::endl;</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="graph"></a>
graph</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/graph">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;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="elements_8hpp.html">ftxui/dom/elements.hpp</a>&gt;</span> <span class="comment">// for graph, operator|, separator, color, Element, vbox, flex, inverted, operator|=, Fit, hbox, size, border, GREATER_THAN, HEIGHT</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 Full, Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;functional&gt;</span> <span class="comment">// for ref, reference_wrapper</span></div>
<div class="line"><span class="preprocessor">#include &lt;iostream&gt;</span> <span class="comment">// for cout, ostream</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for shared_ptr</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for operator&lt;&lt;, 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"><span class="preprocessor">#include &lt;utility&gt;</span> <span class="comment">// for ignore</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="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</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::YellowLight, ftxui</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">class </span>Graph {</div>
<div class="line"> <span class="keyword">public</span>:</div>
<div class="line"> std::vector&lt;int&gt; operator()(<span class="keywordtype">int</span> width, <span class="keywordtype">int</span> height)<span class="keyword"> const </span>{</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;</div>
<div class="line"> v += 0.1f * sin((i + shift) * 0.1f); <span class="comment">// NOLINT</span></div>
<div class="line"> v += 0.2f * sin((i + shift + 10) * 0.15f); <span class="comment">// NOLINT</span></div>
<div class="line"> v += 0.1f * sin((i + shift) * 0.03f); <span class="comment">// NOLINT</span></div>
<div class="line"> v *= height; <span class="comment">// NOLINT</span></div>
<div class="line"> v += 0.5f * height; <span class="comment">// NOLINT</span></div>
<div class="line"> output[i] = <span class="keyword">static_cast&lt;</span><span class="keywordtype">int</span><span class="keyword">&gt;</span>(v);</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> output;</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordtype">int</span> shift = 0;</div>
<div class="line">};</div>
<div class="line"> </div>
<div class="line">std::vector&lt;int&gt; <a class="code hl_function" href="examples_2dom_2graph_8cpp.html#a5ab45e2cb218468666c7dc7b2b957396">triangle</a>(<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"> output[i] = i % (height - 4) + 2;</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="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">using namespace </span>std::chrono_literals;</div>
<div class="line"> </div>
<div class="line"> Graph my_graph;</div>
<div class="line"> </div>
<div class="line"> std::string reset_position;</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> i = 0;; ++i) {</div>
<div class="line"> std::ignore = i;</div>
<div class="line"> <span class="keyword">auto</span> document = hbox({</div>
<div class="line"> vbox({</div>
<div class="line"> graph(std::ref(my_graph)),</div>
<div class="line"> separator(),</div>
<div class="line"> graph(<a class="code hl_function" href="examples_2dom_2graph_8cpp.html#a5ab45e2cb218468666c7dc7b2b957396">triangle</a>) | inverted,</div>
<div class="line"> }) | flex,</div>
<div class="line"> separator(),</div>
<div class="line"> vbox({</div>
<div class="line"> graph(std::ref(my_graph)) | color(Color::BlueLight),</div>
<div class="line"> separator(),</div>
<div class="line"> graph(std::ref(my_graph)) | color(Color::RedLight),</div>
<div class="line"> separator(),</div>
<div class="line"> graph(std::ref(my_graph)) | color(Color::YellowLight),</div>
<div class="line"> }) | flex,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> document |= border;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">const</span> <span class="keywordtype">int</span> min_width = 40;</div>
<div class="line"> document |= size(HEIGHT, GREATER_THAN, min_width);</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> std::cout &lt;&lt; reset_position;</div>
<div class="line"> screen.Print();</div>
<div class="line"> reset_position = screen.ResetPosition();</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">const</span> <span class="keyword">auto</span> sleep_time = 0.03s;</div>
<div class="line"> std::this_thread::sleep_for(sleep_time);</div>
<div class="line"> my_graph.shift++;</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="aexamples_2dom_2graph_8cpp_html_a5ab45e2cb218468666c7dc7b2b957396"><div class="ttname"><a href="examples_2dom_2graph_8cpp.html#a5ab45e2cb218468666c7dc7b2b957396">triangle</a></div><div class="ttdeci">std::vector&lt; int &gt; triangle(int width, int height)</div><div class="ttdef"><b>Definition</b> <a href="examples_2dom_2graph_8cpp_source.html#l00037">examples/dom/graph.cpp:37</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="gridbox"></a>
gridbox</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/gridbox">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;stdio.h&gt;</span> <span class="comment">// for getchar</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 Elements, gridbox, Fit, operator|, text, border, Element</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 Screen</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="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</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 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"> <span class="keyword">auto</span> cell = [](<span class="keyword">const</span> <span class="keywordtype">char</span>* t) { <span class="keywordflow">return</span> text(t) | border; };</div>
<div class="line"> <span class="keyword">auto</span> document = <span class="comment">//</span></div>
<div class="line"> gridbox({</div>
<div class="line"> {</div>
<div class="line"> cell(<span class="stringliteral">&quot;north-west&quot;</span>),</div>
<div class="line"> cell(<span class="stringliteral">&quot;north&quot;</span>),</div>
<div class="line"> cell(<span class="stringliteral">&quot;north-east&quot;</span>),</div>
<div class="line"> },</div>
<div class="line"> {</div>
<div class="line"> cell(<span class="stringliteral">&quot;center-west&quot;</span>),</div>
<div class="line"> gridbox({</div>
<div class="line"> {</div>
<div class="line"> cell(<span class="stringliteral">&quot;center-north-west&quot;</span>),</div>
<div class="line"> cell(<span class="stringliteral">&quot;center-north-east&quot;</span>),</div>
<div class="line"> },</div>
<div class="line"> {</div>
<div class="line"> cell(<span class="stringliteral">&quot;center-south-west&quot;</span>),</div>
<div class="line"> cell(<span class="stringliteral">&quot;center-south-east&quot;</span>),</div>
<div class="line"> },</div>
<div class="line"> }),</div>
<div class="line"> cell(<span class="stringliteral">&quot;center-east&quot;</span>),</div>
<div class="line"> },</div>
<div class="line"> {</div>
<div class="line"> cell(<span class="stringliteral">&quot;south-west&quot;</span>),</div>
<div class="line"> cell(<span class="stringliteral">&quot;south&quot;</span>),</div>
<div class="line"> cell(<span class="stringliteral">&quot;south-east&quot;</span>),</div>
<div class="line"> },</div>
<div class="line"> });</div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> screen.Print();</div>
<div class="line"> getchar();</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="hflow"></a>
hflow</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/hflow">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;stdio.h&gt;</span> <span class="comment">// for getchar</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|, size, Element, text, hcenter, Decorator, Fit, WIDTH, hflow, window, EQUAL, GREATER_THAN, HEIGHT, bold, border, dim, LESS_THAN</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 Full, Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for allocator, char_traits, operator+, to_string, string</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</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 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"> <span class="keyword">auto</span> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a> = [](<span class="keywordtype">int</span> dimx, <span class="keywordtype">int</span> dimy) {</div>
<div class="line"> std::string title = std::to_string(dimx) + <span class="stringliteral">&quot;x&quot;</span> + std::to_string(dimy);</div>
<div class="line"> <span class="keywordflow">return</span> window(text(title) | hcenter | bold,</div>
<div class="line"> text(<span class="stringliteral">&quot;content&quot;</span>) | hcenter | dim) |</div>
<div class="line"> size(WIDTH, EQUAL, dimx) | size(HEIGHT, EQUAL, dimy);</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> style = size(WIDTH, GREATER_THAN, 20) | border |</div>
<div class="line"> size(HEIGHT, GREATER_THAN, 30) | size(WIDTH, LESS_THAN, 50);</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> document = hflow({</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(7, 7),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(7, 5),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(5, 7),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(10, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(10, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(10, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(10, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(11, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(11, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(11, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(11, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(12, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(12, 5),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(12, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(13, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(13, 3),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(13, 3),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(10, 3),</div>
<div class="line"> }) |</div>
<div class="line"> style;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> screen.Print();</div>
<div class="line"> getchar();</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> 0;</div>
<div class="line">}</div>
<div class="ttc" id="aexamples_2component_2focus_8cpp_html_a9ffb8a33ec5d0133f63f791d526df1c7"><div class="ttname"><a href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a></div><div class="ttdeci">Element make_box(int x, int y)</div><div class="ttdef"><b>Definition</b> <a href="examples_2component_2focus_8cpp_source.html#l00017">examples/component/focus.cpp:17</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="html_like"></a>
html_like</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/html_like">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;s, chrono_literals</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 Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;iostream&gt;</span> <span class="comment">// for cout, ostream</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for allocator, operator&lt;&lt;, 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="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for paragraph, text, operator|, Element, border, Fit, color, hflow, spinner, vbox, bold, dim, underlined</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="box_8hpp.html">ftxui/screen/box.hpp</a>&quot;</span> <span class="comment">// for ftxui</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">using namespace </span>std::chrono_literals;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> img1 = []() { <span class="keywordflow">return</span> text(<span class="stringliteral">&quot;img&quot;</span>) | border; };</div>
<div class="line"> <span class="keyword">auto</span> img2 = []() { <span class="keywordflow">return</span> vbox({text(<span class="stringliteral">&quot;big&quot;</span>), text(<span class="stringliteral">&quot;image&quot;</span>)}) | border; };</div>
<div class="line"> </div>
<div class="line"> std::string reset_position;</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> i = 0;; ++i) {</div>
<div class="line"> <span class="keyword">auto</span> document = <span class="comment">//</span></div>
<div class="line"> hflow(</div>
<div class="line"> paragraph(<span class="stringliteral">&quot;哈囉世界!這是一張圖片:&quot;</span>), img1(),</div>
<div class="line"> paragraph(<span class="stringliteral">&quot; 這是一段文字 &quot;</span>), text(<span class="stringliteral">&quot;加底線的 &quot;</span>) | underlined,</div>
<div class="line"> paragraph(<span class="stringliteral">&quot; 這是一段文字 &quot;</span>), text(<span class="stringliteral">&quot;粗體的 &quot;</span>) | bold,</div>
<div class="line"> paragraph(<span class="stringliteral">&quot;哈囉世界!這是一張圖片:&quot;</span>), img2(),</div>
<div class="line"> paragraph(</div>
<div class="line"> <span class="stringliteral">&quot;Lorem Ipsum 僅是排版和印刷前的假文。Lorem Ipsum 自 15 世紀以來一直是印刷業的標準假文,當時一位匿名印刷商將不同的文字片段組合成一本字體樣本。它不僅存活了五個世紀,還適應了電子排版,內容卻未曾改變。它在 1960 年代因 Letraset 公司發售含有 Lorem Ipsum 段落的字體樣本而廣受歡迎,最近則因其被包含在 Aldus PageMaker 等桌面出版應用程式中而再次普及。&quot;</span>),</div>
<div class="line"> paragraph(<span class="stringliteral">&quot; 這是一段文字 &quot;</span>), text(<span class="stringliteral">&quot;暗淡的 &quot;</span>) | dim,</div>
<div class="line"> paragraph(<span class="stringliteral">&quot;哈囉世界!這是一張圖片:&quot;</span>), img1(),</div>
<div class="line"> paragraph(<span class="stringliteral">&quot; 這是一段文字 &quot;</span>), text(<span class="stringliteral">&quot;紅色的 &quot;</span>) | color(Color::Red),</div>
<div class="line"> paragraph(<span class="stringliteral">&quot; 一個旋轉器 &quot;</span>), spinner(6, i / 10)) |</div>
<div class="line"> border;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> std::cout &lt;&lt; reset_position;</div>
<div class="line"> screen.Print();</div>
<div class="line"> reset_position = screen.ResetPosition();</div>
<div class="line"> </div>
<div class="line"> std::this_thread::sleep_for(0.01s);</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="abox_8hpp_html"><div class="ttname"><a href="box_8hpp.html">box.hpp</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="linear_gradient"></a>
linear_gradient</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/linear_gradient">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="comment">// the LICENSE file.</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">// 用於 bgcolor, operator|, operator|=, text, center, Element</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">// 用於 LinearGradient::Stop, LinearGradient</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">// 用於 Full, Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// 用於 allocator, shared_ptr</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// 用於 Render</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::DeepPink1, Color::DeepSkyBlue1, Color::Yellow, 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"> <span class="keyword">auto</span> document = text(<span class="stringliteral">&quot;gradient&quot;</span>) | center;</div>
<div class="line"> </div>
<div class="line"> document |= bgcolor(<a class="code hl_struct" href="group__dom.html#structftxui_1_1LinearGradient">LinearGradient</a>()</div>
<div class="line"> .Angle(45)</div>
<div class="line"> .Stop(Color::DeepPink1)</div>
<div class="line"> .Stop(Color::DeepSkyBlue1));</div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Full(), Dimension::Full());</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> screen.Print();</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_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>Definition</b> <a href="linear__gradient_8hpp_source.html#l00031">linear_gradient.hpp:31</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><!-- fragment --><h1><a class="anchor" id="package_manager"></a>
package_manager</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/package_manager">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;chrono&gt;</span> <span class="comment">// for operator&quot;&quot;s, chrono_literals</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|, text, Element, hbox, bold, color, filler, separator, vbox, window, gauge, Fit, size, dim, EQUAL, WIDTH</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 Full, Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;iostream&gt;</span> <span class="comment">// for cout, endl, ostream</span></div>
<div class="line"><span class="preprocessor">#include &lt;list&gt;</span> <span class="comment">// for list, operator==, _List_iterator, _List_iterator&lt;&gt;::_Self</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for allocator, shared_ptr, allocator_traits&lt;&gt;::value_type</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for string, operator&lt;&lt;, 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"><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="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</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::Green, Color::Red, Color::RedLight, 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="keyword">struct </span><a class="code hl_typedef" href="namespaceftxui.html#aaa92a82e968c721805c62787cd000534">Task</a> {</div>
<div class="line"> std::string name;</div>
<div class="line"> <span class="keywordtype">int</span> number_of_threads;</div>
<div class="line"> <span class="keywordtype">int</span> downloaded;</div>
<div class="line"> <span class="keywordtype">int</span> size;</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> std::list&lt;Task&gt; remaining_tasks = {</div>
<div class="line"> {<span class="stringliteral">&quot;contact server &quot;</span>, 10, 0, 6 * 25},</div>
<div class="line"> {<span class="stringliteral">&quot;download index.html &quot;</span>, 10, 0, 9 * 25},</div>
<div class="line"> {<span class="stringliteral">&quot;download script.js &quot;</span>, 1, 0, 3 * 25},</div>
<div class="line"> {<span class="stringliteral">&quot;download style.js &quot;</span>, 1, 0, 4 * 25},</div>
<div class="line"> {<span class="stringliteral">&quot;download image.png &quot;</span>, 1, 0, 5 * 25},</div>
<div class="line"> {<span class="stringliteral">&quot;download big_1.png &quot;</span>, 1, 0, 30 * 25},</div>
<div class="line"> {<span class="stringliteral">&quot;download icon_1.png &quot;</span>, 1, 0, 7 * 25},</div>
<div class="line"> {<span class="stringliteral">&quot;download icon_2.png &quot;</span>, 1, 0, 8 * 25},</div>
<div class="line"> {<span class="stringliteral">&quot;download big_2.png &quot;</span>, 1, 0, 30 * 25},</div>
<div class="line"> {<span class="stringliteral">&quot;download small_1.png &quot;</span>, 1, 0, 10 * 25},</div>
<div class="line"> {<span class="stringliteral">&quot;download small_2.png &quot;</span>, 1, 0, 11 * 25},</div>
<div class="line"> {<span class="stringliteral">&quot;download small_3.png &quot;</span>, 1, 0, 12 * 25},</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> std::list&lt;Task&gt; displayed_task;</div>
<div class="line"> </div>
<div class="line"> <span class="keywordtype">int</span> remaining_threads = 12;</div>
<div class="line"> </div>
<div class="line"> <span class="keywordtype">int</span> nb_queued = (int)remaining_tasks.size();</div>
<div class="line"> <span class="keywordtype">int</span> nb_active = 0;</div>
<div class="line"> <span class="keywordtype">int</span> nb_done = 0;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> to_text = [](<span class="keywordtype">int</span> number) {</div>
<div class="line"> <span class="keywordflow">return</span> text(std::to_string(number)) | size(WIDTH, EQUAL, 3);</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> renderTask = [&amp;](<span class="keyword">const</span> <a class="code hl_typedef" href="namespaceftxui.html#aaa92a82e968c721805c62787cd000534">Task</a>&amp; task) {</div>
<div class="line"> <span class="keyword">auto</span> style = (task.downloaded == task.size) ? dim : bold;</div>
<div class="line"> <span class="keywordflow">return</span> hbox({</div>
<div class="line"> text(task.name) | style,</div>
<div class="line"> separator(),</div>
<div class="line"> to_text(task.downloaded),</div>
<div class="line"> text(<span class="stringliteral">&quot;/&quot;</span>),</div>
<div class="line"> to_text(task.size),</div>
<div class="line"> separator(),</div>
<div class="line"> gauge(task.downloaded / <span class="keywordtype">float</span>(task.size)),</div>
<div class="line"> });</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> renderSummary = [&amp;]() {</div>
<div class="line"> <span class="keyword">auto</span> summary = vbox({</div>
<div class="line"> hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;- done: &quot;</span>),</div>
<div class="line"> to_text(nb_done) | bold,</div>
<div class="line"> }) | color(Color::Green),</div>
<div class="line"> hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;- active: &quot;</span>),</div>
<div class="line"> to_text(nb_active) | bold,</div>
<div class="line"> }) | color(Color::RedLight),</div>
<div class="line"> hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;- queue: &quot;</span>),</div>
<div class="line"> to_text(nb_queued) | bold,</div>
<div class="line"> }) | color(Color::Red),</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> window(text(<span class="stringliteral">&quot; Summary &quot;</span>), summary);</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> render = [&amp;]() {</div>
<div class="line"> std::vector&lt;Element&gt; entries;</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keyword">auto</span>&amp; task : displayed_task) {</div>
<div class="line"> entries.push_back(renderTask(task));</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> <span class="comment">// 任務列表。</span></div>
<div class="line"> window(text(<span class="stringliteral">&quot; Task &quot;</span>), vbox(std::move(entries))),</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// 摘要。</span></div>
<div class="line"> hbox({</div>
<div class="line"> renderSummary(),</div>
<div class="line"> filler(),</div>
<div class="line"> }), });</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> updateModel = [&amp;]() {</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keyword">auto</span>&amp; task : displayed_task) {</div>
<div class="line"> <span class="keywordflow">if</span> (task.downloaded != task.size) {</div>
<div class="line"> task.downloaded++;</div>
<div class="line"> } <span class="keywordflow">else</span> <span class="keywordflow">if</span> (task.number_of_threads) {</div>
<div class="line"> remaining_threads += task.number_of_threads;</div>
<div class="line"> task.number_of_threads = 0;</div>
<div class="line"> nb_active--;</div>
<div class="line"> nb_done++;</div>
<div class="line"> }</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">if</span> (remaining_tasks.size() &amp;&amp;</div>
<div class="line"> remaining_tasks.front().number_of_threads &lt;= remaining_threads) {</div>
<div class="line"> remaining_threads -= remaining_tasks.front().number_of_threads;</div>
<div class="line"> displayed_task.push_back(remaining_tasks.front());</div>
<div class="line"> remaining_tasks.pop_front();</div>
<div class="line"> nb_queued--;</div>
<div class="line"> nb_active++;</div>
<div class="line"> }</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> std::string reset_position;</div>
<div class="line"> <span class="keywordflow">for</span> (;;) {</div>
<div class="line"> <span class="comment">// 繪製。</span></div>
<div class="line"> <span class="keyword">auto</span> document = render();</div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> std::cout &lt;&lt; reset_position;</div>
<div class="line"> screen.Print();</div>
<div class="line"> reset_position = screen.ResetPosition();</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// 模擬時間。</span></div>
<div class="line"> <span class="keyword">using namespace </span>std::chrono_literals;</div>
<div class="line"> std::this_thread::sleep_for(0.01s);</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// 退出。</span></div>
<div class="line"> <span class="keywordflow">if</span> (nb_active + nb_queued == 0) {</div>
<div class="line"> <span class="keywordflow">break</span>;</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// 更新模型以進行下一幀。</span></div>
<div class="line"> updateModel();</div>
<div class="line"> }</div>
<div class="line"> std::cout &lt;&lt; std::endl;</div>
<div class="line">}</div>
<div class="ttc" id="anamespaceftxui_html_aaa92a82e968c721805c62787cd000534"><div class="ttname"><a href="namespaceftxui.html#aaa92a82e968c721805c62787cd000534">ftxui::Task</a></div><div class="ttdeci">std::variant&lt; Event, Closure, AnimationTask &gt; Task</div><div class="ttdef"><b>Definition</b> <a href="task_8hpp_source.html#l00014">task.hpp:14</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="paragraph"></a>
paragraph</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/paragraph">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;chrono&gt;</span> <span class="comment">// for operator&quot;&quot;s, chrono_literals</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 Full, Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;iostream&gt;</span> <span class="comment">// for cout, ostream</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 string, operator&lt;&lt;</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="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for hflow, paragraph, separator, hbox, vbox, filler, operator|, border, Element</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="box_8hpp.html">ftxui/screen/box.hpp</a>&quot;</span> <span class="comment">// for ftxui</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span>std::chrono_literals;</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"> std::string p =</div>
<div class="line"> R<span class="stringliteral">&quot;(在機率論與統計學中,貝氏定理(或稱貝氏法則、貝氏規律)描述了一個事件的機率,其基礎是與該事件可能相關的條件的先驗知識。例如,如果癌症與年齡相關,那麼使用貝氏定理,一個人的年齡可以用來更準確地評估他們患癌症的機率,而不是在不知道該人年齡的情況下評估患癌症的機率。貝氏定理的眾多應用之一是貝氏推論,這是一種特殊的統計推論方法。當應用時,貝氏定理中涉及的機率可能具有不同的機率解釋。在貝氏機率解釋中,該定理表達了主觀的信念程度應如何理性地改變,以考慮相關證據的可用性。貝氏推論是貝氏統計學的基礎。)&quot;;</span></div>
<div class="line"><span class="stringliteral"></span> </div>
<div class="line"><span class="stringliteral"> std::string reset_position;</span></div>
<div class="line"><span class="stringliteral"> </span><span class="keywordflow">while</span> (<span class="keyword">true</span>) {</div>
<div class="line"> <span class="keyword">auto</span> document = vbox({</div>
<div class="line"> hflow(paragraph(p)),</div>
<div class="line"> separator(),</div>
<div class="line"> hflow(paragraph(p)),</div>
<div class="line"> separator(),</div>
<div class="line"> hbox({</div>
<div class="line"> hflow(paragraph(p)),</div>
<div class="line"> separator(),</div>
<div class="line"> hflow(paragraph(p)),</div>
<div class="line"> }),</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> </div>
<div class="line"> document = vbox(filler(), document);</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// auto screen = Screen::Create(Dimension::Fit(document));</span></div>
<div class="line"> <span class="comment">// Render(screen, document);</span></div>
<div class="line"> <span class="comment">// screen.Print();</span></div>
<div class="line"> <span class="comment">// getchar();</span></div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Full());</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> std::cout &lt;&lt; reset_position;</div>
<div class="line"> screen.Print();</div>
<div class="line"> reset_position = screen.ResetPosition();</div>
<div class="line"> </div>
<div class="line"> std::this_thread::sleep_for(0.01s);</div>
<div class="line"> }</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="separator"></a>
separator</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/separator">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="elements_8hpp.html">ftxui/dom/elements.hpp</a>&gt;</span> <span class="comment">// for text, center, separator, operator|, flex, Element, vbox, Fit, hbox, 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 Full, Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for allocator</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</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 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"> <span class="keyword">auto</span> document = hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;left-column&quot;</span>),</div>
<div class="line"> separator(),</div>
<div class="line"> vbox({</div>
<div class="line"> center(text(<span class="stringliteral">&quot;top&quot;</span>)) | flex,</div>
<div class="line"> separator(),</div>
<div class="line"> center(text(<span class="stringliteral">&quot;bottom&quot;</span>)),</div>
<div class="line"> }) | flex,</div>
<div class="line"> separator(),</div>
<div class="line"> text(<span class="stringliteral">&quot;right-column&quot;</span>),</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> screen.Print();</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="separator_style"></a>
separator_style</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/separator_style">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;<a class="code" href="screen_8hpp.html">ftxui/screen/screen.hpp</a>&gt;</span> <span class="comment">// for Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;iostream&gt;</span> <span class="comment">// for endl, cout, ostream</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for allocator</span></div>
<div class="line"> </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, separatorDouble, separatorHeavy, separatorLight, vbox, operator|, Element, Fit, borderDouble, borderHeavy, borderLight</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="box_8hpp.html">ftxui/screen/box.hpp</a>&quot;</span> <span class="comment">// for 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="keyword">auto</span> document = vbox({</div>
<div class="line"> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;separatorLight&quot;</span>),</div>
<div class="line"> separatorLight(),</div>
<div class="line"> hbox(text(<span class="stringliteral">&quot;left&quot;</span>), separatorLight(), text(<span class="stringliteral">&quot;right&quot;</span>)),</div>
<div class="line"> }) | borderLight,</div>
<div class="line"> </div>
<div class="line"> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;separatorDashed&quot;</span>),</div>
<div class="line"> separatorDashed(),</div>
<div class="line"> hbox(text(<span class="stringliteral">&quot;left&quot;</span>), separatorDashed(), text(<span class="stringliteral">&quot;right&quot;</span>)),</div>
<div class="line"> }) | borderDashed,</div>
<div class="line"> </div>
<div class="line"> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;separatorHeavy&quot;</span>),</div>
<div class="line"> separatorHeavy(),</div>
<div class="line"> hbox(text(<span class="stringliteral">&quot;left&quot;</span>), separatorHeavy(), text(<span class="stringliteral">&quot;right&quot;</span>)),</div>
<div class="line"> }) | borderHeavy,</div>
<div class="line"> </div>
<div class="line"> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;separatorDouble&quot;</span>),</div>
<div class="line"> separatorDouble(),</div>
<div class="line"> hbox(text(<span class="stringliteral">&quot;left&quot;</span>), separatorDouble(), text(<span class="stringliteral">&quot;right&quot;</span>)),</div>
<div class="line"> }) | borderDouble,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen =</div>
<div class="line"> Screen::Create(Dimension::Fit(document), Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> screen.Print();</div>
<div class="line"> std::cout &lt;&lt; std::endl;</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="size"></a>
size</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/size">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="elements_8hpp.html">ftxui/dom/elements.hpp</a>&gt;</span> <span class="comment">// for operator|, text, Element, hcenter, Fit, hbox, size, window, Elements, bold, dim, EQUAL, WIDTH</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 Screen</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 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"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</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 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"> <span class="keyword">auto</span> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a> = [](<span class="keyword">const</span> std::string&amp; title) {</div>
<div class="line"> <span class="keywordflow">return</span> window(text(title) | hcenter | bold,</div>
<div class="line"> text(<span class="stringliteral">&quot;content&quot;</span>) | hcenter | dim);</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a> content;</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> x = 3; x &lt; 30; ++x) {</div>
<div class="line"> content.push_back(<a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(std::to_string(x)) | size(WIDTH, EQUAL, x));</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> document = hbox(std::move(content));</div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> screen.Print();</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="spinner"></a>
spinner</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/spinner">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;chrono&gt;</span> <span class="comment">// for operator&quot;&quot;s, chrono_literals</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 Element, operator|, separator, filler, hbox, size, spinner, text, vbox, bold, border, Fit, EQUAL, WIDTH</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 Full, Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;iostream&gt;</span> <span class="comment">// for cout, endl, ostream</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for to_string, operator&lt;&lt;, 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"><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="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</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 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"> <span class="keyword">using namespace </span>std::chrono_literals;</div>
<div class="line"> </div>
<div class="line"> std::string reset_position;</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> index = 0; index &lt; 200; ++index) {</div>
<div class="line"> std::vector&lt;Element&gt; entries;</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> i = 0; i &lt; 23; ++i) {</div>
<div class="line"> <span class="keywordflow">if</span> (i != 0) {</div>
<div class="line"> entries.push_back(separator());</div>
<div class="line"> }</div>
<div class="line"> entries.push_back( <span class="comment">//</span></div>
<div class="line"> hbox({</div>
<div class="line"> text(std::to_string(i)) | size(WIDTH, EQUAL, 2),</div>
<div class="line"> separator(),</div>
<div class="line"> spinner(i, index) | bold,</div>
<div class="line"> }));</div>
<div class="line"> }</div>
<div class="line"> <span class="keyword">auto</span> document = hbox({</div>
<div class="line"> vbox(std::move(entries)) | border,</div>
<div class="line"> filler(),</div>
<div class="line"> });</div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> std::cout &lt;&lt; reset_position;</div>
<div class="line"> screen.Print();</div>
<div class="line"> reset_position = screen.ResetPosition();</div>
<div class="line"> </div>
<div class="line"> std::this_thread::sleep_for(0.1s);</div>
<div class="line"> }</div>
<div class="line"> std::cout &lt;&lt; std::endl;</div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="style_blink"></a>
style_blink</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/style_blink">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;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&gt;</span> <span class="comment">// 用於 text, operator|, blink, Fit, hbox, Element</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">// 用於 Full, Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// 用於 allocator</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// 用於 Render</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">// 用於 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"> <span class="keyword">auto</span> document = <span class="comment">//</span></div>
<div class="line"> hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;這段文字是 &quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;閃爍&quot;</span>) | blink,</div>
<div class="line"> text(<span class="stringliteral">&quot;。你喜歡嗎?&quot;</span>),</div>
<div class="line"> });</div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> screen.Print();</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="style_bold"></a>
style_bold</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/style_bold">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="elements_8hpp.html">ftxui/dom/elements.hpp</a>&gt;</span> <span class="comment">// for text, operator|, bold, Fit, hbox, Element</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 Full, Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for allocator</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</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 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"> <span class="keyword">auto</span> document = <span class="comment">//</span></div>
<div class="line"> hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;This text is &quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;bold&quot;</span>) | bold,</div>
<div class="line"> text(<span class="stringliteral">&quot;. Do you like it?&quot;</span>),</div>
<div class="line"> });</div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> screen.Print();</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="style_color"></a>
style_color</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/style_color">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="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="screen_8hpp.html">ftxui/screen/screen.hpp</a>&gt;</span> <span class="comment">// for Full, Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for allocator</span></div>
<div class="line"> </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, bgcolor, color, vbox, filler, Fit, hbox</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</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, operator&quot;&quot;_rgb, Color::Black, Color::Blue, Color::BlueLight, Color::Cyan, Color::CyanLight, Color::DeepSkyBlue4, Color::Default, Color::GrayDark, Color::GrayLight, Color::Green, Color::GreenLight, Color::Magenta, Color::MagentaLight, Color::Red, Color::RedLight, Color::SkyBlue1, Color::White, Color::Yellow, Color::YellowLight, 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"> <span class="keyword">auto</span> document = hbox({</div>
<div class="line"> vbox({</div>
<div class="line"> color(Color::Default, text(<span class="stringliteral">&quot;Default&quot;</span>)),</div>
<div class="line"> color(Color::Black, text(<span class="stringliteral">&quot;Black&quot;</span>)),</div>
<div class="line"> color(Color::GrayDark, text(<span class="stringliteral">&quot;GrayDark&quot;</span>)),</div>
<div class="line"> color(Color::GrayLight, text(<span class="stringliteral">&quot;GrayLight&quot;</span>)),</div>
<div class="line"> color(Color::White, text(<span class="stringliteral">&quot;White&quot;</span>)),</div>
<div class="line"> color(Color::Blue, text(<span class="stringliteral">&quot;Blue&quot;</span>)),</div>
<div class="line"> color(Color::BlueLight, text(<span class="stringliteral">&quot;BlueLight&quot;</span>)),</div>
<div class="line"> color(Color::Cyan, text(<span class="stringliteral">&quot;Cyan&quot;</span>)),</div>
<div class="line"> color(Color::CyanLight, text(<span class="stringliteral">&quot;CyanLight&quot;</span>)),</div>
<div class="line"> color(Color::Green, text(<span class="stringliteral">&quot;Green&quot;</span>)),</div>
<div class="line"> color(Color::GreenLight, text(<span class="stringliteral">&quot;GreenLight&quot;</span>)),</div>
<div class="line"> color(Color::Magenta, text(<span class="stringliteral">&quot;Magenta&quot;</span>)),</div>
<div class="line"> color(Color::MagentaLight, text(<span class="stringliteral">&quot;MagentaLight&quot;</span>)),</div>
<div class="line"> color(Color::Red, text(<span class="stringliteral">&quot;Red&quot;</span>)),</div>
<div class="line"> color(Color::RedLight, text(<span class="stringliteral">&quot;RedLight&quot;</span>)),</div>
<div class="line"> color(Color::Yellow, text(<span class="stringliteral">&quot;Yellow&quot;</span>)),</div>
<div class="line"> color(Color::YellowLight, text(<span class="stringliteral">&quot;YellowLight&quot;</span>)),</div>
<div class="line"> color(0x66ff66_rgb, text(<span class="stringliteral">&quot;Phosphor&quot;</span>)),</div>
<div class="line"> color(<a class="code hl_struct" href="group__dom.html#structftxui_1_1LinearGradient">LinearGradient</a>(Color::SkyBlue1, Color::DeepSkyBlue4),</div>
<div class="line"> text(<span class="stringliteral">&quot;Skyblue to DeepSkyBlue&quot;</span>)),</div>
<div class="line"> }),</div>
<div class="line"> vbox({</div>
<div class="line"> bgcolor(Color::Default, text(<span class="stringliteral">&quot;Default&quot;</span>)),</div>
<div class="line"> bgcolor(Color::Black, text(<span class="stringliteral">&quot;Black&quot;</span>)),</div>
<div class="line"> bgcolor(Color::GrayDark, text(<span class="stringliteral">&quot;GrayDark&quot;</span>)),</div>
<div class="line"> bgcolor(Color::GrayLight, text(<span class="stringliteral">&quot;GrayLight&quot;</span>)),</div>
<div class="line"> bgcolor(Color::White, text(<span class="stringliteral">&quot;White&quot;</span>)),</div>
<div class="line"> bgcolor(Color::Blue, text(<span class="stringliteral">&quot;Blue&quot;</span>)),</div>
<div class="line"> bgcolor(Color::BlueLight, text(<span class="stringliteral">&quot;BlueLight&quot;</span>)),</div>
<div class="line"> bgcolor(Color::Cyan, text(<span class="stringliteral">&quot;Cyan&quot;</span>)),</div>
<div class="line"> bgcolor(Color::CyanLight, text(<span class="stringliteral">&quot;CyanLight&quot;</span>)),</div>
<div class="line"> bgcolor(Color::Green, text(<span class="stringliteral">&quot;Green&quot;</span>)),</div>
<div class="line"> bgcolor(Color::GreenLight, text(<span class="stringliteral">&quot;GreenLight&quot;</span>)),</div>
<div class="line"> bgcolor(Color::Magenta, text(<span class="stringliteral">&quot;Magenta&quot;</span>)),</div>
<div class="line"> bgcolor(Color::MagentaLight, text(<span class="stringliteral">&quot;MagentaLight&quot;</span>)),</div>
<div class="line"> bgcolor(Color::Red, text(<span class="stringliteral">&quot;Red&quot;</span>)),</div>
<div class="line"> bgcolor(Color::RedLight, text(<span class="stringliteral">&quot;RedLight&quot;</span>)),</div>
<div class="line"> bgcolor(Color::Yellow, text(<span class="stringliteral">&quot;Yellow&quot;</span>)),</div>
<div class="line"> bgcolor(Color::YellowLight, text(<span class="stringliteral">&quot;YellowLight&quot;</span>)),</div>
<div class="line"> bgcolor(0x66ff66_rgb, text(<span class="stringliteral">&quot;Phosphor&quot;</span>)),</div>
<div class="line"> bgcolor(<a class="code hl_struct" href="group__dom.html#structftxui_1_1LinearGradient">LinearGradient</a>(Color::SkyBlue1, Color::DeepSkyBlue4),</div>
<div class="line"> text(<span class="stringliteral">&quot;Skyblue to DeepSkyBlue&quot;</span>)),</div>
<div class="line"> }),</div>
<div class="line"> filler(),</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> screen.Print();</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="style_dim"></a>
style_dim</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/style_dim">Demo</a> </p><div class="fragment"><div class="line"><span class="comment">// Copyright 2020 Arthur Sonzogni. All rights reserved.</span></div>
<div class="line"><span class="comment">// Use of this source code is governed by the MIT license that can be found in</span></div>
<div class="line"><span class="comment">// the LICENSE file.</span></div>
<div class="line"><span class="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;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&gt;</span> <span class="comment">// for text, operator|, dim, Fit, hbox, Element</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 Full, Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for allocator</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</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 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"> <span class="keyword">auto</span> document = <span class="comment">//</span></div>
<div class="line"> hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;This text is &quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;dim&quot;</span>) | dim,</div>
<div class="line"> text(<span class="stringliteral">&quot;. Do you like it?&quot;</span>),</div>
<div class="line"> });</div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> screen.Print();</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="style_gallery"></a>
style_gallery</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/style_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;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&gt;</span> <span class="comment">// for text, operator|, Element, bgcolor, color, blink, bold, dim, inverted, underlined, Fit, hbox</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 Full, Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for allocator</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</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, 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"> <span class="comment">// clang-format off</span></div>
<div class="line"> <span class="keyword">auto</span> document =</div>
<div class="line"> hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;normal&quot;</span>) , text(<span class="stringliteral">&quot; &quot;</span>) ,</div>
<div class="line"> text(<span class="stringliteral">&quot;bold&quot;</span>) | bold , text(<span class="stringliteral">&quot; &quot;</span>) ,</div>
<div class="line"> text(<span class="stringliteral">&quot;italic&quot;</span>) | italic , text(<span class="stringliteral">&quot; &quot;</span>) ,</div>
<div class="line"> text(<span class="stringliteral">&quot;dim&quot;</span>) | dim , text(<span class="stringliteral">&quot; &quot;</span>) ,</div>
<div class="line"> text(<span class="stringliteral">&quot;inverted&quot;</span>) | inverted , text(<span class="stringliteral">&quot; &quot;</span>) ,</div>
<div class="line"> text(<span class="stringliteral">&quot;underlined&quot;</span>) | underlined , text(<span class="stringliteral">&quot; &quot;</span>) ,</div>
<div class="line"> text(<span class="stringliteral">&quot;underlinedDouble&quot;</span>) | underlinedDouble , text(<span class="stringliteral">&quot; &quot;</span>) ,</div>
<div class="line"> text(<span class="stringliteral">&quot;blink&quot;</span>) | blink , text(<span class="stringliteral">&quot; &quot;</span>) ,</div>
<div class="line"> text(<span class="stringliteral">&quot;strikethrough&quot;</span>) | strikethrough , text(<span class="stringliteral">&quot; &quot;</span>) ,</div>
<div class="line"> text(<span class="stringliteral">&quot;color&quot;</span>) | color(Color::Blue) , text(<span class="stringliteral">&quot; &quot;</span>) ,</div>
<div class="line"> text(<span class="stringliteral">&quot;bgcolor&quot;</span>) | bgcolor(Color::Blue) , text(<span class="stringliteral">&quot; &quot;</span>) ,</div>
<div class="line"> text(<span class="stringliteral">&quot;hyperlink&quot;</span>) | hyperlink(<span class="stringliteral">&quot;https://github.com/ArthurSonzogni/FTXUI&quot;</span>),</div>
<div class="line"> });</div>
<div class="line"> <span class="comment">// clang-format on</span></div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> screen.Print();</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="style_hyperlink"></a>
style_hyperlink</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/style_hyperlink">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;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&gt;</span> <span class="comment">// for text, operator|, bold, Fit, hbox, Element</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 Full, Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for allocator</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</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 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"> <span class="keyword">auto</span> document = <span class="comment">//</span></div>
<div class="line"> hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;This text is an &quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;hyperlink&quot;</span>) | hyperlink(<span class="stringliteral">&quot;https://www.google.com&quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;. Do you like it?&quot;</span>),</div>
<div class="line"> });</div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> screen.Print();</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="style_inverted"></a>
style_inverted</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/style_inverted">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="elements_8hpp.html">ftxui/dom/elements.hpp</a>&gt;</span> <span class="comment">// for text, operator|, inverted, Fit, hbox, Element</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 Full, Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for allocator</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</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 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"> <span class="keyword">auto</span> document = hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;This text is &quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;inverted&quot;</span>) | inverted,</div>
<div class="line"> text(<span class="stringliteral">&quot;. Do you like it?&quot;</span>),</div>
<div class="line"> });</div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> screen.Print();</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="style_italic"></a>
style_italic</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/style_italic">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;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&gt;</span> <span class="comment">// for text, operator|, inverted, Fit, hbox, Element</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 Full, Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for allocator</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</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 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"> <span class="keyword">auto</span> document = hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;This text is &quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;italic&quot;</span>) | italic,</div>
<div class="line"> text(<span class="stringliteral">&quot;. Do you like it?&quot;</span>),</div>
<div class="line"> });</div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> screen.Print();</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="style_strikethrough"></a>
style_strikethrough</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/style_strikethrough">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;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&gt;</span> <span class="comment">// 用於 text, operator|, strikethrough, Fit, hbox, Element</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">// 用於 Full, Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// 用於 allocator</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// 用於 Render</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">// 用於 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"> <span class="keyword">auto</span> document = <span class="comment">//</span></div>
<div class="line"> hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;這段文字是 &quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;刪除線&quot;</span>) | strikethrough,</div>
<div class="line"> text(<span class="stringliteral">&quot;。你喜歡嗎?&quot;</span>),</div>
<div class="line"> });</div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> screen.Print();</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="style_underlined"></a>
style_underlined</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/style_underlined">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="elements_8hpp.html">ftxui/dom/elements.hpp</a>&gt;</span> <span class="comment">// 用於 text, operator|, underlined, Fit, hbox, Element</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">// 用於 Full, Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// 用於 allocator</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// 用於 Render</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">// 用於 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"> <span class="keyword">auto</span> document = <span class="comment">//</span></div>
<div class="line"> hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;這段文字是 &quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;加底線&quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;。你喜歡它嗎?&quot;</span>),</div>
<div class="line"> });</div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> screen.Print();</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="style_underlined_double"></a>
style_underlined_double</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/style_underlined_double">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;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&gt;</span> <span class="comment">// for text, operator|, underlinedDouble, Fit, hbox, Element</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 Full, Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for allocator</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</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 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"> <span class="keyword">auto</span> document = <span class="comment">//</span></div>
<div class="line"> hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;This text is &quot;</span>),</div>
<div class="line"> text(<span class="stringliteral">&quot;underlinedDouble&quot;</span>) | underlinedDouble,</div>
<div class="line"> text(<span class="stringliteral">&quot;. Do you like it?&quot;</span>),</div>
<div class="line"> });</div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> screen.Print();</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="table"></a>
table</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/table">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;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&gt;</span> <span class="comment">// for color, Fit, LIGHT, align_right, bold, DOUBLE</span></div>
<div class="line"><span class="preprocessor">#include &lt;<a class="code" href="table_8hpp.html">ftxui/dom/table.hpp</a>&gt;</span> <span class="comment">// for Table, TableSelection</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 Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;iostream&gt;</span> <span class="comment">// for endl, cout, ostream</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for basic_string, allocator, 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="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</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::White, 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="keyword">auto</span> table = <a class="code hl_class" href="group__dom.html#classftxui_1_1Table">Table</a>({</div>
<div class="line"> {<span class="stringliteral">&quot;Version&quot;</span>, <span class="stringliteral">&quot;Marketing name&quot;</span>, <span class="stringliteral">&quot;Release date&quot;</span>, <span class="stringliteral">&quot;API level&quot;</span>, <span class="stringliteral">&quot;Runtime&quot;</span>},</div>
<div class="line"> {<span class="stringliteral">&quot;2.3&quot;</span>, <span class="stringliteral">&quot;Gingerbread&quot;</span>, <span class="stringliteral">&quot;February 9 2011&quot;</span>, <span class="stringliteral">&quot;10&quot;</span>, <span class="stringliteral">&quot;Dalvik 1.4.0&quot;</span>},</div>
<div class="line"> {<span class="stringliteral">&quot;4.0&quot;</span>, <span class="stringliteral">&quot;Ice Cream Sandwich&quot;</span>, <span class="stringliteral">&quot;October 19 2011&quot;</span>, <span class="stringliteral">&quot;15&quot;</span>, <span class="stringliteral">&quot;Dalvik&quot;</span>},</div>
<div class="line"> {<span class="stringliteral">&quot;4.1&quot;</span>, <span class="stringliteral">&quot;Jelly Bean&quot;</span>, <span class="stringliteral">&quot;July 9 2012&quot;</span>, <span class="stringliteral">&quot;16&quot;</span>, <span class="stringliteral">&quot;Dalvik&quot;</span>},</div>
<div class="line"> {<span class="stringliteral">&quot;4.2&quot;</span>, <span class="stringliteral">&quot;Jelly Bean&quot;</span>, <span class="stringliteral">&quot;November 13 2012&quot;</span>, <span class="stringliteral">&quot;17&quot;</span>, <span class="stringliteral">&quot;Dalvik&quot;</span>},</div>
<div class="line"> {<span class="stringliteral">&quot;4.3&quot;</span>, <span class="stringliteral">&quot;Jelly Bean&quot;</span>, <span class="stringliteral">&quot;July 24 2013&quot;</span>, <span class="stringliteral">&quot;18&quot;</span>, <span class="stringliteral">&quot;Dalvik&quot;</span>},</div>
<div class="line"> {<span class="stringliteral">&quot;4.4&quot;</span>, <span class="stringliteral">&quot;KitKat&quot;</span>, <span class="stringliteral">&quot;October 31 2013&quot;</span>, <span class="stringliteral">&quot;19&quot;</span>, <span class="stringliteral">&quot;Dalvik and ART&quot;</span>},</div>
<div class="line"> {<span class="stringliteral">&quot;5.0&quot;</span>, <span class="stringliteral">&quot;Lollipop&quot;</span>, <span class="stringliteral">&quot;November 3 2014&quot;</span>, <span class="stringliteral">&quot;21&quot;</span>, <span class="stringliteral">&quot;ART&quot;</span>},</div>
<div class="line"> {<span class="stringliteral">&quot;5.1&quot;</span>, <span class="stringliteral">&quot;Lollipop&quot;</span>, <span class="stringliteral">&quot;March 9 2015&quot;</span>, <span class="stringliteral">&quot;22&quot;</span>, <span class="stringliteral">&quot;ART&quot;</span>},</div>
<div class="line"> {<span class="stringliteral">&quot;6.0&quot;</span>, <span class="stringliteral">&quot;Marshmallow&quot;</span>, <span class="stringliteral">&quot;October 5 2015&quot;</span>, <span class="stringliteral">&quot;23&quot;</span>, <span class="stringliteral">&quot;ART&quot;</span>},</div>
<div class="line"> {<span class="stringliteral">&quot;7.0&quot;</span>, <span class="stringliteral">&quot;Nougat&quot;</span>, <span class="stringliteral">&quot;August 22 2016&quot;</span>, <span class="stringliteral">&quot;24&quot;</span>, <span class="stringliteral">&quot;ART&quot;</span>},</div>
<div class="line"> {<span class="stringliteral">&quot;7.1&quot;</span>, <span class="stringliteral">&quot;Nougat&quot;</span>, <span class="stringliteral">&quot;October 4 2016&quot;</span>, <span class="stringliteral">&quot;25&quot;</span>, <span class="stringliteral">&quot;ART&quot;</span>},</div>
<div class="line"> {<span class="stringliteral">&quot;8.0&quot;</span>, <span class="stringliteral">&quot;Oreo&quot;</span>, <span class="stringliteral">&quot;August 21 2017&quot;</span>, <span class="stringliteral">&quot;26&quot;</span>, <span class="stringliteral">&quot;ART&quot;</span>},</div>
<div class="line"> {<span class="stringliteral">&quot;8.1&quot;</span>, <span class="stringliteral">&quot;Oreo&quot;</span>, <span class="stringliteral">&quot;December 5 2017&quot;</span>, <span class="stringliteral">&quot;27&quot;</span>, <span class="stringliteral">&quot;ART&quot;</span>},</div>
<div class="line"> {<span class="stringliteral">&quot;9&quot;</span>, <span class="stringliteral">&quot;Pie&quot;</span>, <span class="stringliteral">&quot;August 6 2018&quot;</span>, <span class="stringliteral">&quot;28&quot;</span>, <span class="stringliteral">&quot;ART&quot;</span>},</div>
<div class="line"> {<span class="stringliteral">&quot;10&quot;</span>, <span class="stringliteral">&quot;10&quot;</span>, <span class="stringliteral">&quot;September 3 2019&quot;</span>, <span class="stringliteral">&quot;29&quot;</span>, <span class="stringliteral">&quot;ART&quot;</span>},</div>
<div class="line"> {<span class="stringliteral">&quot;11&quot;</span>, <span class="stringliteral">&quot;11&quot;</span>, <span class="stringliteral">&quot;September 8 2020&quot;</span>, <span class="stringliteral">&quot;30&quot;</span>, <span class="stringliteral">&quot;ART&quot;</span>},</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> table.<a class="code hl_function" href="group__dom.html#ad5f50927f54334b84514bc4b11a14d71">SelectAll</a>().<a class="code hl_function" href="classftxui_1_1TableSelection.html#af47b05e5a3f01cafc419ce94388cae51">Border</a>(LIGHT);</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// 在第一列周圍添加邊框。</span></div>
<div class="line"> table.SelectColumn(0).Border(LIGHT);</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// 使第一行加粗並帶有雙邊框。</span></div>
<div class="line"> table.SelectRow(0).Decorate(bold);</div>
<div class="line"> table.SelectRow(0).SeparatorVertical(LIGHT);</div>
<div class="line"> table.SelectRow(0).Border(DOUBLE);</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// 將“發布日期”列向右對齊。</span></div>
<div class="line"> table.SelectColumn(2).DecorateCells(align_right);</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// 選擇從第二行到最後一行。</span></div>
<div class="line"> <span class="keyword">auto</span> content = table.SelectRows(1, -1);</div>
<div class="line"> <span class="comment">// 在 3 種顏色之間交替。</span></div>
<div class="line"> content.DecorateCellsAlternateRow(color(Color::Blue), 3, 0);</div>
<div class="line"> content.DecorateCellsAlternateRow(color(Color::Cyan), 3, 1);</div>
<div class="line"> content.DecorateCellsAlternateRow(color(Color::White), 3, 2);</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> document = table.Render();</div>
<div class="line"> <span class="keyword">auto</span> screen =</div>
<div class="line"> Screen::Create(Dimension::Fit(document, <span class="comment">/*extend_beyond_screen=*/</span><span class="keyword">true</span>));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> screen.Print();</div>
<div class="line"> std::cout &lt;&lt; std::endl;</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> 0;</div>
<div class="line">}</div>
<div class="ttc" id="aclassftxui_1_1TableSelection_html_af47b05e5a3f01cafc419ce94388cae51"><div class="ttname"><a href="classftxui_1_1TableSelection.html#af47b05e5a3f01cafc419ce94388cae51">ftxui::TableSelection::Border</a></div><div class="ttdeci">void Border(BorderStyle border=LIGHT)</div><div class="ttdoc">在選取範圍周圍應用 border。</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2table_8cpp_source.html#l00344">src/ftxui/dom/table.cpp:344</a></div></div>
<div class="ttc" id="agroup__dom_html_ad5f50927f54334b84514bc4b11a14d71"><div class="ttname"><a href="group__dom.html#ad5f50927f54334b84514bc4b11a14d71">ftxui::Table::SelectAll</a></div><div class="ttdeci">TableSelection SelectAll()</div><div class="ttdoc">選取整個表格。</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2dom_2table_8cpp_source.html#l00200">src/ftxui/dom/table.cpp:200</a></div></div>
<div class="ttc" id="agroup__dom_html_classftxui_1_1Table"><div class="ttname"><a href="group__dom.html#classftxui_1_1Table">ftxui::Table</a></div><div class="ttdoc">Table 是一個用於繪製表格的工具。</div><div class="ttdef"><b>Definition</b> <a href="table_8hpp_source.html#l00035">table.hpp:35</a></div></div>
<div class="ttc" id="atable_8hpp_html"><div class="ttname"><a href="table_8hpp.html">table.hpp</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="vbox_hbox"></a>
vbox_hbox</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/vbox_hbox">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;stdio.h&gt;</span> <span class="comment">// for getchar</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 filler, text, hbox, vbox</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 Full, Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for allocator</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</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 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"> <span class="keyword">auto</span> document = <span class="comment">//</span></div>
<div class="line"> vbox({</div>
<div class="line"> hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;north-west&quot;</span>),</div>
<div class="line"> filler(),</div>
<div class="line"> text(<span class="stringliteral">&quot;north-east&quot;</span>),</div>
<div class="line"> }),</div>
<div class="line"> filler(),</div>
<div class="line"> hbox({</div>
<div class="line"> filler(),</div>
<div class="line"> text(<span class="stringliteral">&quot;center&quot;</span>),</div>
<div class="line"> filler(),</div>
<div class="line"> }),</div>
<div class="line"> filler(),</div>
<div class="line"> hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;south-west&quot;</span>),</div>
<div class="line"> filler(),</div>
<div class="line"> text(<span class="stringliteral">&quot;south-east&quot;</span>),</div>
<div class="line"> }),</div>
<div class="line"> });</div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Full());</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> screen.Print();</div>
<div class="line"> getchar();</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="vflow"></a>
vflow</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples/?file=dom/vflow">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;stdio.h&gt;</span> <span class="comment">// for getchar</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, size, text, hcenter, Fit, vflow, window, EQUAL, bold, border, dim, HEIGHT, WIDTH</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 Full, Screen</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for allocator, char_traits, operator+, to_string, string</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="node_8hpp.html">ftxui/dom/node.hpp</a>&quot;</span> <span class="comment">// for Render</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 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"> <span class="keyword">auto</span> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a> = [](<span class="keywordtype">int</span> dimx, <span class="keywordtype">int</span> dimy) {</div>
<div class="line"> std::string title = std::to_string(dimx) + <span class="stringliteral">&quot;x&quot;</span> + std::to_string(dimy);</div>
<div class="line"> <span class="keywordflow">return</span> window(text(title) | hcenter | bold,</div>
<div class="line"> text(<span class="stringliteral">&quot;content&quot;</span>) | hcenter | dim) |</div>
<div class="line"> size(WIDTH, EQUAL, dimx) | size(HEIGHT, EQUAL, dimy);</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> document = vflow({</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(7, 7),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(7, 5),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(5, 7),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(10, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(10, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(10, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(10, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(11, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(11, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(11, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(11, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(12, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(12, 5),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(12, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(13, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(13, 3),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(13, 3),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(10, 3),</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gad4b8aa9392f56ba41e2b421e046a7d83">Render</a>(screen, document);</div>
<div class="line"> screen.Print();</div>
<div class="line"> getchar();</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> 0;</div>
<div class="line">}</div>
</div><!-- fragment --> </div></div><!-- contents -->
</div><!-- PageDoc -->
</div><!-- doc-content -->
<!-- HTML footer for doxygen 1.9.8-->
<!-- start footer part -->
<div id="nav-path" class="navpath"><!-- id is needed for treeview function! -->
</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": "../zh-CH/index.html", "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-TW";
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>