mirror of
https://github.com/ArthurSonzogni/FTXUI.git
synced 2025-05-06 09:13:48 +08:00
142 lines
4.2 KiB
Markdown
142 lines
4.2 KiB
Markdown
All the dom element are declared in one header:
|
|
"""c++
|
|
#include <ftxui/dom/elements.hpp>
|
|
"""
|
|
|
|
It declares the following set of elements:
|
|
|
|
"""C++
|
|
// --- Layout ----
|
|
Element vbox(Children);
|
|
Element hbox(Children);
|
|
Element flex();
|
|
|
|
// --- Widget --
|
|
Element text(std::wstring text);
|
|
Element separator();
|
|
Element gauge(float ratio);
|
|
Element frame(Child);
|
|
Element frame(Child title, Child content);
|
|
|
|
// -- Decorator (Style) ---
|
|
Element bold(Element);
|
|
Element dim(Element);
|
|
Element inverted(Element);
|
|
Element underlined(Element);
|
|
|
|
// --- Decorator ---
|
|
Element hcenter(Element);
|
|
Element vcenter(Element);
|
|
Element center(Element);
|
|
Element flex(Element);
|
|
"""
|
|
|
|
# Layout elements.
|
|
|
|
vbox (Vertical-box) and hbox (Horizontal-box) are containers. They are used to
|
|
compose all the elements together. They will display their children one by one in one direction.
|
|
Each elements will occupy the space it required plus a fraction of the remaining
|
|
space dispatched to all the flexible elements.
|
|
|
|
flex() is used to make an element flexible.
|
|
|
|
## Examples
|
|
"""C++
|
|
hbox(
|
|
frame(text(L"left")),
|
|
flex(frame(text(L"middle"))),
|
|
frame(text(L"right"))
|
|
);
|
|
"""
|
|
"""bash
|
|
┌────┐┌─────────────────────────────────────────────────────────────────┐┌─────┐
|
|
│left││middle ││right│
|
|
└────┘└─────────────────────────────────────────────────────────────────┘└─────┘
|
|
"""
|
|
|
|
"""C++
|
|
hbox(
|
|
frame(text(L"left")),
|
|
flex(frame(text(L"middle"))),
|
|
flex(frame(text(L"right")))
|
|
);
|
|
"""
|
|
"""bash
|
|
┌────┐┌───────────────────────────────────┐┌───────────────────────────────────┐
|
|
│left││middle ││right │
|
|
└────┘└───────────────────────────────────┘└───────────────────────────────────┘
|
|
"""
|
|
|
|
# Widget elements.
|
|
|
|
## text
|
|
|
|
The more simple widget. It display a text.
|
|
"""C++
|
|
text(L"I am a piece of text");
|
|
"""
|
|
"""bash
|
|
I am a piece of text.
|
|
"""
|
|
|
|
## frame
|
|
Add a border arround an element
|
|
"""c+
|
|
frame(text(L"The element"))
|
|
"""
|
|
|
|
"""bash
|
|
┌───────────┐
|
|
│The element│
|
|
└───────────┘
|
|
"""
|
|
|
|
## separator
|
|
|
|
Display a vertical or horizontal line to visually split the content of a
|
|
container in two.
|
|
|
|
"""c++
|
|
frame(hbox(
|
|
vbox(
|
|
text(L"left top"),
|
|
text(L"left bottom")
|
|
),
|
|
separator(),
|
|
vbox(
|
|
text(L"right top"),
|
|
text(L"right bottom")
|
|
)
|
|
));
|
|
"""
|
|
|
|
"""bash
|
|
┌───────────┬────────────┐
|
|
│left top │right top │
|
|
│left bottom│right bottom│
|
|
└───────────┴────────────┘
|
|
"""
|
|
|
|
## gauge
|
|
|
|
|
|
A gauge. It can be used to represent a progress bar.
|
|
"""c+
|
|
frame(gauge(0.5))
|
|
"""
|
|
|
|
"""bash
|
|
┌────────────────────────────────────────────────────────────────────────────┐
|
|
│██████████████████████████████████████ │
|
|
└────────────────────────────────────────────────────────────────────────────┘
|
|
"""
|
|
|
|
# Decorator (style)
|
|
A terminal console can usually display colored text and colored background.
|
|
The text can also have different effects: bold, dim, underlined, inverted.
|
|
|
|
Element bold(Element);
|
|
Element dim(Element);
|
|
Element inverted(Element);
|
|
Element underlined(Element);
|