ftxui/dom

Detailed Description

Please check the tutorial of the ftxui/dom module.

Enumerations
enum class	Direction {   Up = 0 ,   Down = 1 ,   Left = 2 ,   Right = 3 }
	Direction is an enumeration that represents the four cardinal directions. More...
enum	BorderStyle {   LIGHT ,   DASHED ,   HEAVY ,   DOUBLE ,   ROUNDED ,   EMPTY }
	BorderStyle is an enumeration that represents the different styles of borders that can be applied to elements in the terminal UI. More...

Functions
struct	FTXUI_EXPORT (DOM) Canvas
	Canvas is a drawable buffer associated with drawing operations.
Element	automerge (Element child)
	Enable character to be automatically merged with others nearby.
Element	blink (Element child)
	The text drawn alternates in between visible and hidden.
Element	bold (Element child)
	Use a bold font, for elements with more emphasis.
Element	border (Element child)
	Draw a border around the element.
Decorator	borderWith (const Cell &pixel)
	Same as border but with a constant Cell around the element.
Decorator	borderStyled (BorderStyle style)
	Same as border but with different styles.
Decorator	borderStyled (Color foreground_color)
	Same as border but with a foreground color.
Decorator	borderStyled (BorderStyle style, Color foreground_color)
	Same as border but with a foreground color and a different style.
Element	borderDashed (Element child)
	Draw a dashed border around the element.
Element	borderLight (Element child)
	Draw a light border around the element.
Element	borderHeavy (Element child)
	Draw a heavy border around the element.
Element	borderDouble (Element child)
	Draw a double border around the element.
Element	borderRounded (Element child)
	Draw a rounded border around the element.
Element	borderEmpty (Element child)
	Draw an empty border around the element.
Element	window (Element title, Element content, BorderStyle border)
	Draw window with a title and a border around the element.
Element	clear_under (Element element)
	Before drawing |child|, clear the cells below. This is useful in combination with dbox.
Element	color (Color color, Element child)
	Set the foreground color of an element.
Element	bgcolor (Color color, Element child)
	Set the background color of an element.
Decorator	color (Color c)
	Decorate using a foreground color.
Decorator	bgcolor (Color color)
	Decorate using a background color.
Element	hcenter (Element child)
	Center an element horizontally.
Element	vcenter (Element child)
	Center an element vertically.
Element	center (Element child)
	Center an element horizontally and vertically.
Element	align_right (Element child)
	Align an element on the right side.
Element	dbox (Elements children_)
	Stack several element on top of each other.
Element	dim (Element child)
	Use a light font, for elements with less emphasis.
Element	filler ()
	An element that will take expand proportionally to the space left in a container.
Element	flex (Element child)
	Make a child element to expand proportionally to the space left in a container.
Element	xflex (Element child)
	Expand/Minimize if possible/needed on the X axis.
Element	yflex (Element child)
	Expand/Minimize if possible/needed on the Y axis.
Element	flex_grow (Element child)
	Expand if possible.
Element	xflex_grow (Element child)
	Expand if possible on the X axis.
Element	yflex_grow (Element child)
	Expand if possible on the Y axis.
Element	flex_shrink (Element child)
	Minimize if needed.
Element	xflex_shrink (Element child)
	Minimize if needed on the X axis.
Element	yflex_shrink (Element child)
	Minimize if needed on the Y axis.
Element	notflex (Element child)
	Make the element not flexible.
Decorator	focusPositionRelative (float x, float y)
	Used inside a frame, this force the view to be scrolled toward a a given position. The position is expressed in proportion of the requested size.
Decorator	focusPosition (int x, int y)
	Used inside a frame, this force the view to be scrolled toward a a given position. The position is expressed in the numbers of cells.
Element	focus (Element child)
	Set the child to be the one focused among its siblings.
Element	focusCursorBlock (Element child)
	Same as focus, but set the cursor shape to be a still block.
Element	focusCursorBlockBlinking (Element child)
	Same as focus, but set the cursor shape to be a blinking block.
Element	focusCursorBar (Element child)
	Same as focus, but set the cursor shape to be a still block.
Element	focusCursorBarBlinking (Element child)
	Same as focus, but set the cursor shape to be a blinking bar.
Element	focusCursorUnderline (Element child)
	Same as focus, but set the cursor shape to be a still underline.
Element	focusCursorUnderlineBlinking (Element child)
	Same as focus, but set the cursor shape to be a blinking underline.
Element	gaugeDirection (float progress, Direction direction)
	Draw a high definition progress bar progressing in specified direction.
Element	gaugeRight (float progress)
	Draw a high definition progress bar progressing from left to right.
Element	gaugeLeft (float progress)
	Draw a high definition progress bar progressing from right to left.
Element	gaugeUp (float progress)
	Draw a high definition progress bar progressing from bottom to top.
Element	gaugeDown (float progress)
	Draw a high definition progress bar progressing from top to bottom.
Element	gauge (float progress)
	Draw a high definition progress bar.
Element	hyperlink (std::string_view link, Element child)
	Make the rendered area clickable using a web browser. The link will be opened when the user clicks on it. This is supported only on a limited set of terminal emulators. List: https://github.com/Alhadis/OSC8-Adoption/.
Decorator	hyperlink (std::string_view link)
	Decorate using a hyperlink. The link will be opened when the user clicks on it. This is supported only on a limited set of terminal emulators. List: https://github.com/Alhadis/OSC8-Adoption/.
