FTXUI 6.1.9 C++ functional terminal UI.

Loading...
Searching...
No Matches
ftxui / dom

This module defines a hierarchical set of `ftxui::Element`. An element manages the layout and can be responsive to the terminal dimension changes. Note the following example where this module is used to create a simple layout with a number of operators:

The Example section provides a collection of examples.

Example:

namespace ftxui {
...
// Define the document
Element document = vbox({
text("The window") | bold | color(Color::Blue),
gauge(0.5)
text("The footer")
});
// Add a border, by calling the `ftxui::border` decorator function.
document = border(document);
// Add another border, using the pipe operator.
document = document | border.
// Add another border, using the |= operator.
document |= border
...
}
ftxui::text
Element text(std::wstring text)
Display a piece of unicode text.
Definition text.cpp:160
ftxui::gauge
Element gauge(float progress)
Draw a high definition progress bar.
Definition src/ftxui/dom/gauge.cpp:293
ftxui::color
Decorator color(Color)
Decorate using a foreground color.
Definition dom/color.cpp:110
ftxui::vbox
Element vbox(Elements)
A container displaying elements vertically one by one.
Definition vbox.cpp:96
ftxui::Color::Blue
@ Blue
Definition color.hpp:58
ftxui
The FTXUI ftxui:: namespace.
Definition animation.hpp:10

List of elements

The list of all elements are included and can be accessed by including the corresponding header file:

#include <ftxui/dom/elements.hpp>
elements.hpp
// Copyright 2020 Arthur Sonzogni. All rights reserved.
// Use of this source code is governed by the MIT license that can be found in
// the LICENSE file.
#ifndef FTXUI_DOM_ELEMENTS_HPP
#define FTXUI_DOM_ELEMENTS_HPP
#include <functional>
#include <memory>
#include "ftxui/dom/canvas.hpp"
#include "ftxui/dom/direction.hpp"
#include "ftxui/dom/flexbox_config.hpp"
#include "ftxui/dom/linear_gradient.hpp"
#include "ftxui/dom/node.hpp"
#include "ftxui/screen/box.hpp"
#include "ftxui/screen/color.hpp"
#include "ftxui/screen/terminal.hpp"
#include "ftxui/util/ref.hpp"
namespace ftxui {
class Node;
using Element = std::shared_ptr<Node>;
using Elements = std::vector<Element>;
using Decorator = std::function<Element(Element)>;
using GraphFunction = std::function<std::vector<int>(int, int)>;
/// @brief BorderStyle is an enumeration that represents the different styles
/// of borders that can be applied to elements in the terminal UI.
///
/// BorderStyle is an enumeration that represents the different styles of
/// borders that can be applied to elements in the terminal UI.
/// It is used to define the visual appearance of borders around elements,
/// such as windows, frames, or separators.
/// @ingroup dom
enum BorderStyle {
LIGHT,
DASHED,
HEAVY,
DOUBLE,
ROUNDED,
EMPTY,
};
// Pipe elements into decorator togethers.
// For instance the next lines are equivalents:
// -> text("ftxui") | bold | underlined
// -> underlined(bold(text("FTXUI")))
Element operator|(Element, Decorator);
Element& operator|=(Element&, Decorator);
Elements operator|(Elements, Decorator);
Decorator operator|(Decorator, Decorator);
// --- Widget ---
Element text(std::string text);
Element vtext(std::string text);
Element separator();
Element separatorLight();
Element separatorDashed();
Element separatorHeavy();
Element separatorDouble();
Element separatorEmpty();
Element separatorStyled(BorderStyle);
Element separator(Pixel);
Element separatorCharacter(std::string);
Element separatorHSelector(float left,
float right,
Color unselected_color,
Color selected_color);
Element separatorVSelector(float up,
float down,
Color unselected_color,
Color selected_color);
Element gauge(float progress);
Element gaugeLeft(float progress);
Element gaugeRight(float progress);
Element gaugeUp(float progress);
Element gaugeDown(float progress);
Element gaugeDirection(float progress, Direction direction);
Element border(Element);
Element borderLight(Element);
Element borderDashed(Element);
Element borderHeavy(Element);
Element borderDouble(Element);
Element borderRounded(Element);
Element borderEmpty(Element);
Decorator borderStyled(BorderStyle);
Decorator borderStyled(BorderStyle, Color);
Decorator borderStyled(Color);
Decorator borderWith(const Pixel&);
Element window(Element title, Element content, BorderStyle border = ROUNDED);
Element spinner(int charset_index, size_t image_index);
Element paragraph(const std::string& text);
Element paragraphAlignLeft(const std::string& text);
Element paragraphAlignRight(const std::string& text);
Element paragraphAlignCenter(const std::string& text);
Element paragraphAlignJustify(const std::string& text);
Element graph(GraphFunction);
Element emptyElement();
Element canvas(ConstRef<Canvas>);
Element canvas(int width, int height, std::function<void(Canvas&)>);
Element canvas(std::function<void(Canvas&)>);
// -- Decorator ---
Element bold(Element);
Element dim(Element);
Element italic(Element);
Element inverted(Element);
Element underlined(Element);
Element underlinedDouble(Element);
Element blink(Element);
Element strikethrough(Element);
Decorator color(Color);
Decorator bgcolor(Color);
Decorator color(const LinearGradient&);
Decorator bgcolor(const LinearGradient&);
Element color(Color, Element);
Element bgcolor(Color, Element);
Element color(const LinearGradient&, Element);
Element bgcolor(const LinearGradient&, Element);
Decorator focusPosition(int x, int y);
Decorator focusPositionRelative(float x, float y);
Element automerge(Element child);
Decorator hyperlink(std::string link);
Element hyperlink(std::string link, Element child);
Element selectionStyleReset(Element);
Decorator selectionColor(Color foreground);
Decorator selectionBackgroundColor(Color foreground);
Decorator selectionForegroundColor(Color foreground);
Decorator selectionStyle(std::function<void(Pixel&)> style);
// --- Layout is
// Horizontal, Vertical or stacked set of elements.
Element hbox(Elements);
Element vbox(Elements);
Element dbox(Elements);
Element flexbox(Elements, FlexboxConfig config = FlexboxConfig());
Element gridbox(std::vector<Elements> lines);
Element hflow(Elements); // Helper: default flexbox with row direction.
Element vflow(Elements); // Helper: default flexbox with column direction.
// -- Flexibility ---
// Define how to share the remaining space when not all of it is used inside a
// container.
Element flex(Element); // Expand/Minimize if possible/needed.
Element flex_grow(Element); // Expand element if possible.
Element flex_shrink(Element); // Minimize element if needed.
Element xflex(Element); // Expand/Minimize if possible/needed on X axis.
Element xflex_grow(Element); // Expand element if possible on X axis.
Element xflex_shrink(Element); // Minimize element if needed on X axis.
Element yflex(Element); // Expand/Minimize if possible/needed on Y axis.
Element yflex_grow(Element); // Expand element if possible on Y axis.
Element yflex_shrink(Element); // Minimize element if needed on Y axis.
Element notflex(Element); // Reset the flex attribute.
Element filler(); // A blank expandable element.
// -- Size override;
enum WidthOrHeight { WIDTH, HEIGHT };
enum Constraint { LESS_THAN, EQUAL, GREATER_THAN };
Decorator size(WidthOrHeight, Constraint, int value);
// --- Frame ---
// A frame is a scrollable area. The internal area is potentially larger than
// the external one. The internal area is scrolled in order to make visible the
// focused element.
Element frame(Element);
Element xframe(Element);
Element yframe(Element);
Element focus(Element);
Element select(Element e); // Deprecated - Alias for focus.
// --- Cursor ---
// Those are similar to `focus`, but also change the shape of the cursor.
Element focusCursorBlock(Element);
Element focusCursorBlockBlinking(Element);
Element focusCursorBar(Element);
Element focusCursorBarBlinking(Element);
Element focusCursorUnderline(Element);
Element focusCursorUnderlineBlinking(Element);
// --- Misc ---
Element vscroll_indicator(Element);
Element hscroll_indicator(Element);
Decorator reflect(Box& box);
// Before drawing the |element| clear the pixel below. This is useful in
// combinaison with dbox.
Element clear_under(Element element);
// --- Util --------------------------------------------------------------------
Element hcenter(Element);
Element vcenter(Element);
Element center(Element);
Element align_right(Element);
Element nothing(Element element);
namespace Dimension {
Dimensions Fit(Element&, bool extend_beyond_screen = false);
} // namespace Dimension
} // namespace ftxui
// Make container able to take any number of children as input.
#include "ftxui/dom/take_any_args.hpp"
// Include old definitions using wstring.
#include "ftxui/dom/deprecated.hpp"
#endif // FTXUI_DOM_ELEMENTS_HPP
box.hpp
canvas.hpp
color.hpp
direction.hpp
deprecated.hpp
flexbox_config.hpp
ftxui::bgcolor
Decorator bgcolor(Color)
Decorate using a background color.
Definition dom/color.cpp:124
ftxui::window
Element window(Element title, Element content, BorderStyle border=ROUNDED)
Draw window with a title and a border around the element.
Definition src/ftxui/dom/border.cpp:507
ftxui::borderDouble
Element borderDouble(Element)
Draw a double border around the element.
Definition src/ftxui/dom/border.cpp:405
ftxui::focusCursorBarBlinking
Element focusCursorBarBlinking(Element)
Same as focus, but set the cursor shape to be a blinking bar.
Definition frame.cpp:189
ftxui::xflex
Element xflex(Element)
Expand/Minimize if possible/needed on the X axis.
Definition flex.cpp:129
ftxui::gaugeDirection
Element gaugeDirection(float progress, Direction direction)
Draw a high definition progress bar progressing in specified direction.
Definition src/ftxui/dom/gauge.cpp:169
ftxui::focusPositionRelative
Decorator focusPositionRelative(float x, float y)
Used inside a frame, this force the view to be scrolled toward a a given position....
Definition src/ftxui/dom/focus.cpp:31
ftxui::separatorStyled
Element separatorStyled(BorderStyle)
Draw a vertical or horizontal separation in between two other elements.
Definition src/ftxui/dom/separator.cpp:172
ftxui::xflex_grow
Element xflex_grow(Element)
Expand if possible on the X axis.
Definition flex.cpp:147
ftxui::underlinedDouble
Element underlinedDouble(Element)
Apply a underlinedDouble to text.
Definition underlined_double.cpp:17
ftxui::clear_under
Element clear_under(Element element)
Before drawing |child|, clear the pixels below. This is useful in combination with dbox.
Definition clear_under.cpp:38
ftxui::borderDashed
Element borderDashed(Element)
Draw a dashed border around the element.
Definition src/ftxui/dom/border.cpp:300
ftxui::separatorEmpty
Element separatorEmpty()
Draw a vertical or horizontal separation in between two other elements, using the EMPTY style.
Definition src/ftxui/dom/separator.cpp:357
ftxui::vscroll_indicator
Element vscroll_indicator(Element)
Display a vertical scrollbar on the right. Colors follow the content.
Definition scroll_indicator.cpp:21
ftxui::nothing
Element nothing(Element element)
A decoration doing absolutely nothing.
Definition dom/util.cpp:28
ftxui::size
Decorator size(WidthOrHeight, Constraint, int value)
Apply a constraint on the size of an element.
Definition src/ftxui/dom/size.cpp:89
ftxui::Direction
Direction
Direction is an enumeration that represents the four cardinal directions.
Definition direction.hpp:13
ftxui::flex
Element flex(Element)
Make a child element to expand proportionally to the space left in a container.
Definition flex.cpp:123
ftxui::paragraphAlignRight
Element paragraphAlignRight(const std::string &text)
Return an element drawing the paragraph on multiple lines, aligned on the right.
Definition src/ftxui/dom/paragraph.cpp:60
ftxui::gaugeRight
Element gaugeRight(float progress)
Draw a high definition progress bar progressing from left to right.
Definition src/ftxui/dom/gauge.cpp:191
ftxui::focusCursorUnderlineBlinking
Element focusCursorUnderlineBlinking(Element)
Same as focus, but set the cursor shape to be a blinking underline.
Definition frame.cpp:217
ftxui::bold
Element bold(Element)
Use a bold font, for elements with more emphasis.
Definition bold.cpp:33
ftxui::separatorLight
Element separatorLight()
Draw a vertical or horizontal separation in between two other elements, using the LIGHT style.
Definition src/ftxui/dom/separator.cpp:209
ftxui::spinner
Element spinner(int charset_index, size_t image_index)
Useful to represent the effect of time and/or events. This displays an ASCII art "video".
Definition src/ftxui/dom/spinner.cpp:282
ftxui::borderRounded
Element borderRounded(Element)
Draw a rounded border around the element.
Definition src/ftxui/dom/border.cpp:440
ftxui::emptyElement
Element emptyElement()
Definition dom/util.cpp:140
ftxui::yflex
Element yflex(Element)
Expand/Minimize if possible/needed on the Y axis.
Definition flex.cpp:135
ftxui::flex_shrink
Element flex_shrink(Element)
Minimize if needed.
Definition flex.cpp:159
ftxui::focusCursorBar
Element focusCursorBar(Element)
Same as focus, but set the cursor shape to be a still block.
Definition frame.cpp:175
ftxui::focusCursorBlock
Element focusCursorBlock(Element)
Same as focus, but set the cursor shape to be a still block.
Definition frame.cpp:147
ftxui::underlined
Element underlined(Element)
Underline the given element.
Definition underlined.cpp:33
ftxui::center
Element center(Element)
Center an element horizontally and vertically.
Definition composite_decorator.cpp:31
ftxui::focusCursorUnderline
Element focusCursorUnderline(Element)
Same as focus, but set the cursor shape to be a still underline.
Definition frame.cpp:203
ftxui::borderHeavy
Element borderHeavy(Element)
Draw a heavy border around the element.
Definition src/ftxui/dom/border.cpp:370
ftxui::inverted
Element inverted(Element)
Add a filter that will invert the foreground and the background colors.
Definition inverted.cpp:34
ftxui::paragraphAlignCenter
Element paragraphAlignCenter(const std::string &text)
Return an element drawing the paragraph on multiple lines, aligned on the center.
Definition src/ftxui/dom/paragraph.cpp:72
ftxui::gaugeUp
Element gaugeUp(float progress)
Draw a high definition progress bar progressing from bottom to top.
Definition src/ftxui/dom/gauge.cpp:242
ftxui::align_right
Element align_right(Element)
Align an element on the right side.
Definition composite_decorator.cpp:39
ftxui::focusPosition
Decorator focusPosition(int x, int y)
Used inside a frame, this force the view to be scrolled toward a a given position....
Definition src/ftxui/dom/focus.cpp:69
ftxui::yflex_grow
Element yflex_grow(Element)
Expand if possible on the Y axis.
Definition flex.cpp:153
ftxui::hscroll_indicator
Element hscroll_indicator(Element)
Display a horizontal scrollbar at the bottom. Colors follow the content.
Definition scroll_indicator.cpp:76
ftxui::flex_grow
Element flex_grow(Element)
Expand if possible.
Definition flex.cpp:141
ftxui::separatorDashed
Element separatorDashed()
Draw a vertical or horizontal separation in between two other elements, using the DASHED style.
Definition src/ftxui/dom/separator.cpp:246
ftxui::notflex
Element notflex(Element)
Make the element not flexible.
Definition flex.cpp:177
ftxui::strikethrough
Element strikethrough(Element)
Apply a strikethrough to text.
Definition strikethrough.cpp:17
ftxui::italic
Element italic(Element)
Apply a underlinedDouble to text.
Definition italic.cpp:17
ftxui::dbox
Element dbox(Elements)
Stack several element on top of each other.
Definition src/ftxui/dom/dbox.cpp:55
ftxui::xflex_shrink
Element xflex_shrink(Element)
Minimize if needed on the X axis.
Definition flex.cpp:165
ftxui::gaugeLeft
Element gaugeLeft(float progress)
Draw a high definition progress bar progressing from right to left.
Definition src/ftxui/dom/gauge.cpp:213
ftxui::separatorCharacter
Element separatorCharacter(std::string)
Draw a vertical or horizontal separation in between two other elements.
Definition src/ftxui/dom/separator.cpp:395
ftxui::vtext
Element vtext(std::wstring text)
Display a piece unicode text vertically.
Definition text.cpp:220
ftxui::borderLight
Element borderLight(Element)
Draw a light border around the element.
Definition src/ftxui/dom/border.cpp:335
ftxui::focus
Element focus(Element)
Set the child to be the one focused among its siblings.
Definition frame.cpp:101
ftxui::paragraphAlignLeft
Element paragraphAlignLeft(const std::string &text)
Return an element drawing the paragraph on multiple lines, aligned on the left.
Definition src/ftxui/dom/paragraph.cpp:49
ftxui::borderWith
Decorator borderWith(const Pixel &)
Same as border but with a constant Pixel around the element.
Definition src/ftxui/dom/border.cpp:234
ftxui::borderStyled
Decorator borderStyled(BorderStyle)
Same as border but with different styles.
Definition src/ftxui/dom/border.cpp:243
ftxui::separator
Element separator()
Draw a vertical or horizontal separation in between two other elements.
Definition src/ftxui/dom/separator.cpp:134
ftxui::filler
Element filler()
An element that will take expand proportionally to the space left in a container.
Definition flex.cpp:98
ftxui::dim
Element dim(Element)
Use a light font, for elements with less emphasis.
Definition dim.cpp:33
ftxui::automerge
Element automerge(Element child)
Enable character to be automatically merged with others nearby.
Definition automerge.cpp:17
ftxui::hyperlink
Decorator hyperlink(std::string link)
Decorate using a hyperlink. The link will be opened when the user clicks on it. This is supported onl...
Definition hyperlink.cpp:70
ftxui::blink
Element blink(Element)
The text drawn alternates in between visible and hidden.
Definition blink.cpp:33
ftxui::vcenter
Element vcenter(Element)
Center an element vertically.
Definition composite_decorator.cpp:23
ftxui::separatorDouble
Element separatorDouble()
Draw a vertical or horizontal separation in between two other elements, using the DOUBLE style.
Definition src/ftxui/dom/separator.cpp:320
ftxui::focusCursorBlockBlinking
Element focusCursorBlockBlinking(Element)
Same as focus, but set the cursor shape to be a blinking block.
Definition frame.cpp:161
ftxui::paragraphAlignJustify
Element paragraphAlignJustify(const std::string &text)
Return an element drawing the paragraph on multiple lines, aligned using a justified alignment....
Definition src/ftxui/dom/paragraph.cpp:85
ftxui::border
Element border(Element)
Draw a border around the element.
Definition src/ftxui/dom/border.cpp:227
ftxui::separatorHeavy
Element separatorHeavy()
Draw a vertical or horizontal separation in between two other elements, using the HEAVY style.
Definition src/ftxui/dom/separator.cpp:283
ftxui::borderEmpty
Element borderEmpty(Element)
Draw an empty border around the element.
Definition src/ftxui/dom/border.cpp:475
ftxui::yflex_shrink
Element yflex_shrink(Element)
Minimize if needed on the Y axis.
Definition flex.cpp:171
ftxui::hcenter
Element hcenter(Element)
Center an element horizontally.
Definition composite_decorator.cpp:15
ftxui::BorderStyle
BorderStyle
BorderStyle is an enumeration that represents the different styles of borders that can be applied to ...
Definition elements.hpp:35
ftxui::gaugeDown
Element gaugeDown(float progress)
Draw a high definition progress bar progressing from top to bottom.
Definition src/ftxui/dom/gauge.cpp:271
ftxui::EMPTY
@ EMPTY
Definition elements.hpp:41
ftxui::DOUBLE
@ DOUBLE
Definition elements.hpp:39
ftxui::HEAVY
@ HEAVY
Definition elements.hpp:38
ftxui::ROUNDED
@ ROUNDED
Definition elements.hpp:40
ftxui::DASHED
@ DASHED
Definition elements.hpp:37
ftxui::LIGHT
@ LIGHT
Definition elements.hpp:36
linear_gradient.hpp
ftxui::Dimension::Fit
Dimensions Fit(Element &, bool extend_beyond_screen=false)
ftxui::WidthOrHeight
WidthOrHeight
Definition elements.hpp:161
ftxui::HEIGHT
@ HEIGHT
Definition elements.hpp:161
ftxui::WIDTH
@ WIDTH
Definition elements.hpp:161
ftxui::Decorator
std::function< Element(Element)> Decorator
Definition elements.hpp:24
ftxui::flexbox
Element flexbox(Elements, FlexboxConfig config=FlexboxConfig())
A container displaying elements on row/columns and capable of wrapping on the next column/row when fu...
Definition flexbox.cpp:251
ftxui::separatorVSelector
Element separatorVSelector(float up, float down, Color unselected_color, Color selected_color)
Draw an vertical bar, with the area in between up/downcolored differently.
Definition src/ftxui/dom/separator.cpp:512
ftxui::Element
std::shared_ptr< Node > Element
Definition elements.hpp:22
ftxui::xframe
Element xframe(Element)
Same as frame, but only on the x-axis.
Definition frame.cpp:126
ftxui::hflow
Element hflow(Elements)
A container displaying elements in rows from left to right. When filled, it starts on a new row below...
Definition flexbox.cpp:269
ftxui::selectionStyle
Decorator selectionStyle(std::function< void(Pixel &)> style)
Set the style of an element when selected.
Definition selection_style.cpp:86
ftxui::separatorHSelector
Element separatorHSelector(float left, float right, Color unselected_color, Color selected_color)
Draw a horizontal bar, with the area in between left/right colored differently.
Definition src/ftxui/dom/separator.cpp:442
ftxui::hbox
Element hbox(Elements)
A container displaying elements horizontally one by one.
Definition hbox.cpp:94
ftxui::canvas
Element canvas(ConstRef< Canvas >)
Produce an element from a Canvas, or a reference to a Canvas.
Definition src/ftxui/dom/canvas.cpp:891
ftxui::Elements
std::vector< Element > Elements
Definition elements.hpp:23
ftxui::selectionForegroundColor
Decorator selectionForegroundColor(Color foreground)
Set the foreground color of an element when selected. Note that the style is applied on top of the ex...
Definition selection_style.cpp:69
ftxui::operator|
Component operator|(Component component, ComponentDecorator decorator)
Definition component/util.cpp:12
ftxui::selectionBackgroundColor
Decorator selectionBackgroundColor(Color foreground)
Set the background color of an element when selected. Note that the style is applied on top of the ex...
Definition selection_style.cpp:61
ftxui::yframe
Element yframe(Element)
Same as frame, but only on the y-axis.
Definition frame.cpp:134
ftxui::selectionColor
Decorator selectionColor(Color foreground)
Set the color of an element when selected.
Definition selection_style.cpp:78
ftxui::select
Element select(Element e)
Set the child to be the one focused among its siblings.
Definition frame.cpp:108
ftxui::selectionStyleReset
Element selectionStyleReset(Element)
Reset the selection style of an element.
Definition selection_style.cpp:55
ftxui::reflect
Decorator reflect(Box &box)
Definition reflect.cpp:43
ftxui::GraphFunction
std::function< std::vector< int >(int, int)> GraphFunction
Definition elements.hpp:25
ftxui::gridbox
Element gridbox(std::vector< Elements > lines)
A container displaying a grid of elements.
Definition src/ftxui/dom/gridbox.cpp:173
ftxui::paragraph
Elements paragraph(std::wstring text)
ftxui::frame
Element frame(Element)
Allow an element to be displayed inside a 'virtual' area. It size can be larger than its container....
Definition frame.cpp:118
ftxui::operator|=
Component & operator|=(Component &component, ComponentDecorator decorator)
Definition component/util.cpp:22
ftxui::Constraint
Constraint
Definition elements.hpp:162
ftxui::LESS_THAN
@ LESS_THAN
Definition elements.hpp:162
ftxui::EQUAL
@ EQUAL
Definition elements.hpp:162
ftxui::GREATER_THAN
@ GREATER_THAN
Definition elements.hpp:162
ftxui::vflow
Element vflow(Elements)
A container displaying elements in rows from top to bottom. When filled, it starts on a new columns o...
Definition flexbox.cpp:289
ftxui::graph
Element graph(GraphFunction)
Draw a graph using a GraphFunction.
Definition src/ftxui/dom/graph.cpp:71
node.hpp
ref.hpp
left
std::uint8_t left
Definition screen.cpp:129
down
std::uint8_t down
Definition screen.cpp:132
right
std::uint8_t right
Definition screen.cpp:131
terminal.hpp

