zhangyiss/FTXUI
1
0
Fork 0
mirror of https://github.com/ArthurSonzogni/FTXUI.git synced 2025-12-16 01:48:56 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
Files
02764cd443be15005858fb10df020f4f1f770d66
FTXUI/zh-TW/module-component.html

738 lines
80 KiB
HTML
Raw Normal View History

deploy: 9f4b2bcf96dfffad5bfffb2b8b82539660626749
2025-12-13 19:38:34 +00:00
<!-- 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>
Reference in New Issue Copy Permalink