Element	inverted (Element child)
	Add a filter that will invert the foreground and the background colors.
Element	italic (Element child)
	Apply a underlinedDouble to text.
Element	color (const LinearGradient &gradient, Element child)
	Set the foreground color of an element with linear-gradient effect.
Element	bgcolor (const LinearGradient &gradient, Element child)
	Set the background color of an element with linear-gradient effect.
Decorator	color (const LinearGradient &gradient)
	Decorate using a linear-gradient effect on the foreground color.
Decorator	bgcolor (const LinearGradient &gradient)
	Decorate using a linear-gradient effect on the background color.
void	Render (Screen &screen, const Element &element)
	Display an element on a ftxui::Screen.
void	Render (Screen &screen, Node *node)
	Display an element on a ftxui::Screen.
Element	paragraph (std::string_view the_text)
	Return an element drawing the paragraph on multiple lines.
Element	paragraphAlignLeft (std::string_view the_text)
	Return an element drawing the paragraph on multiple lines, aligned on the left.
Element	paragraphAlignRight (std::string_view the_text)
	Return an element drawing the paragraph on multiple lines, aligned on the right.
Element	paragraphAlignCenter (std::string_view the_text)
	Return an element drawing the paragraph on multiple lines, aligned on the center.
Element	paragraphAlignJustify (std::string_view the_text)
	Return an element drawing the paragraph on multiple lines, aligned using a justified alignment. the center.
Element	vscroll_indicator (Element child)
	Display a vertical scrollbar on the right. Colors follow the content.
Element	hscroll_indicator (Element child)
	Display a horizontal scrollbar at the bottom. Colors follow the content.
Element	separator ()
	Draw a vertical or horizontal separation in between two other elements.
Element	separatorStyled (BorderStyle style)
	Draw a vertical or horizontal separation in between two other elements.
Element	separatorLight ()
	Draw a vertical or horizontal separation in between two other elements, using the LIGHT style.
Element	separatorDashed ()
	Draw a vertical or horizontal separation in between two other elements, using the DASHED style.
Element	separatorHeavy ()
	Draw a vertical or horizontal separation in between two other elements, using the HEAVY style.
Element	separatorDouble ()
	Draw a vertical or horizontal separation in between two other elements, using the DOUBLE style.
Element	separatorEmpty ()
	Draw a vertical or horizontal separation in between two other elements, using the EMPTY style.
Element	separatorCharacter (std::string_view value)
	Draw a vertical or horizontal separation in between two other elements.
Element	separator (Cell pixel)
	Draw a separator in between two element filled with a given pixel.
Decorator	size (WidthOrHeight direction, Constraint constraint, int value)
	Apply a constraint on the size of an element.
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".
Element	strikethrough (Element child)
	Apply a strikethrough to text.
Element	text (std::string_view text)
	Display a piece of UTF8 encoded unicode text.
Element	text (std::wstring_view text)
	Display a piece of unicode text.
Element	vtext (std::string_view text)
	Display a piece of unicode text vertically.
Element	vtext (std::wstring_view text)
	Display a piece unicode text vertically.
Element	underlined (Element child)
	Underline the given element.
Element	underlinedDouble (Element child)
	Apply a underlinedDouble to text.
Element	nothing (Element element)
	A decoration doing absolutely nothing.
Decorator	operator| (Decorator a, Decorator b)
	Compose two decorator into one.
Elements	operator| (Elements elements, Decorator decorator)
	From a set of element, apply a decorator to every elements.
Element	operator| (Element element, Decorator decorator)
	From an element, apply a decorator.
Element &	operator|= (Element &e, Decorator d)
	Apply a decorator to an element.
Element	emptyElement ()
Element	vbox (Elements children)
	A container displaying elements vertically one by one.
void	SetColorSupport (Color color)
	Override terminal color support in case auto-detection fails.

Enumeration Type Documentation

Direction

enum class Direction

strong

Direction is an enumeration that represents the four cardinal directions.

Enumerator
Up
Down
Left
Right

Definition at line 13 of file direction.hpp.

BorderStyle

enum BorderStyle

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.

Enumerator
LIGHT
DASHED
HEAVY
DOUBLE
ROUNDED
EMPTY

Definition at line 37 of file elements.hpp.

Function Documentation

FTXUI_EXPORT()

class FTXUI_EXPORT

(

DOM

)

Canvas is a drawable buffer associated with drawing operations.

Table is a utility to draw tables.

Represents a selection in a terminal user interface.

Requirement is a structure that defines the layout requirements for a Node in the terminal user interface.

Node is the base class for all elements in the DOM tree.

A class representing the settings for linear-gradient color effect.

FlexboxConfig is a configuration structure that defines the layout properties for a flexbox container.

Canvas is a drawable area that can be used to create complex graphics. It supports drawing points, lines, circles, ellipses, text, and images using braille, block, or normal characters.

Note: A terminal contains cells. A cells is a unit of:

• 2x4 braille characters (1x1 pixel)
• 2x2 block characters (2x2 pixels)
• 2x4 normal characters (2x4 pixels)

You need to multiply the x coordinate by 2 and the y coordinate by 4 to get the correct position in the terminal.

It allows you to specify the direction of the flex items, whether they should wrap, how they should be justified along the main axis, and how they should be aligned along the cross axis. It also includes properties for gaps between flex items in both the main and cross axes. This structure is used to configure the layout behavior of flexbox containers in a terminal user interface.

