FTXUI 7.0.3
C++ functional terminal UI.
Loading...
Searching...
No Matches
elements.hpp
Go to the documentation of this file.
1// Copyright 2020 Arthur Sonzogni. All rights reserved.
2// Use of this source code is governed by the MIT license that can be found in
3// the LICENSE file.
4#ifndef FTXUI_DOM_ELEMENTS_HPP
5#define FTXUI_DOM_ELEMENTS_HPP
6
7#include <cstdint>
8#include <functional>
9#include <memory>
10
11#include <string_view>
12#include "ftxui/dom/canvas.hpp"
16#include "ftxui/dom/node.hpp"
17#include "ftxui/screen/box.hpp"
20#include "ftxui/util/export.hpp"
21#include "ftxui/util/ref.hpp"
22
23namespace ftxui {
24class Node;
25using Element = std::shared_ptr<Node>;
26using Elements = std::vector<Element>;
27using Decorator = std::function<Element(Element)>;
28using GraphFunction = std::function<std::vector<int>(int, int)>;
29
30/// @brief BorderStyle 是一個列舉,表示可以應用於終端機 UI 元素的不同邊框樣式。
31///
32/// BorderStyle 是一個列舉,表示可以應用於終端機 UI 元素的不同邊框樣式。
33/// 它用於定義元素周圍邊框的視覺外觀,例如視窗、框架或分隔符。
34/// @ingroup dom
43
44// 將元素以管線方式傳入裝飾器。
45// 例如,以下幾行是等價的:
46// -> text("ftxui") | bold | underlined
47// -> underlined(bold(text("FTXUI")))
52
53// --- 元件 ---
54FTXUI_EXPORT(DOM) Element text(std::string_view text);
55FTXUI_EXPORT(DOM) Element vtext(std::string_view text);
64FTXUI_EXPORT(DOM) Element separatorCharacter(std::string_view);
65FTXUI_EXPORT(DOM)
67 float right,
68 Color unselected_color,
69 Color selected_color);
70FTXUI_EXPORT(DOM)
72 float down,
73 Color unselected_color,
74 Color selected_color);
75FTXUI_EXPORT(DOM) Element gauge(float progress);
76FTXUI_EXPORT(DOM) Element gaugeLeft(float progress);
77FTXUI_EXPORT(DOM) Element gaugeRight(float progress);
78FTXUI_EXPORT(DOM) Element gaugeUp(float progress);
79FTXUI_EXPORT(DOM) Element gaugeDown(float progress);
81
82// charset[0] 是「空」字元,charset.back() 是「滿」字元;
83// 中間的項目則用於為邊界儲存格加上陰影。
84FTXUI_EXPORT(DOM)
85Element gaugeCharset(float progress,
86 std::vector<std::string> charset,
98FTXUI_EXPORT(DOM) Decorator borderWith(const Cell&);
99FTXUI_EXPORT(DOM)
100Element window(Element title, Element content, BorderStyle border = ROUNDED);
101FTXUI_EXPORT(DOM) Element spinner(int charset_index, size_t image_index);
102FTXUI_EXPORT(DOM) Element paragraph(std::string_view text);
103FTXUI_EXPORT(DOM) Element paragraphAlignLeft(std::string_view text);
104FTXUI_EXPORT(DOM) Element paragraphAlignRight(std::string_view text);
105FTXUI_EXPORT(DOM) Element paragraphAlignCenter(std::string_view text);
106FTXUI_EXPORT(DOM) Element paragraphAlignJustify(std::string_view text);
110FTXUI_EXPORT(DOM)
111Element canvas(int width, int height, std::function<void(Canvas&)>);
112FTXUI_EXPORT(DOM) Element canvas(std::function<void(Canvas&)>);
113
114// -- 裝飾器 ---
123FTXUI_EXPORT(DOM) Decorator color(Color);
124FTXUI_EXPORT(DOM) Decorator bgcolor(Color);
125FTXUI_EXPORT(DOM) Decorator color(const LinearGradient&);
126FTXUI_EXPORT(DOM) Decorator bgcolor(const LinearGradient&);
127FTXUI_EXPORT(DOM) Element color(Color, Element);
129FTXUI_EXPORT(DOM) Element color(const LinearGradient&, Element);
130FTXUI_EXPORT(DOM) Element bgcolor(const LinearGradient&, Element);
132FTXUI_EXPORT(DOM) Decorator focusPositionRelative(float x, float y);
134FTXUI_EXPORT(DOM) Decorator hyperlink(std::string_view link);
135FTXUI_EXPORT(DOM) Element hyperlink(std::string_view link, Element child);
137FTXUI_EXPORT(DOM) Decorator selectionColor(Color foreground);
138FTXUI_EXPORT(DOM) Decorator selectionBackgroundColor(Color foreground);
139FTXUI_EXPORT(DOM) Decorator selectionForegroundColor(Color foreground);
140FTXUI_EXPORT(DOM) Decorator selectionStyle(std::function<void(Cell&)> style);
141
142// --- 布局是
143// 水平、垂直或堆疊排列的元素集合。
147FTXUI_EXPORT(DOM)
148Element flexbox(Elements, FlexboxConfig config = FlexboxConfig());
149FTXUI_EXPORT(DOM) Element gridbox(std::vector<Elements> lines);
150
151FTXUI_EXPORT(DOM)
152Element hflow(Elements); // 輔助函式:預設使用列方向的 flexbox。
153FTXUI_EXPORT(DOM)
154Element vflow(Elements); // 輔助函式:預設使用欄方向的 flexbox。
155
156// -- 彈性 ---
157// 定義當容器內未使用全部空間時,如何分配容器內
158// 剩餘空間。
159FTXUI_EXPORT(DOM) Element flex(Element); // 若可能/需要,展開/最小化。
160FTXUI_EXPORT(DOM) Element flex_grow(Element); // 若可能,展開元素。
161FTXUI_EXPORT(DOM) Element flex_shrink(Element); // 若需要,最小化元素。
165
166FTXUI_EXPORT(DOM)
167Element xflex(Element); // 若可能/需要,在 X 軸上展開/最小化。
168FTXUI_EXPORT(DOM)
169Element xflex_grow(Element); // 若可能,在 X 軸上展開元素。
170FTXUI_EXPORT(DOM)
171Element xflex_shrink(Element); // 若需要,在 X 軸上最小化元素。
172FTXUI_EXPORT(DOM) Decorator xflex_factor(int grow, int shrink);
175
176FTXUI_EXPORT(DOM)
177Element yflex(Element); // 若可能/需要,在 Y 軸上展開/最小化。
178FTXUI_EXPORT(DOM)
179Element yflex_grow(Element); // 若可能,在 Y 軸上展開元素。
180FTXUI_EXPORT(DOM)
181Element yflex_shrink(Element); // 若需要,在 Y 軸上最小化元素。
182FTXUI_EXPORT(DOM) Decorator yflex_factor(int grow, int shrink);
185
186FTXUI_EXPORT(DOM) Element notflex(Element); // 重設彈性屬性。
187FTXUI_EXPORT(DOM) Element filler(); // 一個空白的可展開元素。
188
189// -- 大小覆寫;
190enum WidthOrHeight : uint8_t { WIDTH, HEIGHT };
193
194// --- 畫格 ---
195// 畫格是一個可捲動的區域。內部區域可能比外部區域大得多。
196// 內部區域會被捲動,以使目前聚焦的元素
197// 保持可見。
202FTXUI_EXPORT(DOM) Element select(Element e); // 已棄用 - focus 的別名。
203
204// --- 光標 ---
205// 這些與 `focus` 相似,但也會改變光標的形狀。
212
213// --- 雜項 ---
216FTXUI_EXPORT(DOM) Decorator reflect(Box& box);
217// 在繪製 |element| 之前先清除下方的像素。這在
218// 與 dbox 搭配使用時很有用。
220
221// --- 工具 --------------------------------------------------------------------
227
228namespace Dimension {
229FTXUI_EXPORT(DOM) Dimensions Fit(Element&, bool extend_beyond_screen = false);
230} // namespace Dimension
231
232} // namespace ftxui
233
234// 使容器能夠接受任意數量的子元素作為輸入。
235#include "ftxui/dom/take_any_args.hpp"
236
237// 包含使用 wstring 的舊定義。
239#endif // FTXUI_DOM_ELEMENTS_HPP
一個適配器。擁有或引用一個不可變的物件。
Definition ref.hpp:20
#define FTXUI_EXPORT(component)
Definition export.hpp:23
Element window(Element title, Element content, BorderStyle border=ROUNDED)
繪製帶有標題和邊框的視窗。
Element borderDouble(Element child)
在元素周圍繪製雙線邊框。
Element text(std::string_view text)
顯示一段 UTF8 編碼的 Unicode 文字。
Element focusCursorBarBlinking(Element child)
與 focus 相同,但將游標形狀設置為閃爍條狀。
Definition frame.cpp:187
Element xflex(Element)
在 X 軸上盡可能擴展/在需要時最小化。
Definition flex.cpp:100
Element gaugeDirection(float progress, Direction direction)
繪製一個指定方向的高解析度進度條。
Decorator focusPositionRelative(float x, float y)
在 frame 內部使用,這會強制視圖滾動到給定位置。該位置以請求大小的比例表示。
Element separatorStyled(BorderStyle style)
在兩個元素之間繪製垂直或水平分隔線。
Element xflex_grow(Element)
在 X 軸上盡可能擴展。
Definition flex.cpp:118
Element underlinedDouble(Element child)
對文字應用雙底線。
Element clear_under(Element element)
在繪製 |child| 之前,先清除底下的儲存格。這在 搭配 dbox 使用時很有用。
Element borderDashed(Element child)
在元素周圍繪製虛線邊框。
Element separatorEmpty()
使用 EMPTY 樣式在兩個元素之間繪製垂直或水平分隔線。
Element vscroll_indicator(Element child)
在右側顯示一個垂直捲軸。 顏色與內容一致。
Element nothing(Element element)
一個什麼都不做的裝飾器。
Definition dom/util.cpp:28
Element paragraphAlignLeft(std::string_view the_text)
回傳一個在多行上繪製段落並靠左對齊的元素。
Decorator size(WidthOrHeight direction, Constraint constraint, int value)
對元素的大小套用限制。
Element flex(Element child)
讓子元素依比例擴展以填滿容器中剩餘的空間。
Definition flex.cpp:94
Element hyperlink(std::string_view link, Element child)
使渲染區域可點擊並使用網路瀏覽器開啟。 當用戶點擊時,連結將被開啟。 此功能僅在有限的終端模擬器中受支援。 List: https://github.com/Alhadis/OSC8-Adoption/
Definition hyperlink.cpp:52
Element gaugeRight(float progress)
繪製一個從左到右進展的高解析度進度條。
Element focusCursorUnderlineBlinking(Element child)
與 focus 相同,但將游標形狀設置為閃爍底線。
Definition frame.cpp:215
Element bold(Element child)
使用粗體字型,用於需要更多強調的元素。
Definition bold.cpp:33
Element separatorLight()
使用 LIGHT 樣式在兩個元素之間繪製垂直或水平分隔線。
Element spinner(int charset_index, size_t image_index)
用於表示時間和/或事件的效果。這將顯示 一個 ASCII 藝術「影片」。
Element borderRounded(Element child)
在元素周圍繪製圓角邊框。
Element emptyElement()
Definition dom/util.cpp:140
Element yflex(Element)
在 Y 軸上盡可能擴展/在需要時最小化。
Definition flex.cpp:106
Element flex_shrink(Element child)
在需要時最小化。
Definition flex.cpp:130
Element focusCursorBar(Element child)
與 focus 相同,但將游標形狀設置為靜止條狀。
Definition frame.cpp:173
Element focusCursorBlock(Element child)
與 focus 相同,但將游標形狀設置為靜止條狀。
Definition frame.cpp:145
Element vtext(std::string_view text)
垂直顯示一段 Unicode 文字。
BorderStyle
BorderStyle 是一個列舉,表示可以應用於終端機 UI 元素的不同邊框樣式。
Definition elements.hpp:35
Element underlined(Element child)
為給定元素加上底線。
Element center(Element child)
水平與垂直置中一個元素。
Element paragraphAlignJustify(std::string_view the_text)
回傳一個在多行上繪製段落並使用左右對齊的元素。
Direction
Direction 是一個列舉,表示四個主要方向。
Definition direction.hpp:14
Element focusCursorUnderline(Element child)
與 focus 相同,但將游標形狀設置為靜止底線。
Definition frame.cpp:201
Element borderHeavy(Element child)
在元素周圍繪製粗邊框。
Element inverted(Element child)
添加一個濾鏡,它將反轉前景和背景 顏色。
Definition inverted.cpp:34
Element gaugeUp(float progress)
繪製一個從下到上進展的高解析度進度條。
Element gaugeCharset(float progress, std::vector< std::string > charset, Direction direction=Direction::Right)
使用自訂字元集繪製高解析度進度條。
Element align_right(Element child)
將元素靠右對齊。
Decorator focusPosition(int x, int y)
在 frame 內部使用,這會強制視圖滾動到給定位置。該位置以單元格數表示。
Element yflex_grow(Element)
在 Y 軸上盡可能擴展。
Definition flex.cpp:124
Element hscroll_indicator(Element child)
在底部顯示一個水平捲軸。 顏色與內容一致。
Element flex_grow(Element child)
盡可能擴展。
Definition flex.cpp:112
Element separatorDashed()
使用 DASHED 樣式在兩個元素之間繪製垂直或水平分隔線。
Element notflex(Element child)
使元素不可伸縮。
Definition flex.cpp:148
Element strikethrough(Element child)
對文字應用刪除線。
Element italic(Element child)
對文字應用雙底線。
Definition italic.cpp:17
Element dbox(Elements children_)
將多個元素堆疊在一起。
Element xflex_shrink(Element)
在 X 軸上在需要時最小化。
Definition flex.cpp:136
Decorator borderWith(const Cell &pixel)
與 border 相同,但周圍使用固定的 Cell。
Element gaugeLeft(float progress)
繪製一個從右到左進展的高解析度進度條。
Element paragraphAlignCenter(std::string_view the_text)
回傳一個在多行上繪製段落並置中對齊的元素。
Element borderLight(Element child)
在元素周圍繪製細邊框。
Element focus(Element child)
將 child 設置為其同級元素中被聚焦的元素。
Definition frame.cpp:101
Element paragraph(std::string_view the_text)
回傳一個在多行上繪製段落的元素。
Element bgcolor(Color color, Element child)
設定元素的背景顏色。
Definition dom/color.cpp:96
Decorator borderStyled(BorderStyle style)
與 border 相同,但具有不同的樣式。
Element paragraphAlignRight(std::string_view the_text)
回傳一個在多行上繪製段落並靠右對齊的元素。
Element separator()
在兩個元素之間繪製垂直或水平分隔線。
Element filler()
一個會依照容器中剩餘空間 按比例擴展的元素。
Definition flex.cpp:70
Element dim(Element child)
使用淺色字體,適用於不那麼強調的元素。
Definition dim.cpp:33
Element automerge(Element child)
啟用字符自動與附近其他字符合併。
Definition automerge.cpp:17
Element separatorCharacter(std::string_view value)
在兩個元素之間繪製垂直或水平分隔線。
Element blink(Element child)
繪製的文字在可見和隱藏之間交替。
Definition blink.cpp:33
Element vcenter(Element child)
垂直置中一個元素。
Element separatorDouble()
使用 DOUBLE 樣式在兩個元素之間繪製垂直或水平分隔線。
Element focusCursorBlockBlinking(Element child)
與 focus 相同,但將游標形狀設置為閃爍方塊。
Definition frame.cpp:159
Element color(Color color, Element child)
設定元素的前景顏色。
Definition dom/color.cpp:81
Element gauge(float progress)
繪製一個高解析度進度條。
Element border(Element child)
在元素周圍繪製邊框。
Element separatorHeavy()
使用 HEAVY 樣式在兩個元素之間繪製垂直或水平分隔線。
Element borderEmpty(Element child)
在元素周圍繪製空邊框。
Element yflex_shrink(Element)
在 Y 軸上在需要時最小化。
Definition flex.cpp:142
Element hcenter(Element child)
水平置中一個元素。
Element vbox(Elements children)
一個垂直一個接一個顯示元素的容器。
Definition vbox.cpp:96
Element gaugeDown(float progress)
繪製一個從上到下進展的高解析度進度條。
@ EMPTY
Definition elements.hpp:41
@ DOUBLE
Definition elements.hpp:39
@ HEAVY
Definition elements.hpp:38
@ ROUNDED
Definition elements.hpp:40
@ DASHED
Definition elements.hpp:37
@ LIGHT
Definition elements.hpp:36
FTXUI 的 ftxui::Dimension:: 命名空間
bool extend_beyond_screen
Definition elements.hpp:229
FTXUI ftxui:: 命名空間
Definition animation.hpp:11
@ LESS_THAN
Definition elements.hpp:191
@ GREATER_THAN
Definition elements.hpp:191
Element flexbox(Elements, FlexboxConfig config=FlexboxConfig())
一個容器,用於在行/列中顯示元素,並在滿時能夠換行到下一列/行。
Definition flexbox.cpp:251
Element separatorVSelector(float up, float down, Color unselected_color, Color selected_color)
繪製一個垂直條,其中上方/下方之間的區域以不同顏色顯示。
Decorator yflex_shrink_factor(int shrink)
Definition flex.cpp:200
size_t image_index
Definition elements.hpp:101
std::shared_ptr< Node > Element
Definition elements.hpp:25
Element xframe(Element child)
與 frame 相同,但僅限於 x 軸。
Definition frame.cpp:124
Decorator xflex_grow_factor(int grow)
Definition flex.cpp:176
FTXUI_EXPORT(DOM) Element gridbox(std Element hflow(Elements)
一個容器,用於從左到右在行中顯示元素。當填滿時,它會在下方的新行開始。
Definition flexbox.cpp:268
Decorator yflex_grow_factor(int grow)
Definition flex.cpp:194
FTXUI_EXPORT(DOM) Element separatorCharacter(std Element separatorHSelector(float left, float right, Color unselected_color, Color selected_color)
繪製一個水平條,其中左右兩側之間的區域以不同顏色顯示。
Direction direction
Definition elements.hpp:80
Element hbox(Elements children)
一個逐一水平顯示元素的容器。
Definition hbox.cpp:94
std::vector< Element > Elements
Definition elements.hpp:26
Decorator selectionForegroundColor(Color foreground)
設定元素被選取時的前景顏色。 請注意,此樣式會應用在現有樣式之上。
Decorator yflex_factor(int grow, int shrink)
Definition flex.cpp:188
WidthOrHeight
Definition elements.hpp:190
Component operator|(Component component, ComponentDecorator decorator)
Decorator selectionBackgroundColor(Color foreground)
設定元素被選取時的背景顏色。 請注意,此樣式會應用在現有樣式之上。
std::function< Element(Element)> Decorator
Definition elements.hpp:27
Decorator flex_shrink_factor(int shrink)
Definition flex.cpp:164
Element yframe(Element child)
與 frame 相同,但僅限於 y 軸。
Definition frame.cpp:132
Decorator flex_grow_factor(int grow)
Definition flex.cpp:158
Decorator selectionColor(Color foreground)
設定元素被選取時的顏色。
int shrink
Definition elements.hpp:162
int y
Definition elements.hpp:131
Element selectionStyleReset(Element child)
重設元素的選取樣式。
const Element & element
Definition node.hpp:92
Decorator reflect(Box &box)
Definition reflect.cpp:43
std::function< std::vector< int >(int, int)> GraphFunction
Definition elements.hpp:28
Decorator xflex_shrink_factor(int shrink)
Definition flex.cpp:182
Decorator xflex_factor(int grow, int shrink)
Definition flex.cpp:170
Decorator flex_factor(int grow, int shrink)
Definition flex.cpp:152
Element gridbox(std::vector< Elements > lines)
A container displaying a grid of elements.
int value
Definition elements.hpp:192
Element canvas(int width, int height, std::function< void(Canvas &)>)
從指定大小的畫布中產生一個繪製畫布的元素。
Element frame(Element child)
允許元素顯示在「虛擬」區域內。其大小可以大於其容器。在這種情況下,只會顯示較小的一部分。視圖可滾動以使聚焦元素可見。
Definition frame.cpp:116
Component & operator|=(Component &component, ComponentDecorator decorator)
Element select(Element e)
將 child 設為其兄弟元素中被聚焦的那一個。
Definition frame.cpp:108
Decorator selectionStyle(std::function< void(Cell &)> style)
設定元素被選取時的樣式。
Element vflow(Elements)
一個容器,用於從上到下在行中顯示元素。當填滿時,它會在右側的新列開始。 filled, it starts on a new row. is full, it starts a new row.
Definition flexbox.cpp:287
Element graph(GraphFunction graph_function)
使用 GraphFunction 繪製圖形。
std::uint8_t left
Definition screen.cpp:147
std::uint8_t down
Definition screen.cpp:150
std::uint8_t right
Definition screen.cpp:149