# text

The most simple widget. It displays a text.

text("I am a piece of text");
I am a piece of text.

# vtext

Identical to `ftxui::text`, but displayed vertically.

Code:

vtext("HELLO");

Terminal output:

H
E
L
L
O

# paragraph

Similar to `ftxui::text`, but the individual word are wrapped along multiple lines, depending on the width of its container.

Sample Code:

paragraph("A very long text")

For a more detailed example refer to detailed example. Paragraph also includes a number of other variants as shown below:

namespace ftxui {
Element paragraph(std::string text);
Element paragraphAlignLeft(std::string text);
Element paragraphAlignRight(std::string text);
Element paragraphAlignCenter(std::string text);
Element paragraphAlignJustify(std::string text);
}

# border

Adds a border around an element.

Code:

border(text("The element"))

Terminal output:

┌───────────┐
│The element│
└───────────┘

Note
  You can achieve the same behavior by using the pipe operator.
  Code:
  text("The element") | border

Border also comes in a variety of styles as shown below:

namespace ftxui {
Element border(Element);
Element borderLight(Element);
Element borderHeavy(Element);
Element borderDouble(Element);
Element borderRounded(Element);
Element borderEmpty(Element);
Decorator borderStyled(BorderStyle);
Decorator borderWith(Pixel);
}