Example:

LinearGradient()
   .Angle(45)
   .Stop(Color::Red, 0.0)
   .Stop(Color::Green, 0.5)
   .Stop(Color::Blue, 1.0);

There are also shorthand constructors:

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

It represents a single node in the document object model (DOM) and provides the basic structure for layout and rendering. It contains methods for computing layout requirements, setting the box dimensions, selecting content, rendering to the screen, and checking the layout status. It typically contains child elements, which are also instances of Node.

Users are expected to derive from this class to create custom elements.

A list of builtin elements can be found in the elements.hpp file.

It specifies the minimum size required to fully draw the element,

Selection is a class that represents the two endpoints of a selection in a terminal user interface.

example

auto table = Table({
 {"X", "Y"},
 {"-1", "1"},
 {"+0", "0"},
 {"+1", "1"},
});
 
table.SelectAll().Border(LIGHT);
table.SelectRow(1).Border(DOUBLE);
table.SelectRow(1).SeparatorInternal(LIGHT);
 
std::move(table).Render();

This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside wrapping) single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.

< Flex items are laid out in a row.

< Flex items are laid out in a row, but in reverse order.

< Flex items are laid out in a column.

< Flex items are laid out in a column, but in reverse order.

By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.

< Flex items will all try to fit onto one line.

< Flex items will wrap onto multiple lines.

< Flex items will wrap onto multiple lines, but in reverse order.

This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

Items are aligned to the start of flexbox's direction.

Items are aligned to the end of flexbox's direction.

Items are centered along the line.

Items are stretched to fill the line.

Items are evenly distributed in the line; first item is on the start

Items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.

Items are distributed so that the spacing between any two items (and the space to the edges) is equal.

This defines the default behavior for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).

< items are placed at the start of the cross axis.

< items are placed at the end of the cross axis.

< items are centered along the cross axis.

< items are stretched to fill the cross axis.

< items are placed at the start of the cross axis.

< items are placed at the end of the cross axis.

< items are centered along the cross axis.

< items are stretched to fill the cross axis.

< items are evenly distributed in the cross axis.

< tems evenly distributed with equal space around each line.

< items are evenly distributed in the cross axis with equal space around them.

A stop is a color at a specific position in the gradient. The position is a value between 0.0 and 1.0, where 0.0 is the start of the gradient and 1.0 is the end of the gradient.

This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside wrapping) single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.

< Flex items are laid out in a row.

< Flex items are laid out in a row, but in reverse order.

< Flex items are laid out in a column.

< Flex items are laid out in a column, but in reverse order.

By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.

< Flex items will all try to fit onto one line.

< Flex items will wrap onto multiple lines.

< Flex items will wrap onto multiple lines, but in reverse order.

This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

Items are aligned to the start of flexbox's direction.

Items are aligned to the end of flexbox's direction.

Items are centered along the line.

Items are stretched to fill the line.

Items are evenly distributed in the line; first item is on the start

Items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.

Items are distributed so that the spacing between any two items (and the space to the edges) is equal.

This defines the default behavior for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).

< items are placed at the start of the cross axis.

< items are placed at the end of the cross axis.

< items are centered along the cross axis.

< items are stretched to fill the cross axis.

< items are placed at the start of the cross axis.

< items are placed at the end of the cross axis.

< items are centered along the cross axis.

< items are stretched to fill the cross axis.

< items are evenly distributed in the cross axis.

< tems evenly distributed with equal space around each line.

< items are evenly distributed in the cross axis with equal space around them.

A stop is a color at a specific position in the gradient. The position is a value between 0.0 and 1.0, where 0.0 is the start of the gradient and 1.0 is the end of the gradient.

Definition at line 1 of file canvas.hpp.

automerge()

Element automerge

(

Element

child

)

Enable character to be automatically merged with others nearby.

Definition at line 17 of file automerge.cpp.

blink()

Element blink

(

Element

child

)

The text drawn alternates in between visible and hidden.

Definition at line 33 of file blink.cpp.

bold()

Element bold

(

Element

child

)

Use a bold font, for elements with more emphasis.

Definition at line 33 of file bold.cpp.

border()

Element border

(

Element

child

)

Draw a border around the element.

See also

border

borderLight

borderDashed

borderDouble

borderHeavy

borderEmpty

borderRounded

borderStyled

borderWith

Add a border around an element

Example

// Use 'border' as a function...
Element document = border(text("The element"));
 
// ...Or as a 'pipe'.
Element document = text("The element") | border;

Output

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

Definition at line 227 of file src/ftxui/dom/border.cpp.

borderWith()

Decorator borderWith

(

const Cell &

pixel

)

Same as border but with a constant Cell around the element.

See also

border

Definition at line 234 of file src/ftxui/dom/border.cpp.

borderStyled() [1/3]

Decorator borderStyled

(

BorderStyle

style

)

Same as border but with different styles.

See also

border

Definition at line 243 of file src/ftxui/dom/border.cpp.

borderStyled() [2/3]

Decorator borderStyled

(

Color

foreground_color

)

Same as border but with a foreground color.

See also

border

Definition at line 252 of file src/ftxui/dom/border.cpp.

borderStyled() [3/3]

Decorator borderStyled	(	BorderStyle	style,
		Color	foreground_color )

Same as border but with a foreground color and a different style.

See also

border

Definition at line 262 of file src/ftxui/dom/border.cpp.

borderDashed()

Element borderDashed

