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

738 lines
80 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!-- HTML header for doxygen 1.9.8-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=11"/>
<meta name="generator" content="Doxygen 1.12.0"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>FTXUI: ftxui / component</title>
<link href="tabs.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="dynsections.js"></script>
<script type="text/javascript" src="doxygen-awesome-fragment-copy-button.js"></script>
<script type="text/javascript" src="doxygen-awesome-paragraph-link.js"></script>
<script type="text/javascript" src="doxygen-awesome-interactive-toc.js"></script>
<script type="text/javascript" src="doxygen-awesome-tabs.js"></script>
<script type="module">
DoxygenAwesomeFragmentCopyButton.init()
DoxygenAwesomeParagraphLink.init()
DoxygenAwesomeInteractiveToc.init()
DoxygenAwesomeTabs.init()
await new Promise(r => window.addEventListener('DOMContentLoaded', r));
// Remove title when a img[alt='title-img'] is present.
// Find an image with the alt "img-title".
const img = document.querySelector("img[alt='title-img']");
const header = document.querySelector(".headertitle");
if (img && header) {
// Hide the header title progressively.
header.style.display = "none";
// Show progressively the image.
img.style.maxHeight = "40vh";
img.style.maxWidth = "100%";
img.style.objectFit = "contain";
}
// In the "examples.html" page. Turn every link with text
// "examples/<...>
//
// Add a "demo" link toward.
// https://arthursonzogni.github.io/FTXUI/examples/?file=<...>
const examples = document.querySelectorAll("a")
examples.forEach((example) => {
if (!example.textContent.startsWith("examples/")) {
return;
}
// Remove the ".cpp" extension from the example name.
const exampleName = example.textContent.replace("examples/", "").replace(".cpp", "");
const a = document.createElement("a");
a.textContent = "[demo]";
a.href = "https://arthursonzogni.github.io/FTXUI/examples/?file=" + exampleName;
a.style.marginRight= "1em";
a.style.fontWeight = "bold";
example.parentElement.insertBefore(a, example)
});
// If the current URL ends with -example.html, we can add a link to the demo
// as well using the div.title textContent.
const url = new URL(window.location.href);
if (url.pathname.endsWith("-example.html")) {
// Get the title text.
const title = document.querySelector("div.title").textContent;
const example = title.replace("examples/", "").replace(".cpp", "");
// Create a link to the demo.
const a = document.createElement("a");
a.textContent = "[demo]";
a.href = "https://arthursonzogni.github.io/FTXUI/examples/?file=" + example;
a.style.marginLeft = "1em";
a.style.fontWeight = "bold";
a.style.display = "inline-block";
// Insert the link after the title.
const titleDiv = document.querySelector("div.title");
if (titleDiv) {
titleDiv.insertBefore(a, titleDiv.nextSibling);
}
}
</script>
<script type="module">
// Click on the navtree, except for the main page where this is already done
// automatically.
let delay = 0;
while(true) {
const navtree = document.querySelector("div.item.selected");
if (!navtree) {
delay *= 2;
delay += 1;
await new Promise(resolve => setTimeout(resolve, delay));
continue;
}
// Include only selected navtree items.
console.log("navtree.textContent", navtree.textContent);
if (!navtree.textContent.includes("Getting Started") &&
!navtree.textContent.includes("Installation") &&
!navtree.textContent.includes("ftxui / screen") &&
!navtree.textContent.includes("ftxui / dom") &&
!navtree.textContent.includes("ftxui / component") &&
!navtree.textContent.includes("Reference")) {
break;
}
// Find the first link inside the navtree.
const link = navtree.querySelector("a");
if (link) {
// Simulate a click on the link.
link.click();
break;
}
}
</script>
<link href="navtree.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="navtreedata.js"></script>
<script type="text/javascript" src="navtree.js"></script>
<script type="text/javascript" src="resize.js"></script>
<script type="text/javascript" src="cookie.js"></script>
<link href="search/search.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="search/searchdata.js"></script>
<script type="text/javascript" src="search/search.js"></script>
<link href="doxygen.css" rel="stylesheet" type="text/css" />
<link href="doxygen-awesome.css" rel="stylesheet" type="text/css"/>
<link href="stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
<div id="titlearea">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr id="projectrow">
<td id="projectalign">
<div id="projectname">FTXUI<span id="projectnumber">&#160;6.1.9</span>
</div>
<div id="projectbrief">C++ functional terminal UI.</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- end header part -->
<!-- Generated by Doxygen 1.12.0 -->
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
var searchBox = new SearchBox("searchBox", "search/",'.html');
/* @license-end */
</script>
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
$(function() { codefold.init(0); });
/* @license-end */
</script>
<script type="text/javascript" src="menudata.js"></script>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
$(function() {
initMenu('',true,false,'search.php','Search',true);
$(function() { init_search(); });
});
/* @license-end */
</script>
<div id="main-nav"></div>
</div><!-- top -->
<div id="side-nav" class="ui-resizable side-nav-resizable">
<div id="nav-tree">
<div id="nav-tree-contents">
<div id="nav-sync" class="sync"></div>
</div>
</div>
<div id="splitbar" style="-moz-user-select:none;"
class="ui-resizable-handle">
</div>
</div>
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
$(function(){initNavTree('module-component.html',''); initResizable(true); });
/* @license-end */
</script>
<div id="doc-content">
<!-- window showing the filter options -->
<div id="MSearchSelectWindow"
onmouseover="return searchBox.OnSearchSelectShow()"
onmouseout="return searchBox.OnSearchSelectHide()"
onkeydown="return searchBox.OnSearchSelectKey(event)">
</div>
<!-- iframe showing the search results (closed by default) -->
<div id="MSearchResultsWindow">
<div id="MSearchResults">
<div class="SRPage">
<div id="SRIndex">
<div id="SRResults"></div>
<div class="SRStatus" id="Loading">Loading...</div>
<div class="SRStatus" id="Searching">Searching...</div>
<div class="SRStatus" id="NoMatches">No Matches</div>
</div>
</div>
</div>
</div>
<div><div class="header">
<div class="headertitle"><div class="title">ftxui / component</div></div>
</div><!--header-->
<div class="contents">
<div class="toc"><h3>Table of Contents</h3>
<ul>
<li class="level1">
<a href="#component-input">Input</a>
<ul>
<li class="level2">
<a href="#filtered-input">Filtered input</a>
</li>
</ul>
</li>
<li class="level1">
<a href="#component-menu">Menu</a>
</li>
<li class="level1">
<a href="#component-toggle">Toggle </a>
</li>
<li class="level1">
<a href="#component-checkbox">CheckBox</a>
</li>
<li class="level1">
<a href="#component-radiobox">RadioBox</a>
</li>
<li class="level1">
<a href="#component-dropdown">Dropdown</a>
</li>
<li class="level1">
<a href="#component-slider">Slider</a>
</li>
<li class="level1">
<a href="#component-renderer">Renderer</a>
</li>
<li class="level1">
<a href="#component-catchevent">CatchEvent</a>
</li>
<li class="level1">
<a href="#component-collapsible">Collapsible</a>
</li>
<li class="level1">
<a href="#component-maybe">Maybe</a>
</li>
<li class="level1">
<a href="#component-container">Container</a>
<ul>
<li class="level2">
<a href="#component-horizontal">Horizontal</a>
</li>
<li class="level2">
<a href="#component-vertical">Vertical</a>
</li>
<li class="level2">
<a href="#component-tab">Tab</a>
</li>
</ul>
</li>
<li class="level1">
<a href="#component-resizable-split">ResizableSplit</a>
</li>
<li class="level1">
<a href="#component-force-redraw">Force a frame redraw.</a>
</li>
</ul>
</div>
<div class="textblock"><p><img src="https://nsm09.casimages.com/img/2025/05/31//2505310207423242518595349.png" alt="title-img" class="inline"/></p>
<p><code>ftxui::component</code> 模組定義了生成互動元件的邏輯,這些元件響應使用者事件(鍵盤、滑鼠等)。</p>
<p><a class="el" href="module-component-examples.html">Example</a> 章節提供了一系列範例。</p>
<p><code><a class="el" href="group__component.html#classftxui_1_1ScreenInteractive" title="ScreenInteractive 是一個可以處理事件、執行主迴圈並管理組件的 Screen。">ftxui::ScreenInteractive</a></code> 定義了一個主循環,用於渲染元件。</p>
<p><code><a class="el" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">ftxui::Component</a></code><code><a class="el" href="group__component.html#classftxui_1_1ComponentBase" title="它將自己實作為 ftxui::Element 進行渲染。它透過回應 ftxui::Event 來實現鍵盤導航。">ftxui::ComponentBase</a></code> 的共享指針。後者定義了:</p><ul>
<li><code><a class="el" href="group__component.html#a28d41d6113c5b29c8dd45846582b3299" title="繪製組件。 建構一個 ftxui::Element用於在表示此 ftxui::ComponentBase 的 ftxui::Screen 上繪製。請覆寫 OnRender() 以修改渲染。">ftxui::ComponentBase::Render()</a></code>: 如何渲染介面。</li>
<li><code><a class="el" href="group__component.html#ab84629a8fecad2e1cdd426b7ddc72277" title="回應事件時呼叫。">ftxui::ComponentBase::OnEvent()</a></code>: 如何響應事件。</li>
<li><code><a class="el" href="group__component.html#a21f040bec9104e164bfa6c3ad45be3a1" title="新增一個子項。 @param child 要附加的子項。">ftxui::ComponentBase::Add()</a></code>: 在兩個元件之間建立父/子關係。元件樹用於定義如何使用鍵盤導航。</li>
</ul>
<p><code><a class="el" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">ftxui::Element</a></code> 用於渲染單個畫面。</p>
<p><code><a class="el" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">ftxui::Component</a></code> 用於渲染動態使用者介面,生成多個畫面,並在事件發生時更新其狀態。</p>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples_2component_2gallery_8cpp-example.html">畫廊</a> 多個元件的集合。 (<a href="https://arthursonzogni.github.io/FTXUI/examples/?file=component/gallery">demo</a>)</p>
<p><img src="https://user-images.githubusercontent.com/4759106/147247330-b60beb9f-e665-48b4-81c0-4b01ee95bc66.png" alt="image" class="inline"/></p>
<p>所有預定義的元件都可以在 <a href="./component_8hpp.html">"ftxui/dom/component.hpp"</a> 中找到。</p>
<div class="fragment"><div class="line"><span class="comment">// Copyright 2021 Arthur Sonzogni. 版權所有。</span></div>
<div class="line"><span class="comment">// 本源代碼受 MIT 許可證約束,詳情請參閱 LICENSE 文件。</span></div>
<div class="line"><span class="preprocessor">#ifndef FTXUI_COMPONENT_HPP</span></div>
<div class="line"><span class="preprocessor">#define FTXUI_COMPONENT_HPP</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &lt;functional&gt;</span> <span class="comment">// for function</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for make_shared, shared_ptr</span></div>
<div class="line"><span class="preprocessor">#include &lt;utility&gt;</span> <span class="comment">// for forward</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &lt;<a class="code" href="warn__windows__macro_8hpp.html">ftxui/util/warn_windows_macro.hpp</a>&gt;</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for Component, Components</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__options_8hpp.html">ftxui/component/component_options.hpp</a>&quot;</span> <span class="comment">// for ButtonOption, CheckboxOption, MenuOption</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for Element</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="ref_8hpp.html">ftxui/util/ref.hpp</a>&quot;</span> <span class="comment">// for ConstRef, Ref, ConstStringRef, ConstStringListRef, StringRef</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a> {</div>
<div class="line"><span class="keyword">struct </span>ButtonOption;</div>
<div class="line"><span class="keyword">struct </span>CheckboxOption;</div>
<div class="line"><span class="keyword">struct </span>Event;</div>
<div class="line"><span class="keyword">struct </span>InputOption;</div>
<div class="line"><span class="keyword">struct </span>MenuOption;</div>
<div class="line"><span class="keyword">struct </span>RadioboxOption;</div>
<div class="line"><span class="keyword">struct </span>MenuEntryOption;</div>
<div class="line"> </div>
<div class="line"><span class="keyword">template</span> &lt;<span class="keyword">class </span>T, <span class="keyword">class</span>... Args&gt;</div>
<div class="line">std::shared_ptr&lt;T&gt; <a class="code hl_function" href="namespaceftxui.html#a2b8973dc71334f1d98e2e6f55de8b5ae">Make</a>(Args&amp;&amp;... args) {</div>
<div class="line"> <span class="keywordflow">return</span> std::make_shared&lt;T&gt;(std::forward&lt;Args&gt;(args)...);</div>
<div class="line">}</div>
<div class="line"> </div>
<div class="line"><span class="comment">// 用於裝飾組件的管道運算符。</span></div>
<div class="line"><span class="keyword">using </span><a class="code hl_typedef" href="namespaceftxui.html#af07b496fe512e3a4863ee546f19e9a6c">ComponentDecorator</a> = std::function&lt;<a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a>(<a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a>)&gt;;</div>
<div class="line"><span class="keyword">using </span><a class="code hl_typedef" href="namespaceftxui.html#a2d5012891073dbf196bfada5f702f382">ElementDecorator</a> = std::function&lt;<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>)&gt;;</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="namespaceftxui.html#a65a2e15f64ae3bc205c485abc3a5aeb9">operator|</a>(<a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_variable" href="gallery_8cpp.html#a768a57bc667a7482ea6e7fdadf02ba90">component</a>, <a class="code hl_typedef" href="namespaceftxui.html#af07b496fe512e3a4863ee546f19e9a6c">ComponentDecorator</a> decorator);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="namespaceftxui.html#a65a2e15f64ae3bc205c485abc3a5aeb9">operator|</a>(<a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_variable" href="gallery_8cpp.html#a768a57bc667a7482ea6e7fdadf02ba90">component</a>, <a class="code hl_typedef" href="namespaceftxui.html#a2d5012891073dbf196bfada5f702f382">ElementDecorator</a> decorator);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a>&amp; <a class="code hl_function" href="namespaceftxui.html#ade35e69d695327db85be01c9787c39f8">operator|=</a>(<a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a>&amp; <a class="code hl_variable" href="gallery_8cpp.html#a768a57bc667a7482ea6e7fdadf02ba90">component</a>, <a class="code hl_typedef" href="namespaceftxui.html#af07b496fe512e3a4863ee546f19e9a6c">ComponentDecorator</a> decorator);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a>&amp; <a class="code hl_function" href="namespaceftxui.html#ade35e69d695327db85be01c9787c39f8">operator|=</a>(<a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a>&amp; <a class="code hl_variable" href="gallery_8cpp.html#a768a57bc667a7482ea6e7fdadf02ba90">component</a>, <a class="code hl_typedef" href="namespaceftxui.html#a2d5012891073dbf196bfada5f702f382">ElementDecorator</a> decorator);</div>
<div class="line"> </div>
<div class="line"><span class="keyword">namespace </span><a class="code hl_namespace" href="namespaceContainer.html">Container</a> {</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga6471e39f5664d059144746c5801d37e6">Vertical</a>(<a class="code hl_typedef" href="namespaceftxui.html#a3d4ccad0c8a07d5b0cb4b2e690ffc90c">Components</a> children);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga6471e39f5664d059144746c5801d37e6">Vertical</a>(<a class="code hl_typedef" href="namespaceftxui.html#a3d4ccad0c8a07d5b0cb4b2e690ffc90c">Components</a> children, <span class="keywordtype">int</span>* selector);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga01563bae9454fe64c0b29b0eb3755e68">Horizontal</a>(<a class="code hl_typedef" href="namespaceftxui.html#a3d4ccad0c8a07d5b0cb4b2e690ffc90c">Components</a> children);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga01563bae9454fe64c0b29b0eb3755e68">Horizontal</a>(<a class="code hl_typedef" href="namespaceftxui.html#a3d4ccad0c8a07d5b0cb4b2e690ffc90c">Components</a> children, <span class="keywordtype">int</span>* selector);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#gaea9fe244eeeb420276bcc5760b46953d">Tab</a>(<a class="code hl_typedef" href="namespaceftxui.html#a3d4ccad0c8a07d5b0cb4b2e690ffc90c">Components</a> children, <span class="keywordtype">int</span>* selector);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#gaafd394665b0c231380a143b810339d8e">Stacked</a>(<a class="code hl_typedef" href="namespaceftxui.html#a3d4ccad0c8a07d5b0cb4b2e690ffc90c">Components</a> children);</div>
<div class="line">} <span class="comment">// namespace Container</span></div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga4e8295ec77dd31b0acc5063b134473e7">Button</a>(ButtonOption options);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga4e8295ec77dd31b0acc5063b134473e7">Button</a>(ConstStringRef label,</div>
<div class="line"> std::function&lt;<span class="keywordtype">void</span>()&gt; on_click,</div>
<div class="line"> ButtonOption options = <a class="code hl_function" href="group__component.html#a553fe18f102e8e62aec516d4d3213eac">ButtonOption::Simple</a>());</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga243cc8fe212cb7467025c89e84288bdb">Checkbox</a>(CheckboxOption options);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga243cc8fe212cb7467025c89e84288bdb">Checkbox</a>(ConstStringRef label,</div>
<div class="line"> <span class="keywordtype">bool</span>* checked,</div>
<div class="line"> CheckboxOption options = <a class="code hl_function" href="group__component.html#a41b17a916980353033366c01b15d3cb1">CheckboxOption::Simple</a>());</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga7f285fcbc4dd0a0767b89a255fd062dc">Input</a>(InputOption options = {});</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga7f285fcbc4dd0a0767b89a255fd062dc">Input</a>(StringRef content, InputOption options = {});</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga7f285fcbc4dd0a0767b89a255fd062dc">Input</a>(StringRef content,</div>
<div class="line"> StringRef placeholder,</div>
<div class="line"> InputOption options = {});</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga27828fc39da10a18478ba84b1b162039">Menu</a>(MenuOption options);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga27828fc39da10a18478ba84b1b162039">Menu</a>(ConstStringListRef entries,</div>
<div class="line"> <span class="keywordtype">int</span>* selected_,</div>
<div class="line"> MenuOption options = <a class="code hl_function" href="group__component.html#a617c59fdb94db99100d0e7a569c31d75">MenuOption::Vertical</a>());</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga2c0a27959e6a5d90109f6d4506e00f69">MenuEntry</a>(MenuEntryOption options);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga2c0a27959e6a5d90109f6d4506e00f69">MenuEntry</a>(ConstStringRef label, MenuEntryOption options = {});</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga3e7a44f321fa910f07aef5879e67af95">Radiobox</a>(RadioboxOption options);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga3e7a44f321fa910f07aef5879e67af95">Radiobox</a>(ConstStringListRef entries,</div>
<div class="line"> <span class="keywordtype">int</span>* selected_,</div>
<div class="line"> RadioboxOption options = {});</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#gaa22bddff4aeed66e20f30d0715596999">Dropdown</a>(ConstStringListRef entries, <span class="keywordtype">int</span>* selected);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#gaa22bddff4aeed66e20f30d0715596999">Dropdown</a>(DropdownOption options);</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga3537fccac66b07cd792874c9a6086811">Toggle</a>(ConstStringListRef entries, <span class="keywordtype">int</span>* selected);</div>
<div class="line"> </div>
<div class="line"><span class="comment">// General slider constructor:</span></div>
<div class="line"><span class="keyword">template</span> &lt;<span class="keyword">typename</span> T&gt;</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="namespaceftxui.html#aa3558d992a72679e5e9c9c7b67abd727">Slider</a>(SliderOption&lt;T&gt; options);</div>
<div class="line"> </div>
<div class="line"><span class="comment">// Shorthand without the `SliderOption` constructor:</span></div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="namespaceftxui.html#aa3558d992a72679e5e9c9c7b67abd727">Slider</a>(ConstStringRef label,</div>
<div class="line"> Ref&lt;int&gt; value,</div>
<div class="line"> ConstRef&lt;int&gt; min = 0,</div>
<div class="line"> ConstRef&lt;int&gt; max = 100,</div>
<div class="line"> ConstRef&lt;int&gt; increment = 5);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="namespaceftxui.html#aa3558d992a72679e5e9c9c7b67abd727">Slider</a>(ConstStringRef label,</div>
<div class="line"> Ref&lt;float&gt; value,</div>
<div class="line"> ConstRef&lt;float&gt; min = 0.f,</div>
<div class="line"> ConstRef&lt;float&gt; max = 100.f,</div>
<div class="line"> ConstRef&lt;float&gt; increment = 5.f);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="namespaceftxui.html#aa3558d992a72679e5e9c9c7b67abd727">Slider</a>(ConstStringRef label,</div>
<div class="line"> Ref&lt;long&gt; value,</div>
<div class="line"> ConstRef&lt;long&gt; min = 0L,</div>
<div class="line"> ConstRef&lt;long&gt; max = 100L,</div>
<div class="line"> ConstRef&lt;long&gt; increment = 5L);</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="namespaceftxui.html#a5ce41caeafc35dedc5c7da5347386e80">ResizableSplit</a>(ResizableSplitOption options);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#gae2205fc172615b43e1e3307bb614be4c">ResizableSplitLeft</a>(<a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>, <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> back, <span class="keywordtype">int</span>* main_size);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga9030d0beb64f653603cab382b02750a8">ResizableSplitRight</a>(<a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>, <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> back, <span class="keywordtype">int</span>* main_size);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga238b4b650aca14716b82b2198695e008">ResizableSplitTop</a>(<a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>, <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> back, <span class="keywordtype">int</span>* main_size);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#gacb75e6e61a021829893f7b57aeb7e3a2">ResizableSplitBottom</a>(<a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>, <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> back, <span class="keywordtype">int</span>* main_size);</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga533e883e2aeea28de2b60564fcaf0361">Renderer</a>(<a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> child, std::function&lt;<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>()&gt;);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga533e883e2aeea28de2b60564fcaf0361">Renderer</a>(std::function&lt;<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>()&gt;);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga533e883e2aeea28de2b60564fcaf0361">Renderer</a>(std::function&lt;<a class="code hl_typedef" href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">Element</a>(<span class="keywordtype">bool</span> <span class="comment">/* focused */</span>)&gt;);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af07b496fe512e3a4863ee546f19e9a6c">ComponentDecorator</a> <a class="code hl_function" href="group__component.html#ga533e883e2aeea28de2b60564fcaf0361">Renderer</a>(<a class="code hl_typedef" href="namespaceftxui.html#a2d5012891073dbf196bfada5f702f382">ElementDecorator</a>);</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="namespaceftxui.html#afa5872ba3f9889c7487e57e745e56857">CatchEvent</a>(<a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> child, std::function&lt;<span class="keywordtype">bool</span>(Event)&gt;);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af07b496fe512e3a4863ee546f19e9a6c">ComponentDecorator</a> <a class="code hl_function" href="namespaceftxui.html#afa5872ba3f9889c7487e57e745e56857">CatchEvent</a>(std::function&lt;<span class="keywordtype">bool</span>(Event)&gt; on_event);</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga20b66a70c1cd4ff3f0ff571a4507d2b4">Maybe</a>(<a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a>, <span class="keyword">const</span> <span class="keywordtype">bool</span>* show);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga20b66a70c1cd4ff3f0ff571a4507d2b4">Maybe</a>(<a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a>, std::function&lt;<span class="keywordtype">bool</span>()&gt;);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af07b496fe512e3a4863ee546f19e9a6c">ComponentDecorator</a> <a class="code hl_function" href="group__component.html#ga20b66a70c1cd4ff3f0ff571a4507d2b4">Maybe</a>(<span class="keyword">const</span> <span class="keywordtype">bool</span>* show);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af07b496fe512e3a4863ee546f19e9a6c">ComponentDecorator</a> <a class="code hl_function" href="group__component.html#ga20b66a70c1cd4ff3f0ff571a4507d2b4">Maybe</a>(std::function&lt;<span class="keywordtype">bool</span>()&gt;);</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga5185342fbba215496cb8a6805f36089c">Modal</a>(<a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>, <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> modal, <span class="keyword">const</span> <span class="keywordtype">bool</span>* show_modal);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af07b496fe512e3a4863ee546f19e9a6c">ComponentDecorator</a> <a class="code hl_function" href="group__component.html#ga5185342fbba215496cb8a6805f36089c">Modal</a>(<a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> modal, <span class="keyword">const</span> <span class="keywordtype">bool</span>* show_modal);</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="namespaceftxui.html#a760cd5eb9a72c008ca18f1e6b366c796">Collapsible</a>(ConstStringRef label,</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> child,</div>
<div class="line"> Ref&lt;bool&gt; show = <span class="keyword">false</span>);</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga562d984d3830d63285643565cd55d16f">Hoverable</a>(<a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_variable" href="gallery_8cpp.html#a768a57bc667a7482ea6e7fdadf02ba90">component</a>, <span class="keywordtype">bool</span>* hover);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga562d984d3830d63285643565cd55d16f">Hoverable</a>(<a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_variable" href="gallery_8cpp.html#a768a57bc667a7482ea6e7fdadf02ba90">component</a>,</div>
<div class="line"> std::function&lt;<span class="keywordtype">void</span>()&gt; on_enter,</div>
<div class="line"> std::function&lt;<span class="keywordtype">void</span>()&gt; on_leave);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga562d984d3830d63285643565cd55d16f">Hoverable</a>(<a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_variable" href="gallery_8cpp.html#a768a57bc667a7482ea6e7fdadf02ba90">component</a>, <span class="comment">//</span></div>
<div class="line"> std::function&lt;<span class="keywordtype">void</span>(<span class="keywordtype">bool</span>)&gt; on_change);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af07b496fe512e3a4863ee546f19e9a6c">ComponentDecorator</a> <a class="code hl_function" href="group__component.html#ga562d984d3830d63285643565cd55d16f">Hoverable</a>(<span class="keywordtype">bool</span>* hover);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af07b496fe512e3a4863ee546f19e9a6c">ComponentDecorator</a> <a class="code hl_function" href="group__component.html#ga562d984d3830d63285643565cd55d16f">Hoverable</a>(std::function&lt;<span class="keywordtype">void</span>()&gt; on_enter,</div>
<div class="line"> std::function&lt;<span class="keywordtype">void</span>()&gt; on_leave);</div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af07b496fe512e3a4863ee546f19e9a6c">ComponentDecorator</a> <a class="code hl_function" href="group__component.html#ga562d984d3830d63285643565cd55d16f">Hoverable</a>(std::function&lt;<span class="keywordtype">void</span>(<span class="keywordtype">bool</span>)&gt; on_change);</div>
<div class="line"> </div>
<div class="line"><a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> <a class="code hl_function" href="group__component.html#ga638693abef9289912f5fa39606390b20">Window</a>(WindowOptions option);</div>
<div class="line"> </div>
<div class="line">} <span class="comment">// namespace ftxui</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#endif </span><span class="comment">/* end of include guard: FTXUI_COMPONENT_HPP */</span><span class="preprocessor"></span></div>
<div class="ttc" id="acomponent__base_8hpp_html"><div class="ttname"><a href="component__base_8hpp.html">component_base.hpp</a></div></div>
<div class="ttc" id="acomponent__options_8hpp_html"><div class="ttname"><a href="component__options_8hpp.html">component_options.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="agallery_8cpp_html_a768a57bc667a7482ea6e7fdadf02ba90"><div class="ttname"><a href="gallery_8cpp.html#a768a57bc667a7482ea6e7fdadf02ba90">component</a></div><div class="ttdeci">auto component</div><div class="ttdef"><b>Definition</b> <a href="gallery_8cpp_source.html#l00127">gallery.cpp:127</a></div></div>
<div class="ttc" id="agroup__component_html_a41b17a916980353033366c01b15d3cb1"><div class="ttname"><a href="group__component.html#a41b17a916980353033366c01b15d3cb1">ftxui::CheckboxOption::Simple</a></div><div class="ttdeci">static CheckboxOption Simple()</div><div class="ttdoc">標準Checkbox的選項。</div><div class="ttdef"><b>Definition</b> <a href="component__options_8cpp_source.html#l00243">component_options.cpp:243</a></div></div>
<div class="ttc" id="agroup__component_html_a553fe18f102e8e62aec516d4d3213eac"><div class="ttname"><a href="group__component.html#a553fe18f102e8e62aec516d4d3213eac">ftxui::ButtonOption::Simple</a></div><div class="ttdeci">static ButtonOption Simple()</div><div class="ttdoc">創建一個 ButtonOption在聚焦時反轉。</div><div class="ttdef"><b>Definition</b> <a href="component__options_8cpp_source.html#l00164">component_options.cpp:164</a></div></div>
<div class="ttc" id="agroup__component_html_a617c59fdb94db99100d0e7a569c31d75"><div class="ttname"><a href="group__component.html#a617c59fdb94db99100d0e7a569c31d75">ftxui::MenuOption::Vertical</a></div><div class="ttdeci">static MenuOption Vertical()</div><div class="ttdoc">垂直選單的標準選項。 這對於實現一個可選項目列表很有用。</div><div class="ttdef"><b>Definition</b> <a href="component__options_8cpp_source.html#l00101">component_options.cpp:101</a></div></div>
<div class="ttc" id="agroup__component_html_ga01563bae9454fe64c0b29b0eb3755e68"><div class="ttname"><a href="group__component.html#ga01563bae9454fe64c0b29b0eb3755e68">ftxui::Container::Horizontal</a></div><div class="ttdeci">Component Horizontal(Components children)</div><div class="ttdoc">一個元件列表,水平地一個接一個繪製,並使用左/右箭頭鍵或 'h'/'l' 鍵進行水平導航。</div><div class="ttdef"><b>Definition</b> <a href="container_8cpp_source.html#l00356">container.cpp:356</a></div></div>
<div class="ttc" id="agroup__component_html_ga20b66a70c1cd4ff3f0ff571a4507d2b4"><div class="ttname"><a href="group__component.html#ga20b66a70c1cd4ff3f0ff571a4507d2b4">ftxui::Maybe</a></div><div class="ttdeci">Component Maybe(Component, const bool *show)</div><div class="ttdoc">裝飾一個組件 |child|。它只在 |show| 為 true 時顯示。</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2component_2maybe_8cpp_source.html#l00071">src/ftxui/component/maybe.cpp:71</a></div></div>
<div class="ttc" id="agroup__component_html_ga238b4b650aca14716b82b2198695e008"><div class="ttname"><a href="group__component.html#ga238b4b650aca14716b82b2198695e008">ftxui::ResizableSplitTop</a></div><div class="ttdeci">Component ResizableSplitTop(Component main, Component back, int *main_size)</div><div class="ttdoc">兩個元件之間的垂直分割,可透過滑鼠設定。</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2component_2resizable__split_8cpp_source.html#l00264">src/ftxui/component/resizable_split.cpp:264</a></div></div>
<div class="ttc" id="agroup__component_html_ga243cc8fe212cb7467025c89e84288bdb"><div class="ttname"><a href="group__component.html#ga243cc8fe212cb7467025c89e84288bdb">ftxui::Checkbox</a></div><div class="ttdeci">Component Checkbox(CheckboxOption options)</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2component_2checkbox_8cpp_source.html#l00107">src/ftxui/component/checkbox.cpp:107</a></div></div>
<div class="ttc" id="agroup__component_html_ga27828fc39da10a18478ba84b1b162039"><div class="ttname"><a href="group__component.html#ga27828fc39da10a18478ba84b1b162039">ftxui::Menu</a></div><div class="ttdeci">Component Menu(MenuOption options)</div><div class="ttdoc">文字列表。選定的元素會被聚焦。</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2component_2menu_8cpp_source.html#l00512">src/ftxui/component/menu.cpp:512</a></div></div>
<div class="ttc" id="agroup__component_html_ga2c0a27959e6a5d90109f6d4506e00f69"><div class="ttname"><a href="group__component.html#ga2c0a27959e6a5d90109f6d4506e00f69">ftxui::MenuEntry</a></div><div class="ttdeci">Component MenuEntry(MenuEntryOption options)</div><div class="ttdoc">一個特定的菜單條目。它們可以放入 Container::Vertical 中以形成菜單。</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2component_2menu_8cpp_source.html#l00612">src/ftxui/component/menu.cpp:612</a></div></div>
<div class="ttc" id="agroup__component_html_ga3537fccac66b07cd792874c9a6086811"><div class="ttname"><a href="group__component.html#ga3537fccac66b07cd792874c9a6086811">ftxui::Toggle</a></div><div class="ttdeci">Component Toggle(ConstStringListRef entries, int *selected)</div><div class="ttdoc">元素的水平列表。使用者可以在其中導航。</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2component_2menu_8cpp_source.html#l00554">src/ftxui/component/menu.cpp:554</a></div></div>
<div class="ttc" id="agroup__component_html_ga3e7a44f321fa910f07aef5879e67af95"><div class="ttname"><a href="group__component.html#ga3e7a44f321fa910f07aef5879e67af95">ftxui::Radiobox</a></div><div class="ttdeci">Component Radiobox(RadioboxOption options)</div><div class="ttdoc">元素清單,只能選擇一個。</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2component_2radiobox_8cpp_source.html#l00203">src/ftxui/component/radiobox.cpp:203</a></div></div>
<div class="ttc" id="agroup__component_html_ga4e8295ec77dd31b0acc5063b134473e7"><div class="ttname"><a href="group__component.html#ga4e8295ec77dd31b0acc5063b134473e7">ftxui::Button</a></div><div class="ttdeci">Component Button(ButtonOption options)</div><div class="ttdoc">繪製一個按鈕。點擊時執行一個函數。</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2component_2button_8cpp_source.html#l00174">src/ftxui/component/button.cpp:174</a></div></div>
<div class="ttc" id="agroup__component_html_ga5185342fbba215496cb8a6805f36089c"><div class="ttname"><a href="group__component.html#ga5185342fbba215496cb8a6805f36089c">ftxui::Modal</a></div><div class="ttdeci">Component Modal(Component main, Component modal, const bool *show_modal)</div><div class="ttdef"><b>Definition</b> <a href="modal_8cpp_source.html#l00018">modal.cpp:18</a></div></div>
<div class="ttc" id="agroup__component_html_ga533e883e2aeea28de2b60564fcaf0361"><div class="ttname"><a href="group__component.html#ga533e883e2aeea28de2b60564fcaf0361">ftxui::Renderer</a></div><div class="ttdeci">Component Renderer(Component child, std::function&lt; Element()&gt;)</div><div class="ttdoc">回傳一個新的元件,類似於 |child|,但使用 |render| 作為 Component::Render() 事件。</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2component_2renderer_8cpp_source.html#l00059">src/ftxui/component/renderer.cpp:59</a></div></div>
<div class="ttc" id="agroup__component_html_ga562d984d3830d63285643565cd55d16f"><div class="ttname"><a href="group__component.html#ga562d984d3830d63285643565cd55d16f">ftxui::Hoverable</a></div><div class="ttdeci">Component Hoverable(Component component, bool *hover)</div><div class="ttdoc">包裝一個元件。提供能力以判斷滑鼠是否懸停在其上方。</div><div class="ttdef"><b>Definition</b> <a href="hoverable_8cpp_source.html#l00041">hoverable.cpp:41</a></div></div>
<div class="ttc" id="agroup__component_html_ga638693abef9289912f5fa39606390b20"><div class="ttname"><a href="group__component.html#ga638693abef9289912f5fa39606390b20">ftxui::Window</a></div><div class="ttdeci">Component Window(WindowOptions option)</div><div class="ttdoc">一個可拖曳/可調整大小的視窗。要使用多個視窗,它們必須透過 Container::Stacked({...}) 元件堆疊。</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2component_2window_8cpp_source.html#l00312">src/ftxui/component/window.cpp:312</a></div></div>
<div class="ttc" id="agroup__component_html_ga6471e39f5664d059144746c5801d37e6"><div class="ttname"><a href="group__component.html#ga6471e39f5664d059144746c5801d37e6">ftxui::Container::Vertical</a></div><div class="ttdeci">Component Vertical(Components children)</div><div class="ttdoc">一個元件列表,垂直地一個接一個繪製,並使用上/下箭頭鍵或 'j'/'k' 鍵進行垂直導航。</div><div class="ttdef"><b>Definition</b> <a href="container_8cpp_source.html#l00315">container.cpp:315</a></div></div>
<div class="ttc" id="agroup__component_html_ga7f285fcbc4dd0a0767b89a255fd062dc"><div class="ttname"><a href="group__component.html#ga7f285fcbc4dd0a0767b89a255fd062dc">ftxui::Input</a></div><div class="ttdeci">Component Input(InputOption options={})</div><div class="ttdoc">用於編輯文字的輸入框。</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2component_2input_8cpp_source.html#l00570">src/ftxui/component/input.cpp:570</a></div></div>
<div class="ttc" id="agroup__component_html_ga9030d0beb64f653603cab382b02750a8"><div class="ttname"><a href="group__component.html#ga9030d0beb64f653603cab382b02750a8">ftxui::ResizableSplitRight</a></div><div class="ttdeci">Component ResizableSplitRight(Component main, Component back, int *main_size)</div><div class="ttdoc">兩個元件之間的水平分割,可透過滑鼠設定。</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2component_2resizable__split_8cpp_source.html#l00231">src/ftxui/component/resizable_split.cpp:231</a></div></div>
<div class="ttc" id="agroup__component_html_gaa22bddff4aeed66e20f30d0715596999"><div class="ttname"><a href="group__component.html#gaa22bddff4aeed66e20f30d0715596999">ftxui::Dropdown</a></div><div class="ttdeci">Component Dropdown(ConstStringListRef entries, int *selected)</div><div class="ttdoc">下拉式選單。</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2component_2dropdown_8cpp_source.html#l00021">src/ftxui/component/dropdown.cpp:21</a></div></div>
<div class="ttc" id="agroup__component_html_gaafd394665b0c231380a143b810339d8e"><div class="ttname"><a href="group__component.html#gaafd394665b0c231380a143b810339d8e">ftxui::Container::Stacked</a></div><div class="ttdeci">Component Stacked(Components children)</div><div class="ttdoc">一個元件列表,將彼此堆疊。 事件會傳播到第一個元件,如果未處理則傳播到第二個,依此類推。 元件以給定的相反順序繪製。 當一個元件獲得焦點時,它會被放到最前面,而不改變其他元素的相對順序。</div><div class="ttdef"><b>Definition</b> <a href="container_8cpp_source.html#l00423">container.cpp:423</a></div></div>
<div class="ttc" id="agroup__component_html_gacb75e6e61a021829893f7b57aeb7e3a2"><div class="ttname"><a href="group__component.html#gacb75e6e61a021829893f7b57aeb7e3a2">ftxui::ResizableSplitBottom</a></div><div class="ttdeci">Component ResizableSplitBottom(Component main, Component back, int *main_size)</div><div class="ttdoc">兩個元件之間的垂直分割,可透過滑鼠設定。</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2component_2resizable__split_8cpp_source.html#l00297">src/ftxui/component/resizable_split.cpp:297</a></div></div>
<div class="ttc" id="agroup__component_html_gae2205fc172615b43e1e3307bb614be4c"><div class="ttname"><a href="group__component.html#gae2205fc172615b43e1e3307bb614be4c">ftxui::ResizableSplitLeft</a></div><div class="ttdeci">Component ResizableSplitLeft(Component main, Component back, int *main_size)</div><div class="ttdoc">兩個元件之間的水平分割,可透過滑鼠設定。</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2component_2resizable__split_8cpp_source.html#l00198">src/ftxui/component/resizable_split.cpp:198</a></div></div>
<div class="ttc" id="agroup__component_html_gaea9fe244eeeb420276bcc5760b46953d"><div class="ttname"><a href="group__component.html#gaea9fe244eeeb420276bcc5760b46953d">ftxui::Container::Tab</a></div><div class="ttdeci">Component Tab(Components children, int *selector)</div><div class="ttdoc">一個元件列表,一次只繪製一個並與之互動。|selector| 給出所選元件的索引。這對於實作分頁很有用。</div><div class="ttdef"><b>Definition</b> <a href="container_8cpp_source.html#l00398">container.cpp:398</a></div></div>
<div class="ttc" id="anamespaceContainer_html"><div class="ttname"><a href="namespaceContainer.html">Container</a></div><div class="ttdoc">FTXUI ftxui::Container:: 命名空間</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="anamespaceftxui_html_a2b8973dc71334f1d98e2e6f55de8b5ae"><div class="ttname"><a href="namespaceftxui.html#a2b8973dc71334f1d98e2e6f55de8b5ae">ftxui::Make</a></div><div class="ttdeci">std::shared_ptr&lt; T &gt; Make(Args &amp;&amp;... args)</div><div class="ttdef"><b>Definition</b> <a href="component_8hpp_source.html#l00026">component.hpp:26</a></div></div>
<div class="ttc" id="anamespaceftxui_html_a2bc31f2d685189e5c61d2293a1f51b4f"><div class="ttname"><a href="namespaceftxui.html#a2bc31f2d685189e5c61d2293a1f51b4f">ftxui::Element</a></div><div class="ttdeci">std::shared_ptr&lt; Node &gt; Element</div><div class="ttdef"><b>Definition</b> <a href="elements_8hpp_source.html#l00022">elements.hpp:22</a></div></div>
<div class="ttc" id="anamespaceftxui_html_a2d5012891073dbf196bfada5f702f382"><div class="ttname"><a href="namespaceftxui.html#a2d5012891073dbf196bfada5f702f382">ftxui::ElementDecorator</a></div><div class="ttdeci">std::function&lt; Element(Element)&gt; ElementDecorator</div><div class="ttdef"><b>Definition</b> <a href="component_8hpp_source.html#l00032">component.hpp:32</a></div></div>
<div class="ttc" id="anamespaceftxui_html_a3d4ccad0c8a07d5b0cb4b2e690ffc90c"><div class="ttname"><a href="namespaceftxui.html#a3d4ccad0c8a07d5b0cb4b2e690ffc90c">ftxui::Components</a></div><div class="ttdeci">std::vector&lt; Component &gt; Components</div><div class="ttdef"><b>Definition</b> <a href="component__base_8hpp_source.html#l00024">component_base.hpp:24</a></div></div>
<div class="ttc" id="anamespaceftxui_html_a5ce41caeafc35dedc5c7da5347386e80"><div class="ttname"><a href="namespaceftxui.html#a5ce41caeafc35dedc5c7da5347386e80">ftxui::ResizableSplit</a></div><div class="ttdeci">Component ResizableSplit(ResizableSplitOption options)</div><div class="ttdoc">兩個元件之間的分隔。</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2component_2resizable__split_8cpp_source.html#l00170">src/ftxui/component/resizable_split.cpp:170</a></div></div>
<div class="ttc" id="anamespaceftxui_html_a65a2e15f64ae3bc205c485abc3a5aeb9"><div class="ttname"><a href="namespaceftxui.html#a65a2e15f64ae3bc205c485abc3a5aeb9">ftxui::operator|</a></div><div class="ttdeci">Component operator|(Component component, ComponentDecorator decorator)</div><div class="ttdef"><b>Definition</b> <a href="component_2util_8cpp_source.html#l00011">component/util.cpp:11</a></div></div>
<div class="ttc" id="anamespaceftxui_html_a760cd5eb9a72c008ca18f1e6b366c796"><div class="ttname"><a href="namespaceftxui.html#a760cd5eb9a72c008ca18f1e6b366c796">ftxui::Collapsible</a></div><div class="ttdeci">Component Collapsible(ConstStringRef label, Component child, Ref&lt; bool &gt; show=false)</div><div class="ttdoc">可折疊元件。它顯示一個帶有箭頭的核取方塊。一旦啟用,子元件就會顯示。</div><div class="ttdef"><b>Definition</b> <a href="src_2ftxui_2component_2collapsible_8cpp_source.html#l00032">src/ftxui/component/collapsible.cpp:32</a></div></div>
<div class="ttc" id="anamespaceftxui_html_aa3558d992a72679e5e9c9c7b67abd727"><div class="ttname"><a href="namespaceftxui.html#aa3558d992a72679e5e9c9c7b67abd727">ftxui::Slider</a></div><div class="ttdeci">Component Slider(SliderOption&lt; T &gt; options)</div></div>
<div class="ttc" id="anamespaceftxui_html_ade35e69d695327db85be01c9787c39f8"><div class="ttname"><a href="namespaceftxui.html#ade35e69d695327db85be01c9787c39f8">ftxui::operator|=</a></div><div class="ttdeci">Component &amp; operator|=(Component &amp;component, ComponentDecorator decorator)</div><div class="ttdef"><b>Definition</b> <a href="component_2util_8cpp_source.html#l00021">component/util.cpp:21</a></div></div>
<div class="ttc" id="anamespaceftxui_html_af07b496fe512e3a4863ee546f19e9a6c"><div class="ttname"><a href="namespaceftxui.html#af07b496fe512e3a4863ee546f19e9a6c">ftxui::ComponentDecorator</a></div><div class="ttdeci">std::function&lt; Component(Component)&gt; ComponentDecorator</div><div class="ttdef"><b>Definition</b> <a href="component_8hpp_source.html#l00031">component.hpp:31</a></div></div>
<div class="ttc" id="anamespaceftxui_html_af1479ede01dbf087342534ab4ada11d3"><div class="ttname"><a href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">ftxui::Component</a></div><div class="ttdeci">std::shared_ptr&lt; ComponentBase &gt; Component</div><div class="ttdef"><b>Definition</b> <a href="component__base_8hpp_source.html#l00023">component_base.hpp:23</a></div></div>
<div class="ttc" id="anamespaceftxui_html_afa5872ba3f9889c7487e57e745e56857"><div class="ttname"><a href="namespaceftxui.html#afa5872ba3f9889c7487e57e745e56857">ftxui::CatchEvent</a></div><div class="ttdeci">Component CatchEvent(Component child, std::function&lt; bool(Event)&gt;)</div></div>
<div class="ttc" id="aref_8hpp_html"><div class="ttname"><a href="ref_8hpp.html">ref.hpp</a></div></div>
<div class="ttc" id="awarn__windows__macro_8hpp_html"><div class="ttname"><a href="warn__windows__macro_8hpp.html">warn_windows_macro.hpp</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="component-input"></a>
Input</h1>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples_2component_2input_8cpp-example.html">範例</a></p>
<p><img src="https://user-images.githubusercontent.com/4759106/147247671-f1d6f606-1845-4e94-a4a0-d4273e9ae6bd.png" alt="image" class="inline"/></p>
<p><code><a class="el" href="group__component.html#ga7f285fcbc4dd0a0767b89a255fd062dc" title="用於編輯文字的輸入框。">ftxui::Input()</a></code> 從 "ftxui/component/component.hpp" 生成。</p>
<p>
<script id="asciicast-223719" src="https://asciinema.org/a/223719.js" async></script>
</p>
<h2><a class="anchor" id="filtered-input"></a>
Filtered input</h2>
<p>可以使用 <code>ftxui::CatchEvent</code> 過濾輸入元件接收到的字元。</p>
<div class="fragment"><div class="line">std::string phone_number;</div>
<div class="line">Component <a class="code hl_variable" href="gallery_8cpp.html#a877535c3b6ffdf230bce90c82c597d17">input</a> = Input(&amp;phone_number, <span class="stringliteral">&quot;phone number&quot;</span>);</div>
<div class="line"> </div>
<div class="line"><span class="comment">// Filter out non-digit characters.</span></div>
<div class="line"><a class="code hl_variable" href="gallery_8cpp.html#a877535c3b6ffdf230bce90c82c597d17">input</a> |= CatchEvent([&amp;](Event event) {</div>
<div class="line"> <span class="keywordflow">return</span> <span class="keyword">event</span>.is_character() &amp;&amp; !std::isdigit(event.character()[0]);</div>
<div class="line">});</div>
<div class="line"> </div>
<div class="line"><span class="comment">// Filter out characters past the 10th one.</span></div>
<div class="line"><a class="code hl_variable" href="gallery_8cpp.html#a877535c3b6ffdf230bce90c82c597d17">input</a> |= CatchEvent([&amp;](Event event) {</div>
<div class="line"> <span class="keywordflow">return</span> <span class="keyword">event</span>.is_character() &amp;&amp; phone_number.size() &gt;= 10;</div>
<div class="line">});</div>
<div class="ttc" id="agallery_8cpp_html_a877535c3b6ffdf230bce90c82c597d17"><div class="ttname"><a href="gallery_8cpp.html#a877535c3b6ffdf230bce90c82c597d17">input</a></div><div class="ttdeci">auto input</div><div class="ttdef"><b>Definition</b> <a href="gallery_8cpp_source.html#l00078">gallery.cpp:78</a></div></div>
</div><!-- fragment --><h1><a class="anchor" id="component-menu"></a>
Menu</h1>
<p>定義一個選單物件。它包含一個條目列表,其中一個被選中。</p>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples_2component_2menu_8cpp-example.html">範例</a></p>
<p><img src="https://user-images.githubusercontent.com/4759106/147247822-0035fd6f-bb13-4b3a-b057-77eb9291582f.png" alt="image" class="inline"/></p>
<p><code><a class="el" href="group__component.html#ga27828fc39da10a18478ba84b1b162039" title="文字列表。選定的元素會被聚焦。">ftxui::Menu()</a></code> 從 "ftxui/component/component.hpp" 生成。</p>
<p>
<script id="asciicast-223720" src="https://asciinema.org/a/223720.js" async></script>
</p>
<h1><a class="anchor" id="component-toggle"></a>
Toggle </h1>
<p>一種特殊的選單。條目水平顯示。</p>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples_2component_2toggle_8cpp-example.html">範例</a></p>
<p><img src="https://user-images.githubusercontent.com/4759106/147249383-e2201cf1-b7b8-4a5a-916f-d761e3e7ae40.png" alt="image" class="inline"/></p>
<p><code><a class="el" href="group__component.html#ga3537fccac66b07cd792874c9a6086811" title="元素的水平列表。使用者可以在其中導航。">ftxui::Toggle()</a></code> 從 "ftxui/component/component.hpp" 生成。</p>
<p>
<script id="asciicast-223722" src="https://asciinema.org/a/223722.js" async></script>
</p>
<h1><a class="anchor" id="component-checkbox"></a>
CheckBox</h1>
<p>此元件定義了一個核取方塊。它是一個單一條目,可以開啟/關閉。</p>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples_2component_2checkbox_8cpp-example.html">範例</a></p>
<p><img src="https://user-images.githubusercontent.com/4759106/147246646-b86926a9-1ef9-4efb-af98-48a9b62acd81.png" alt="image" class="inline"/></p>
<p><code><a class="el" href="group__component.html#ga243cc8fe212cb7467025c89e84288bdb">ftxui::Checkbox()</a></code> 從 "ftxui/component/component.hpp" 生成。</p>
<p>
<script id="asciicast-223724" src="https://asciinema.org/a/223724.js" async></script>
</p>
<h1><a class="anchor" id="component-radiobox"></a>
RadioBox</h1>
<p>一個單選按鈕元件。這是一個條目列表,其中一個可以開啟。</p>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples_2component_2radiobox_8cpp-example.html">範例</a></p>
<p><img src="https://user-images.githubusercontent.com/4759106/147246401-809d14a5-6621-4e36-8dd9-a2d75ef2a94e.png" alt="image" class="inline"/></p>
<p><code><a class="el" href="group__component.html#ga3e7a44f321fa910f07aef5879e67af95" title="元素清單,只能選擇一個。">ftxui::Radiobox()</a></code> 從 "ftxui/component/component.hpp" 生成。</p>
<p>
<script id="asciicast-223725" src="https://asciinema.org/a/223725.js" async></script>
</p>
<h1><a class="anchor" id="component-dropdown"></a>
Dropdown</h1>
<p>下拉式選單是一個元件,當開啟時,會顯示一個元素列表供使用者選擇。</p>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples_2component_2dropdown_8cpp-example.html">範例</a></p>
<p><img src="https://user-images.githubusercontent.com/4759106/147246982-1e821751-531c-4e1f-bc37-2fa290e143cd.gif" alt="youtube-video-gif (3)" class="inline"/></p>
<p><code><a class="el" href="group__component.html#gaa22bddff4aeed66e20f30d0715596999" title="下拉式選單。">ftxui::Dropdown()</a></code> 從 "ftxui/component/component.hpp" 生成。</p>
<h1><a class="anchor" id="component-slider"></a>
Slider</h1>
<p>表示一個滑塊物件,它由一個帶有分箱中間間隔的範圍組成。它可以使用 <code><a class="el" href="namespaceftxui.html#aa3558d992a72679e5e9c9c7b67abd727">ftxui::Slider()</a></code> 創建。</p>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples_2component_2slider_8cpp-example.html">範例</a></p>
<p><img src="https://user-images.githubusercontent.com/4759106/147249265-7e2cad75-082c-436e-affe-44a550c480ab.png" alt="image" class="inline"/></p>
<p><code><a class="el" href="namespaceftxui.html#aa3558d992a72679e5e9c9c7b67abd727">ftxui::Slider()</a></code> 從 "ftxui/component/component.hpp" 生成。</p>
<h1><a class="anchor" id="component-renderer"></a>
Renderer</h1>
<p><code><a class="el" href="group__component.html#ga533e883e2aeea28de2b60564fcaf0361" title="回傳一個新的元件,類似於 |child|,但使用 |render| 作為 Component::Render() 事件。">ftxui::Renderer()</a></code><a class="el" href="component_8hpp.html">ftxui/component/component.hpp</a> 生成。此元件通過使用不同的函數來渲染介面,從而裝飾另一個元件。</p>
<p>範例: </p><div class="fragment"><div class="line"><span class="keyword">auto</span> inner = [...] </div>
<div class="line"> </div>
<div class="line"><span class="keyword">auto</span> renderer = Renderer(inner, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> inner-&gt;Render() | border</div>
<div class="line">});</div>
</div><!-- fragment --><p><code>ftxui::Renderer</code> 也支援元件裝飾器模式: </p><div class="fragment"><div class="line"><span class="keyword">auto</span> <a class="code hl_variable" href="gallery_8cpp.html#a768a57bc667a7482ea6e7fdadf02ba90">component</a> = [...] </div>
<div class="line"><a class="code hl_variable" href="gallery_8cpp.html#a768a57bc667a7482ea6e7fdadf02ba90">component</a> = <a class="code hl_variable" href="gallery_8cpp.html#a768a57bc667a7482ea6e7fdadf02ba90">component</a></div>
<div class="line"> | Renderer([](Element e) { <span class="keywordflow">return</span> e | border))</div>
<div class="line"> | Renderer(bold)</div>
</div><!-- fragment --><p>作為簡寫,您還可以將元件與元素裝飾器組合: </p><div class="fragment"><div class="line"><span class="keyword">auto</span> <a class="code hl_variable" href="gallery_8cpp.html#a768a57bc667a7482ea6e7fdadf02ba90">component</a> = [...] </div>
<div class="line"><a class="code hl_variable" href="gallery_8cpp.html#a768a57bc667a7482ea6e7fdadf02ba90">component</a> = <a class="code hl_variable" href="gallery_8cpp.html#a768a57bc667a7482ea6e7fdadf02ba90">component</a> | border | bold;</div>
</div><!-- fragment --><h1><a class="anchor" id="component-catchevent"></a>
CatchEvent</h1>
<p><code><a class="el" href="namespaceftxui.html#afa5872ba3f9889c7487e57e745e56857">ftxui::CatchEvent()</a></code><a class="el" href="component_8hpp.html">ftxui/component/component.hpp</a> 生成。此元件裝飾其他元件,在底層元件之前捕獲事件。</p>
<p>範例: </p><div class="fragment"><div class="line"><span class="keyword">auto</span> screen = ScreenInteractive::TerminalOutput();</div>
<div class="line"><span class="keyword">auto</span> renderer = Renderer([] {</div>
<div class="line"> <span class="keywordflow">return</span> text(<span class="stringliteral">&quot;My interface&quot;</span>);</div>
<div class="line">});</div>
<div class="line"><span class="keyword">auto</span> <a class="code hl_variable" href="gallery_8cpp.html#a768a57bc667a7482ea6e7fdadf02ba90">component</a> = CatchEvent(renderer, [&amp;](Event event) {</div>
<div class="line"> <span class="keywordflow">if</span> (event == Event::Character(<span class="charliteral">&#39;q&#39;</span>)) {</div>
<div class="line"> screen.ExitLoopClosure()();</div>
<div class="line"> <span class="keywordflow">return</span> <span class="keyword">true</span>;</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> <span class="keyword">false</span>;</div>
<div class="line">});</div>
<div class="line">screen.Loop(<a class="code hl_variable" href="gallery_8cpp.html#a768a57bc667a7482ea6e7fdadf02ba90">component</a>);</div>
</div><!-- fragment --><p><code>ftxui::CatchEvent</code> 也可以用作裝飾器: </p><div class="fragment"><div class="line"><a class="code hl_variable" href="gallery_8cpp.html#a768a57bc667a7482ea6e7fdadf02ba90">component</a> = <a class="code hl_variable" href="gallery_8cpp.html#a768a57bc667a7482ea6e7fdadf02ba90">component</a></div>
<div class="line"> | CatchEvent(handler_1)</div>
<div class="line"> | CatchEvent(handler_2)</div>
<div class="line"> | CatchEvent(handler_3)</div>
<div class="line"> ;</div>
</div><!-- fragment --><h1><a class="anchor" id="component-collapsible"></a>
Collapsible</h1>
<p>對於使用者可以開啟或關閉其可見性的視覺元素很有用。本質上,這是 <code><a class="el" href="group__component.html#ga243cc8fe212cb7467025c89e84288bdb">ftxui::Checkbox()</a></code><code><a class="el" href="group__component.html#ga20b66a70c1cd4ff3f0ff571a4507d2b4" title="裝飾一個組件 |child|。它只在 |show| 為 true 時顯示。">ftxui::Maybe()</a></code> 元件的組合。</p>
<div class="fragment"><div class="line"><span class="keyword">auto</span> collapsible = Collapsible(<span class="stringliteral">&quot;Show more&quot;</span>, inner_element);</div>
</div><!-- fragment --><h1><a class="anchor" id="component-maybe"></a>
Maybe</h1>
<p><code><a class="el" href="group__component.html#ga20b66a70c1cd4ff3f0ff571a4507d2b4" title="裝飾一個組件 |child|。它只在 |show| 為 true 時顯示。">ftxui::Maybe()</a></code><a class="el" href="component_8hpp.html">ftxui/component/component.hpp</a> 生成。 此元件可用於通過布林值或謂詞顯示/隱藏任何其他元件。</p>
<p>布林值範例: </p><div class="fragment"><div class="line"><span class="keywordtype">bool</span> show = <span class="keyword">true</span>;</div>
<div class="line"><span class="keyword">auto</span> <a class="code hl_variable" href="gallery_8cpp.html#a768a57bc667a7482ea6e7fdadf02ba90">component</a> = Renderer([]{ <span class="keywordflow">return</span> <span class="stringliteral">&quot;Hello World!&quot;</span>; });</div>
<div class="line"><span class="keyword">auto</span> maybe_component = Maybe(<a class="code hl_variable" href="gallery_8cpp.html#a768a57bc667a7482ea6e7fdadf02ba90">component</a>, &amp;show)</div>
</div><!-- fragment --><p>謂詞範例: </p><div class="fragment"><div class="line"><span class="keyword">auto</span> <a class="code hl_variable" href="gallery_8cpp.html#a768a57bc667a7482ea6e7fdadf02ba90">component</a> = Renderer([]{ <span class="keywordflow">return</span> <span class="stringliteral">&quot;Hello World!&quot;</span>; });</div>
<div class="line"><span class="keyword">auto</span> maybe_component = Maybe(<a class="code hl_variable" href="gallery_8cpp.html#a768a57bc667a7482ea6e7fdadf02ba90">component</a>, [&amp;] { <span class="keywordflow">return</span> time &gt; 10; })</div>
</div><!-- fragment --><p>像往常一樣,<code>ftxui::Maybe</code> 也可以用作裝飾器: </p><div class="fragment"><div class="line"><a class="code hl_variable" href="gallery_8cpp.html#a768a57bc667a7482ea6e7fdadf02ba90">component</a> = <a class="code hl_variable" href="gallery_8cpp.html#a768a57bc667a7482ea6e7fdadf02ba90">component</a></div>
<div class="line"> | Maybe(&amp;a_boolean)</div>
<div class="line"> | Maybe([&amp;] { <span class="keywordflow">return</span> time &gt; 10; })</div>
<div class="line"> ;</div>
</div><!-- fragment --><h1><a class="anchor" id="component-container"></a>
Container</h1>
<h2><a class="anchor" id="component-horizontal"></a>
Horizontal</h2>
<p><code><a class="el" href="group__component.html#ga01563bae9454fe64c0b29b0eb3755e68" title="一個元件列表,水平地一個接一個繪製,並使用左/右箭頭鍵或 &#39;h&#39;/&#39;l&#39; 鍵進行水平導航。">ftxui::Container::Horizontal()</a></code> 從 "ftxui/component/component.hpp" 生成。它水平顯示元件列表並處理鍵盤/滑鼠導航。</p>
<h2><a class="anchor" id="component-vertical"></a>
Vertical</h2>
<p><code><a class="el" href="group__component.html#ga6471e39f5664d059144746c5801d37e6" title="一個元件列表,垂直地一個接一個繪製,並使用上/下箭頭鍵或 &#39;j&#39;/&#39;k&#39; 鍵進行垂直導航。">ftxui::Container::Vertical()</a></code> 從 "ftxui/component/component.hpp" 生成。它垂直顯示元件列表並處理鍵盤/滑鼠導航。</p>
<h2><a class="anchor" id="component-tab"></a>
Tab</h2>
<p><code><a class="el" href="group__component.html#gaea9fe244eeeb420276bcc5760b46953d" title="一個元件列表,一次只繪製一個並與之互動。|selector| 給出所選元件的索引。這對於實作分頁很有用。">ftxui::Container::Tab()</a></code> 從 "ftxui/component/component.hpp" 生成。它接受元件列表並僅顯示其中一個。這對於實現分頁欄很有用。</p>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples_2component_2tab_vertical_8cpp-example.html">垂直</a></p>
<p><img src="https://user-images.githubusercontent.com/4759106/147250144-22ff044a-4773-4ff7-a49c-12ba4034acb4.gif" alt="ezgif com-gif-maker (1)" class="inline"/></p>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples_2component_2tab_horizontal_8cpp-example.html">水平</a></p>
<p><img src="https://user-images.githubusercontent.com/4759106/147250217-fe447e0f-7a99-4e08-948a-995087d9b40e.gif" alt="ezgif com-gif-maker (2)" class="inline"/></p>
<h1><a class="anchor" id="component-resizable-split"></a>
ResizableSplit</h1>
<p>它定義了兩個子元件之間的水平或垂直分隔。分隔的位置是可變的,並且可以使用滑鼠控制。 有四種可能的分隔:</p><ul>
<li><code><a class="el" href="group__component.html#gae2205fc172615b43e1e3307bb614be4c" title="兩個元件之間的水平分割,可透過滑鼠設定。">ftxui::ResizableSplitLeft()</a></code></li>
<li><code><a class="el" href="group__component.html#ga9030d0beb64f653603cab382b02750a8" title="兩個元件之間的水平分割,可透過滑鼠設定。">ftxui::ResizableSplitRight()</a></code></li>
<li><code><a class="el" href="group__component.html#ga238b4b650aca14716b82b2198695e008" title="兩個元件之間的垂直分割,可透過滑鼠設定。">ftxui::ResizableSplitTop()</a></code></li>
<li><code><a class="el" href="group__component.html#gacb75e6e61a021829893f7b57aeb7e3a2" title="兩個元件之間的垂直分割,可透過滑鼠設定。">ftxui::ResizableSplitBottom()</a></code> 從 "ftxui/component/component.hpp"</li>
</ul>
<p><a href="https://arthursonzogni.github.io/FTXUI/examples_2component_2resizable_split_8cpp-example.html">範例</a></p>
<p><img src="https://user-images.githubusercontent.com/4759106/147248372-c55512fe-9b96-4b08-a1df-d05cf2cae431.gif" alt="ezgif com-gif-maker" class="inline"/> <br />
</p>
<p>
<script id="asciicast-tprMH2EdkUoMb7D2YxgMGgpzx" src="https://asciinema.org/a/tprMH2EdkUoMb7D2YxgMGgpzx.js" async></script>
</p>
<h1><a class="anchor" id="component-force-redraw"></a>
Force a frame redraw.</h1>
<p>通常,<code><a class="el" href="group__component.html#a6f7095d721dd1dbd490d97c028eb676f">ftxui::ScreenInteractive::Loop()</a></code> 負責在處理完新的事件組(例如鍵盤、滑鼠、視窗大小調整等)時繪製新畫面。但是,您可能希望響應 FTXUI 未知的任意事件。為此,您必須通過執行緒使用 <code><a class="el" href="group__component.html#a29e75bdaa1d5465518787ec014b2c3bf" title="Add an event to the main loop. It will be executed later, after every other scheduled events.">ftxui::ScreenInteractive::PostEvent</a></code>**這是執行緒安全的**)發布事件。您必須發布事件 <code><a class="el" href="group__component.html#a699872f2a6d8607d714be174e9435290">ftxui::Event::Custom</a></code></p>
<p>範例: </p><div class="fragment"><div class="line">screen-&gt;PostEvent(Event::Custom);</div>
</div><!-- fragment --><p>如果您不需要處理新事件,可以使用: </p><div class="fragment"><div class="line">screen-&gt;RequestAnimationFrame();</div>
</div><!-- fragment --><p> 代替。</p>
<p>``` </p>
</div></div><!-- contents -->
</div><!-- PageDoc -->
</div><!-- doc-content -->
<!-- HTML footer for doxygen 1.9.8-->
<!-- start footer part -->
<div id="nav-path" class="navpath"><!-- id is needed for treeview function! -->
</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>