# window

A `ftxui::window` is a `ftxui::border`, but with an additional header. To add a window around an element, wrap it and specify a string as the header. Code:

window("The window", text("The element"))

Terminal output:

┌The window─┐
│The element│
└───────────┘

# separator

Displays a vertical/horizontal line to visually split the content of a container in two.

Code:

border(
hbox({
text("Left"),
separator(),
text("Right")
})
)

Terminal output:

┌────┬─────┐
│left│right│
└────┴─────┘

Separators come in a variety of flavors as shown below:

namespace ftxui {
Element separator(void);
Element separatorLight();
Element separatorHeavy();
Element separatorDouble();
Element separatorEmpty();
Element separatorStyled(BorderStyle);
Element separator(Pixel);
Element separatorCharacter(std::string);
Element separatorHSelector(float left,
float right,
Color background,
Color foreground);
Element separatorVSelector(float up,
float down,
Color background,
Color foreground);
}

# gauge

This is a visual element that represents a ratio of progress.

Code:

border(gauge(0.5))

Terminal output:

┌────────────────────────────────────────────────────────────────────────────┐
│██████████████████████████████████████ │
└────────────────────────────────────────────────────────────────────────────┘

Gauges can be displayed in many orientations as shown below:

namespace {
Element gauge(float ratio);
Element gaugeLeft(float ratio);
Element gaugeRight(float ratio);
Element gaugeUp(float ratio);
Element gaugeDown(float ratio);
Element gaugeDirection(float ratio, GaugeDirection);
}