(

Element

child

)

Draw a dashed border around the element.

See also

border

borderLight

borderDashed

borderDouble

borderHeavy

borderRounded

borderEmpty

borderStyled

borderWith

Add a border around an element

Example

// Use 'borderDash' as a function...
Element document = borderDash(text("The element"));
 
// ...Or as a 'pipe'.
Element document = text("The element") | borderDAsh;

Output

┏╍╍╍╍╍╍╍╍╍╍╍╍╍╍┓
╏The element   ╏
┗╍╍╍╍╍╍╍╍╍╍╍╍╍╍┛

Definition at line 300 of file src/ftxui/dom/border.cpp.

borderLight()

Element borderLight

(

Element

child

)

Draw a light border around the element.

See also

border

borderLight

borderDashed

borderDouble

borderHeavy

borderRounded

borderEmpty

borderStyled

borderWith

Add a border around an element

Example

// Use 'borderLight' as a function...
Element document = borderLight(text("The element"));
 
// ...Or as a 'pipe'.
Element document = text("The element") | borderLight;

Output

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

Definition at line 335 of file src/ftxui/dom/border.cpp.

borderHeavy()

Element borderHeavy

(

Element

child

)

Draw a heavy border around the element.

See also

border

borderLight

borderDashed

borderDouble

borderHeavy

borderRounded

borderEmpty

borderStyled

borderWith

Add a border around an element

Example

// Use 'borderHeavy' as a function...
Element document = borderHeavy(text("The element"));
 
// ...Or as a 'pipe'.
Element document = text("The element") | borderHeavy;

Output

┏━━━━━━━━━━━━━━┓
┃The element   ┃
┗━━━━━━━━━━━━━━┛

Definition at line 370 of file src/ftxui/dom/border.cpp.

borderDouble()

Element borderDouble

(

Element

child

)

Draw a double border around the element.

See also

border

borderLight

borderDashed

borderDouble

borderHeavy

borderRounded

borderEmpty

borderStyled

borderWith

Add a border around an element

Example

// Use 'borderDouble' as a function...
Element document = borderDouble(text("The element"));
 
// ...Or as a 'pipe'.
Element document = text("The element") | borderDouble;

Output

╔══════════════╗
║The element   ║
╚══════════════╝

Definition at line 405 of file src/ftxui/dom/border.cpp.

borderRounded()

Element borderRounded

(

Element

child

)

Draw a rounded border around the element.

See also

border

borderLight

borderDashed

borderDouble

borderHeavy

borderRounded

borderEmpty

borderStyled

borderWith

Add a border around an element

Example

// Use 'borderRounded' as a function...
Element document = borderRounded(text("The element"));
 
// ...Or as a 'pipe'.
Element document = text("The element") | borderRounded;

Output

╭──────────────╮
│The element   │
╰──────────────╯

Definition at line 440 of file src/ftxui/dom/border.cpp.

borderEmpty()

Element borderEmpty

(

Element

child

)

Draw an empty border around the element.

See also

border

borderLight

borderDashed

borderDouble

borderHeavy

borderRounded

borderEmpty

borderStyled

borderWith

Add a border around an element

Example

// Use 'borderRounded' as a function...
Element document = borderRounded(text("The element"));
 
// ...Or as a 'pipe'.
Element document = text("The element") | borderRounded;

Output

The element

Definition at line 475 of file src/ftxui/dom/border.cpp.

window()

Element window	(	Element	title,
		Element	content,
		BorderStyle	border )

Draw window with a title and a border around the element.

Parameters

title	The title of the window.
content	The element to be wrapped.
border	The style of the border. Default is ROUNDED.

See also

border

Example

Element document = window(text("Title"),
                          text("content")
                   );
 
// With specifying border
Element document = window(text("Title"),
                          text("content"),
                          ROUNDED
                   );

Output

┌Title──┐
│content│
└───────┘

Definition at line 507 of file src/ftxui/dom/border.cpp.

clear_under()

Element clear_under

(

Element

element

)

Before drawing |child|, clear the cells below. This is useful in combination with dbox.

See also

ftxui::dbox

Definition at line 38 of file clear_under.cpp.

color() [1/4]

Element color	(	Color	color,
		Element	child )

Set the foreground color of an element.

Parameters

color	The color of the output element.
child	The input element.

Returns

The output element colored.

Example

Element document = color(Color::Green, text("Success")),

Definition at line 81 of file dom/color.cpp.

bgcolor() [1/4]

Element bgcolor	(	Color	color,
		Element	child )

Set the background color of an element.

Parameters

color	The color of the output element.
child	The input element.

Returns

The output element colored.

Example

Element document = bgcolor(Color::Green, text("Success")),

Definition at line 96 of file dom/color.cpp.

color() [2/4]

Decorator color

(

Color

c

)

Decorate using a foreground color.

Parameters

c	The foreground color to be applied.

Returns

The Decorator applying the color.

Example

Element document = text("red") | color(Color::Red);

Definition at line 110 of file dom/color.cpp.

bgcolor() [2/4]

Decorator bgcolor

(

Color

color

)

Decorate using a background color.

Parameters

color

The background color to be applied.

Returns

The Decorator applying the color.

Example

Element document = text("red") | bgcolor(Color::Red);

Definition at line 124 of file dom/color.cpp.

hcenter()

Element hcenter

(

Element

child

)

Center an element horizontally.

Parameters

child

The decorated element.

Returns

The centered element.

Definition at line 15 of file composite_decorator.cpp.

vcenter()

Element vcenter

(

Element

child

)

Center an element vertically.

Parameters

child

The decorated element.

Returns

The centered element.

Definition at line 23 of file composite_decorator.cpp.

center()

Element center

(

Element

child

)

Center an element horizontally and vertically.

Parameters

child

The decorated element.

Returns

The centered element.

Definition at line 31 of file composite_decorator.cpp.

align_right()

Element align_right

(

Element

child

)

Align an element on the right side.

Parameters

child

The decorated element.

Returns

The right aligned element.

Definition at line 39 of file composite_decorator.cpp.

dbox()

Element dbox

(

Elements

children_

)

Stack several element on top of each other.

Parameters

children_

The input elements.

Returns

The right aligned element.

Definition at line 59 of file src/ftxui/dom/dbox.cpp.

dim()

Element dim

(

Element

child

)

Use a light font, for elements with less emphasis.

Definition at line 33 of file dim.cpp.

filler()

Element filler

(

)

An element that will take expand proportionally to the space left in a container.

Definition at line 98 of file flex.cpp.

flex()

Element flex

(

Element

child

)

Make a child element to expand proportionally to the space left in a container.

Examples:

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

Output:

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

Definition at line 123 of file flex.cpp.

xflex()

Element xflex

(

Element

child

)

Expand/Minimize if possible/needed on the X axis.

Definition at line 129 of file flex.cpp.

yflex()

Element yflex

(

Element

child

)

Expand/Minimize if possible/needed on the Y axis.

Definition at line 135 of file flex.cpp.

flex_grow()

Element flex_grow

(

Element

child

)

Expand if possible.

Definition at line 141 of file flex.cpp.

xflex_grow()

Element xflex_grow

(

Element

child

)

Expand if possible on the X axis.

Definition at line 147 of file flex.cpp.

yflex_grow()

Element yflex_grow

(

Element

child

)

Expand if possible on the Y axis.

Definition at line 153 of file flex.cpp.

flex_shrink()

Element flex_shrink

(

Element

child

)

Minimize if needed.

Definition at line 159 of file flex.cpp.

xflex_shrink()

Element xflex_shrink

(

Element

child

)

Minimize if needed on the X axis.

Definition at line 165 of file flex.cpp.

yflex_shrink()

Element yflex_shrink

(

Element

child

)

Minimize if needed on the Y axis.

Definition at line 171 of file flex.cpp.

notflex()

Element notflex

(

Element

child

)

Make the element not flexible.

Definition at line 177 of file flex.cpp.

focusPositionRelative()

Decorator focusPositionRelative	(	float	x,
		float	y )

Used inside a frame, this force the view to be scrolled toward a a given position. The position is expressed in proportion of the requested size.

For instance:

• (0, 0) means that the view is scrolled toward the upper left.
• (1, 0) means that the view is scrolled toward the upper right.
• (0, 1) means that the view is scrolled toward the bottom left.

Example

Element document = huge_document()
  | focusPositionRelative(0.f, 1.f)
  | frame;

Definition at line 31 of file src/ftxui/dom/focus.cpp.

focusPosition()

Decorator focusPosition	(	int	x,
		int	y )

Used inside a frame, this force the view to be scrolled toward a a given position. The position is expressed in the numbers of cells.

Example

Element document = huge_document()
  | focusPosition(10, 10)
  | frame;

Definition at line 69 of file src/ftxui/dom/focus.cpp.

focus()

Element focus

(

Element

child

)

Set the child to be the one focused among its siblings.

Parameters

child

The element to be focused.

Definition at line 101 of file frame.cpp.

focusCursorBlock()

Element focusCursorBlock

(

Element

child

)

Same as focus, but set the cursor shape to be a still block.

See also

focus

focusCursorBlock

focusCursorBlockBlinking

focusCursorBar

focusCursorBarBlinking

focusCursorUnderline

focusCursorUnderlineBlinking

Definition at line 147 of file frame.cpp.

focusCursorBlockBlinking()

Element focusCursorBlockBlinking

(

Element

child

)

Same as focus, but set the cursor shape to be a blinking block.

See also

focus

focusCursorBlock

focusCursorBlockBlinking

focusCursorBar

focusCursorBarBlinking

focusCursorUnderline

focusCursorUnderlineBlinking

Definition at line 161 of file frame.cpp.

focusCursorBar()

Element focusCursorBar

(

Element

child

)

Same as focus, but set the cursor shape to be a still block.

See also

focus

focusCursorBlock

focusCursorBlockBlinking

focusCursorBar

focusCursorBarBlinking

focusCursorUnderline

focusCursorUnderlineBlinking

Definition at line 175 of file frame.cpp.

focusCursorBarBlinking()

Element focusCursorBarBlinking

(

Element

child

)

Same as focus, but set the cursor shape to be a blinking bar.

See also

focus

focusCursorBlock

focusCursorBlockBlinking

focusCursorBar

focusCursorBarBlinking

focusCursorUnderline

focusCursorUnderlineBlinking

Definition at line 189 of file frame.cpp.

focusCursorUnderline()

Element focusCursorUnderline

(

Element

child

)

Same as focus, but set the cursor shape to be a still underline.

See also

focus

focusCursorBlock

focusCursorBlockBlinking

focusCursorBar

focusCursorBarBlinking

focusCursorUnderline

focusCursorUnderlineBlinking