# graph

See:

Element graph(GraphFunction);

# Colors

Most terminal consoles can display colored text and colored backgrounds. FTXUI supports every color palette:

Decorator color(Color);
Decorator bgcolor(Color);

Color gallery:

## Palette16

On most terminals the following colors are supported:

- Default
- Black
- GrayDark
- GrayLight
- White
- Blue
- BlueLight
- Cyan
- CyanLight
- Green
- GreenLight
- Magenta
- MagentaLight
- Red
- RedLight
- Yellow
- YellowLight

Example use of the above colors using the pipe operator:

text("Blue foreground") | color(Color::Blue);
text("Blue background") | bgcolor(Color::Blue);
text("Black on white") | color(Color::Black) | bgcolor(Color::White);

## Palette256

On terminal supporting 256 colors.

text("HotPink") | color(Color::HotPink);

## TrueColor

On terminal supporting trueColor, you can directly use the 24bit RGB color space:

Use the constructors below to specify the RGB or HSV values for your color:

There are two constructors:

ftxui::Color::RGB(uint8_t red, uint8_t green, uint8_t blue);
ftxui::Color::HSV(uint8_t hue, uint8_t saturation, uint8_t value);
ftxui::Color::HSV
static Color HSV(uint8_t hue, uint8_t saturation, uint8_t value)
Build a Color from its HSV representation. https://en.wikipedia.org/wiki/HSL_and_HSV.
Definition screen/color.cpp:198
ftxui::Color::RGB
static Color RGB(uint8_t red, uint8_t green, uint8_t blue)
Build a Color from its RGB representation. https://en.wikipedia.org/wiki/RGB_color_model.
Definition screen/color.cpp:147