Definition at line 203 of file frame.cpp.

focusCursorUnderlineBlinking()

Element focusCursorUnderlineBlinking

(

Element

child

)

Same as focus, but set the cursor shape to be a blinking underline.

See also

focus

focusCursorBlock

focusCursorBlockBlinking

focusCursorBar

focusCursorBarBlinking

focusCursorUnderline

focusCursorUnderlineBlinking

Definition at line 217 of file frame.cpp.

gaugeDirection()

Element gaugeDirection	(	float	progress,
		Direction	direction )

Draw a high definition progress bar progressing in specified direction.

Parameters

progress	The proportion of the area to be filled. Belong to [0,1].
direction	Direction of progress bars progression.

Definition at line 179 of file src/ftxui/dom/gauge.cpp.

gaugeRight()

Element gaugeRight

(

float

progress

)

Draw a high definition progress bar progressing from left to right.

Parameters

progress

The proportion of the area to be filled. Belong to [0,1].

Example

A gauge. It can be used to represent a progress bar.

border(gaugeRight(0.5))

Output

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

Definition at line 201 of file src/ftxui/dom/gauge.cpp.

gaugeLeft()

Element gaugeLeft

(

float

progress

)

Draw a high definition progress bar progressing from right to left.

Parameters

progress

The proportion of the area to be filled. Belong to [0,1].

Example

A gauge. It can be used to represent a progress bar.

border(gaugeLeft(0.5))

Output

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

Definition at line 223 of file src/ftxui/dom/gauge.cpp.

gaugeUp()

Element gaugeUp

(

float

progress

)

Draw a high definition progress bar progressing from bottom to top.

Parameters

progress

The proportion of the area to be filled. Belong to [0,1].

Example

A gauge. It can be used to represent a progress bar.

border(gaugeUp(0.5))

Output

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

Definition at line 252 of file src/ftxui/dom/gauge.cpp.

gaugeDown()

Element gaugeDown

(

float

progress

)

Draw a high definition progress bar progressing from top to bottom.

Parameters

progress

The proportion of the area to be filled. Belong to [0,1].

Example

A gauge. It can be used to represent a progress bar.

border(gaugeDown(0.5))

Output

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

Definition at line 281 of file src/ftxui/dom/gauge.cpp.

gauge()

Element gauge

(

float

progress

)

Draw a high definition progress bar.

Parameters

progress

The proportion of the area to be filled. Belong to [0,1].

Example

A gauge. It can be used to represent a progress bar.

border(gauge(0.5))

Output

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

Definition at line 303 of file src/ftxui/dom/gauge.cpp.

hyperlink() [1/2]

Element hyperlink	(	std::string_view	link,
		Element	child )

Make the rendered area clickable using a web browser. The link will be opened when the user clicks on it. This is supported only on a limited set of terminal emulators. List: https://github.com/Alhadis/OSC8-Adoption/.

Parameters

link	The link
child	The input element.

Returns

The output element with the link.

Example

Element document =
  hyperlink("https://github.com/ArthurSonzogni/FTXUI", "link");

Definition at line 52 of file hyperlink.cpp.

hyperlink() [2/2]

Decorator hyperlink

(

std::string_view

link

)

Decorate using a hyperlink. The link will be opened when the user clicks on it. This is supported only on a limited set of terminal emulators. List: https://github.com/Alhadis/OSC8-Adoption/.

Parameters

link	The link to redirect the users to.

Returns

The Decorator applying the hyperlink.

Example

Element document =
  text("red") | hyperlink("https://github.com/Arthursonzogni/FTXUI");

Definition at line 71 of file hyperlink.cpp.

inverted()

Element inverted

(

Element

child

)

Add a filter that will invert the foreground and the background colors.

Definition at line 34 of file inverted.cpp.

italic()

Element italic

(

Element

child

)

Apply a underlinedDouble to text.

Definition at line 17 of file italic.cpp.

color() [3/4]

Element color	(	const LinearGradient &	gradient,
		Element	child )

Set the foreground color of an element with linear-gradient effect.

Parameters

gradient	The gradient effect to be applied on the output element.
child	The input element.

Returns

The output element colored.

Example

color(LinearGradient{0, {Color::Red, Color::Blue}}, text("Hello"))

Definition at line 245 of file src/ftxui/dom/linear_gradient.cpp.

bgcolor() [3/4]

Element bgcolor	(	const LinearGradient &	gradient,
		Element	child )

Set the background color of an element with linear-gradient effect.

Parameters

gradient	The gradient effect to be applied on the output element.
child	The input element.

Returns

The output element colored.

Example

bgcolor(LinearGradient{0, {Color::Red, Color::Blue}}, text("Hello"))

Definition at line 261 of file src/ftxui/dom/linear_gradient.cpp.

color() [4/4]

Decorator color

(

const LinearGradient &

gradient

)

Decorate using a linear-gradient effect on the foreground color.

Parameters

gradient

The gradient effect to be applied on the output element.

Returns

The Decorator applying the color.

Example

text("Hello") | color(LinearGradient{0, {Color::Red, Color::Blue}})

Definition at line 276 of file src/ftxui/dom/linear_gradient.cpp.

bgcolor() [4/4]

Decorator bgcolor

(

const LinearGradient &

gradient

)

Decorate using a linear-gradient effect on the background color.

Parameters

gradient

The gradient effect to be applied on the output element.

Returns

The Decorator applying the color.

Example

text("Hello") | color(LinearGradient{0, {Color::Red, Color::Blue}})

Definition at line 291 of file src/ftxui/dom/linear_gradient.cpp.

Render() [1/2]

void Render	(	Screen &	screen,
		const Element &	element )

Display an element on a ftxui::Screen.

Definition at line 93 of file node.cpp.

Render() [2/2]

void Render	(	Screen &	screen,
		Node *	node )

Display an element on a ftxui::Screen.

Definition at line 100 of file node.cpp.

paragraph()

Element paragraph

(

std::string_view

the_text

)

Return an element drawing the paragraph on multiple lines.

See also

flexbox.

Definition at line 48 of file src/ftxui/dom/paragraph.cpp.

paragraphAlignLeft()

Element paragraphAlignLeft

(

std::string_view

the_text

)

Return an element drawing the paragraph on multiple lines, aligned on the left.

See also

flexbox.

Definition at line 56 of file src/ftxui/dom/paragraph.cpp.

paragraphAlignRight()

Element paragraphAlignRight

(

std::string_view

the_text

)

Return an element drawing the paragraph on multiple lines, aligned on the right.

See also

flexbox.

Definition at line 67 of file src/ftxui/dom/paragraph.cpp.

paragraphAlignCenter()

Element paragraphAlignCenter

(

std::string_view

the_text

)

Return an element drawing the paragraph on multiple lines, aligned on the center.

See also

flexbox.

Definition at line 79 of file src/ftxui/dom/paragraph.cpp.

paragraphAlignJustify()

Element paragraphAlignJustify

(

std::string_view

the_text

)

Return an element drawing the paragraph on multiple lines, aligned using a justified alignment. the center.

See also

flexbox.

Definition at line 92 of file src/ftxui/dom/paragraph.cpp.

vscroll_indicator()

Element vscroll_indicator

(

Element

child

)

Display a vertical scrollbar on the right. Colors follow the content.

Definition at line 21 of file scroll_indicator.cpp.

hscroll_indicator()

Element hscroll_indicator

(

Element

child

)

Display a horizontal scrollbar at the bottom. Colors follow the content.

Definition at line 76 of file scroll_indicator.cpp.

separator() [1/2]

Element separator

(

)

Draw a vertical or horizontal separation in between two other elements.

See also

separator

separatorLight

separatorDashed

separatorDouble

separatorHeavy

separatorEmpty

separatorRounded

separatorStyled

separatorCharacter

Add a visual separation in between two elements.

Example

// Use 'border' as a function...
Element document = vbox({
  text("up"),
  separator(),
  text("down"),
});

Output

up
────
down

Definition at line 135 of file src/ftxui/dom/separator.cpp.

separatorStyled()

Element separatorStyled

(

BorderStyle

style

)

Draw a vertical or horizontal separation in between two other elements.

Parameters

style

the style of the separator.

See also

separator

separatorLight

separatorDashed

separatorDouble

separatorHeavy

separatorEmpty

separatorRounded

separatorStyled

separatorCharacter

Add a visual separation in between two elements.

Example

// Use 'border' as a function...
Element document = vbox({
  text("up"),
  separatorStyled(DOUBLE),
  text("down"),
});

Output

up
════
down

Definition at line 173 of file src/ftxui/dom/separator.cpp.

separatorLight()

Element separatorLight

(

)

Draw a vertical or horizontal separation in between two other elements, using the LIGHT style.

See also

separator

separatorLight

separatorDashed

separatorDouble

separatorHeavy

separatorEmpty

separatorRounded

separatorStyled

separatorCharacter

Add a visual separation in between two elements.

Example

// Use 'border' as a function...
Element document = vbox({
  text("up"),
  separatorLight(),
  text("down"),
});

Output

up
────
down

Definition at line 210 of file src/ftxui/dom/separator.cpp.

separatorDashed()

Element separatorDashed

(

)

Draw a vertical or horizontal separation in between two other elements, using the DASHED style.

See also

separator

separatorLight

separatorDashed

separatorDouble

separatorHeavy

separatorEmpty

separatorRounded

separatorStyled

separatorCharacter

Add a visual separation in between two elements.

Example

// Use 'border' as a function...
Element document = vbox({
  text("up"),
  separatorLight(),
  text("down"),
});

Output

up
╍╍╍╍
down

Definition at line 247 of file src/ftxui/dom/separator.cpp.

separatorHeavy()

Element separatorHeavy

(

)

Draw a vertical or horizontal separation in between two other elements, using the HEAVY style.

See also

separator

separatorLight

separatorDashed

separatorDouble

separatorHeavy

separatorEmpty

separatorRounded

separatorStyled

separatorCharacter

Add a visual separation in between two elements.

Example

// Use 'border' as a function...
Element document = vbox({
  text("up"),
  separatorHeavy(),
  text("down"),
});

Output

up
━━━━
down

Definition at line 284 of file src/ftxui/dom/separator.cpp.

separatorDouble()

Element separatorDouble

(

)

Draw a vertical or horizontal separation in between two other elements, using the DOUBLE style.

See also

separator

separatorLight

separatorDashed

separatorDouble

separatorHeavy

separatorEmpty

separatorRounded

separatorStyled

separatorCharacter

Add a visual separation in between two elements.

Example

// Use 'border' as a function...
Element document = vbox({
  text("up"),
  separatorDouble(),
  text("down"),
});

Output

up
════
down

Definition at line 321 of file src/ftxui/dom/separator.cpp.

separatorEmpty()

Element separatorEmpty

(

)

Draw a vertical or horizontal separation in between two other elements, using the EMPTY style.

See also

separator

separatorLight

separatorDashed

separatorDouble

separatorHeavy

separatorEmpty

separatorRounded

separatorStyled

separatorCharacter

Add a visual separation in between two elements.

Example

// Use 'border' as a function...
Element document = vbox({
  text("up"),
  separator(),
  text("down"),
});

Output

up
 
down

Definition at line 358 of file src/ftxui/dom/separator.cpp.

separatorCharacter()

Element separatorCharacter

(

std::string_view

value

)

Draw a vertical or horizontal separation in between two other elements.

Parameters

value

the character to fill the separator area.

See also

separator

separatorLight

separatorDashed

separatorDouble

separatorHeavy

separatorEmpty

separatorRounded

separatorStyled

separatorCharacter

Add a visual separation in between two elements.

Example

// Use 'border' as a function...
Element document = vbox({
  text("up"),
  separator(),
  text("down"),
});

Output

up
────
down

Definition at line 396 of file src/ftxui/dom/separator.cpp.

separator() [2/2]

Element separator

(

Cell

pixel

)

Draw a separator in between two element filled with a given pixel.

See also

separator

separatorLight

separatorDashed

separatorHeavy

separatorDouble

separatorStyled

Example

Cell empty;
Element document = vbox({
  text("Up"),
  separator(empty),
  text("Down"),
})

Output

Up
 
Down

Definition at line 427 of file src/ftxui/dom/separator.cpp.

size()

Decorator size	(	WidthOrHeight	direction,
		Constraint	constraint,
		int	value )

Apply a constraint on the size of an element.

Parameters

direction	Whether the WIDTH or the HEIGHT of the element must be constrained.
constraint	The type of constraint.
value	The value.

Definition at line 89 of file src/ftxui/dom/size.cpp.

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".

Parameters

charset_index	The type of "video".
image_index	The "frame" of the video. You need to increase this for every "step".

Definition at line 282 of file src/ftxui/dom/spinner.cpp.

strikethrough()

Element strikethrough

(

Element

child

)

Apply a strikethrough to text.

Definition at line 17 of file strikethrough.cpp.

text() [1/2]

Element text

(

std::string_view

text

)

Display a piece of UTF8 encoded unicode text.

See also

ftxui::to_wstring

Example

Element document = text("Hello world!");

Output

Hello world!

Definition at line 211 of file src/ftxui/dom/text.cpp.

text() [2/2]

Element text

(

std::wstring_view

text

)

Display a piece of unicode text.

See also

ftxui::to_wstring

Example

Element document = text(L"Hello world!");

Output

Hello world!

Definition at line 230 of file src/ftxui/dom/text.cpp.

vtext() [1/2]

Element vtext

(

std::string_view

text

)

Display a piece of unicode text vertically.

See also

ftxui::to_wstring

Example

Element document = vtext("Hello world!");

Output

H
e
l
l
o
 
w
o
r
l
d
!

Definition at line 260 of file src/ftxui/dom/text.cpp.

vtext() [2/2]

Element vtext

(

std::wstring_view

text

)

Display a piece unicode text vertically.

See also

ftxui::to_wstring

Example

Element document = vtext(L"Hello world!");

Output

H
e
l
l
o
 
w
o
r
l
d
!

Definition at line 290 of file src/ftxui/dom/text.cpp.

underlined()

Element underlined

(

Element

child

)

Underline the given element.

Definition at line 33 of file underlined.cpp.

underlinedDouble()

Element underlinedDouble

(

Element

child

)

Apply a underlinedDouble to text.

Definition at line 17 of file underlined_double.cpp.

nothing()

Element nothing

(

Element

element

)

A decoration doing absolutely nothing.

Definition at line 28 of file dom/util.cpp.

operator|() [1/3]

Decorator operator|	(	Decorator	a,
		Decorator	b )

Compose two decorator into one.

Example

auto decorator = bold | blink;

Definition at line 40 of file dom/util.cpp.

operator|() [2/3]

Elements operator|	(	Elements	elements,
		Decorator	decorator )

From a set of element, apply a decorator to every elements.

Returns

the set of decorated element.

Definition at line 48 of file dom/util.cpp.

operator|() [3/3]

Element operator|	(	Element	element,
		Decorator	decorator )

From an element, apply a decorator.

Returns

the decorated element.

Example

Both of these are equivalent:

bold(text("Hello"));

text("Hello") | bold;

Definition at line 70 of file dom/util.cpp.

operator|=()

Element & operator|=	(	Element &	e,
		Decorator	d )

Apply a decorator to an element.

Returns

the decorated element.

Example

Both of these are equivalent:

auto element = text("Hello");
element |= bold;

Definition at line 85 of file dom/util.cpp.

emptyElement()

Element emptyElement

(

)

An element of size 0x0 drawing nothing.

Definition at line 140 of file dom/util.cpp.

vbox()

Element vbox

(

Elements

children

)

A container displaying elements vertically one by one.

Parameters

children

The elements in the container

Returns

The container.

Example

vbox({
  text("Up"),
  text("Down"),
});

Definition at line 96 of file vbox.cpp.

SetColorSupport()

void SetColorSupport

(

Color

color

)

Override terminal color support in case auto-detection fails.

Definition at line 310 of file terminal.cpp.