# LinearGradient

FTXUI supports linear gradient. Either on the foreground or the background.

Decorator color(const LinearGradient&);
Decorator bgcolor(const LinearGradient&);

A `ftxui::LinearGradient` is defined by an angle in degree, and a list of color stops.

auto gradient = LinearGradient()
.Angle(45)
.AddStop(0.0, Color::Red)
.AddStop(0.5, Color::Green)
.AddStop(1.0, Color::Blue);

You can also use simplified constructors:

LinearGradient(Color::Red, Color::Blue);
LinearGradient(45, Color::Red, Color::Blue);

See demo.

# Style

In addition to colored text and colored backgrounds. Many terminals support text effects such as: `bold`, `italic`, `dim`, `underlined`, `inverted`, `blink`.

Element bold(Element);
Element italic(Element);
Element dim(Element);
Element inverted(Element);
Element underlined(Element);
Element underlinedDouble(Element);
Element strikethrough(Element);
Element blink(Element);
Decorator color(Color);
Decorator bgcolor(Color);
Decorator colorgrad(LinearGradient);
Decorator bgcolorgrad(LinearGradient);

Example

To use these effects, simply wrap your elements with your desired effect:

underlined(bold(text("This text is bold and underlined")))

Alternatively, use the pipe operator to chain it on your element:

text("This text is bold") | bold | underlined

# Layout

Enables elements to be arranged in the following ways:

- Horizontally with `ftxui::hbox`
- Vertically with `ftxui::vbox`
- Inside a grid with `ftxui::gridbox`
- Wrapped along one direction using the `ftxui::flexbox`.

Example using `ftxui::hbox`, `ftxui::vbox` and `ftxui::filler`.

Example using `ftxui::gridbox`:

Example using flexbox:

Checkout this example and the associated demo.

Element can also become flexible using the `ftxui::flex` decorator.

Code:

hbox({
text("left") | border ,
text("middle") | border | flex,
text("right") | border,
});

Terminal output:

┌────┐┌─────────────────────────────────────────────────────┐┌─────┐
│left││middle ││right│
└────┘└─────────────────────────────────────────────────────┘└─────┘

Code:

hbox({
text("left") | border ,
text("middle") | border | flex,
text("right") | border | flex,
});

Terminal output:

┌────┐┌───────────────────────────────┐┌───────────────────────────────┐
│left││middle ││right │
└────┘└───────────────────────────────┘└───────────────────────────────┘

# Table

Enables easy formatting of data into a neat table like visual form.

Code example:

# Canvas

See the API <ftxui/dom/canvas.hpp>

auto c = Canvas(100, 100);
c.DrawPointLine(10, 10, 80, 10, Color::Red);
auto element = canvas(c);

Drawing can be performed on a `ftxui::Canvas`, using braille, block, or simple characters:

Simple example:

Complex example: