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

Lista de elementos

La lista de todos los elementos está incluida y se puede acceder a ella incluyendo el archivo de cabecera correspondiente:

#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 <cstdint>
#include <functional>
#include <memory>
 
#include <string_view>
#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/export.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 es una enumeración que representa los diferentes estilos
/// de bordes que se pueden aplicar a los elementos en la interfaz de usuario de la terminal.
///
/// BorderStyle es una enumeración que representa los diferentes estilos de
/// bordes que se pueden aplicar a los elementos en la interfaz de usuario de la terminal.
/// Se utiliza para definir la apariencia visual de los bordes alrededor de los elementos,
/// como ventanas, marcos o separadores.
/// @ingroup dom
enum BorderStyle : uint8_t {
  LIGHT,
  DASHED,
  HEAVY,
  DOUBLE,
  ROUNDED,
  EMPTY,
};
 
// Encadena elementos con decoradores mediante pipe.
// Por ejemplo, las siguientes líneas son equivalentes:
// -> text("ftxui") | bold | underlined
// -> underlined(bold(text("FTXUI")))
FTXUI_EXPORT(DOM) Element operator|(Element, Decorator);
FTXUI_EXPORT(DOM) Element& operator|=(Element&, Decorator);
FTXUI_EXPORT(DOM) Elements operator|(Elements, Decorator);
FTXUI_EXPORT(DOM) Decorator operator|(Decorator, Decorator);
 
// --- Elemento de Interfaz ---
FTXUI_EXPORT(DOM) Element text(std::string_view text);
FTXUI_EXPORT(DOM) Element vtext(std::string_view text);
FTXUI_EXPORT(DOM) Element separator();
FTXUI_EXPORT(DOM) Element separatorLight();
FTXUI_EXPORT(DOM) Element separatorDashed();
FTXUI_EXPORT(DOM) Element separatorHeavy();
FTXUI_EXPORT(DOM) Element separatorDouble();
FTXUI_EXPORT(DOM) Element separatorEmpty();
FTXUI_EXPORT(DOM) Element separatorStyled(BorderStyle);
FTXUI_EXPORT(DOM) Element separator(Cell);
FTXUI_EXPORT(DOM) Element separatorCharacter(std::string_view);
FTXUI_EXPORT(DOM)
Element separatorHSelector(float left,
                           float right,
                           Color unselected_color,
                           Color selected_color);
FTXUI_EXPORT(DOM)
Element separatorVSelector(float up,
                           float down,
                           Color unselected_color,
                           Color selected_color);
FTXUI_EXPORT(DOM) Element gauge(float progress);
FTXUI_EXPORT(DOM) Element gaugeLeft(float progress);
FTXUI_EXPORT(DOM) Element gaugeRight(float progress);
FTXUI_EXPORT(DOM) Element gaugeUp(float progress);
FTXUI_EXPORT(DOM) Element gaugeDown(float progress);
FTXUI_EXPORT(DOM) Element gaugeDirection(float progress, Direction direction);
 
// charset[0] es el glifo "vacío", charset.back() es "completo"; las entradas
// intermedias sombrean la celda de borde.
FTXUI_EXPORT(DOM)
Element gaugeCharset(float progress,
                      std::vector<std::string> charset,
                      Direction direction = Direction::Right);
FTXUI_EXPORT(DOM) Element border(Element);
FTXUI_EXPORT(DOM) Element borderLight(Element);
FTXUI_EXPORT(DOM) Element borderDashed(Element);
FTXUI_EXPORT(DOM) Element borderHeavy(Element);
FTXUI_EXPORT(DOM) Element borderDouble(Element);
FTXUI_EXPORT(DOM) Element borderRounded(Element);
FTXUI_EXPORT(DOM) Element borderEmpty(Element);
FTXUI_EXPORT(DOM) Decorator borderStyled(BorderStyle);
FTXUI_EXPORT(DOM) Decorator borderStyled(BorderStyle, Color);
FTXUI_EXPORT(DOM) Decorator borderStyled(Color);
FTXUI_EXPORT(DOM) Decorator borderWith(const Cell&);
FTXUI_EXPORT(DOM)
Element window(Element title, Element content, BorderStyle border = ROUNDED);
FTXUI_EXPORT(DOM) Element spinner(int charset_index, size_t image_index);
FTXUI_EXPORT(DOM) Element paragraph(std::string_view text);
FTXUI_EXPORT(DOM) Element paragraphAlignLeft(std::string_view text);
FTXUI_EXPORT(DOM) Element paragraphAlignRight(std::string_view text);
FTXUI_EXPORT(DOM) Element paragraphAlignCenter(std::string_view text);
FTXUI_EXPORT(DOM) Element paragraphAlignJustify(std::string_view text);
FTXUI_EXPORT(DOM) Element graph(GraphFunction);
FTXUI_EXPORT(DOM) Element emptyElement();
FTXUI_EXPORT(DOM) Element canvas(ConstRef<Canvas>);
FTXUI_EXPORT(DOM)
Element canvas(int width, int height, std::function<void(Canvas&)>);
FTXUI_EXPORT(DOM) Element canvas(std::function<void(Canvas&)>);
 
// -- Decorador ---
FTXUI_EXPORT(DOM) Element bold(Element);
FTXUI_EXPORT(DOM) Element dim(Element);
FTXUI_EXPORT(DOM) Element italic(Element);
FTXUI_EXPORT(DOM) Element inverted(Element);
FTXUI_EXPORT(DOM) Element underlined(Element);
FTXUI_EXPORT(DOM) Element underlinedDouble(Element);
FTXUI_EXPORT(DOM) Element blink(Element);
FTXUI_EXPORT(DOM) Element strikethrough(Element);
FTXUI_EXPORT(DOM) Decorator color(Color);
FTXUI_EXPORT(DOM) Decorator bgcolor(Color);
FTXUI_EXPORT(DOM) Decorator color(const LinearGradient&);
FTXUI_EXPORT(DOM) Decorator bgcolor(const LinearGradient&);
FTXUI_EXPORT(DOM) Element color(Color, Element);
FTXUI_EXPORT(DOM) Element bgcolor(Color, Element);
FTXUI_EXPORT(DOM) Element color(const LinearGradient&, Element);
FTXUI_EXPORT(DOM) Element bgcolor(const LinearGradient&, Element);
FTXUI_EXPORT(DOM) Decorator focusPosition(int x, int y);
FTXUI_EXPORT(DOM) Decorator focusPositionRelative(float x, float y);
FTXUI_EXPORT(DOM) Element automerge(Element child);
FTXUI_EXPORT(DOM) Decorator hyperlink(std::string_view link);
FTXUI_EXPORT(DOM) Element hyperlink(std::string_view link, Element child);
FTXUI_EXPORT(DOM) Element selectionStyleReset(Element);
FTXUI_EXPORT(DOM) Decorator selectionColor(Color foreground);
FTXUI_EXPORT(DOM) Decorator selectionBackgroundColor(Color foreground);
FTXUI_EXPORT(DOM) Decorator selectionForegroundColor(Color foreground);
FTXUI_EXPORT(DOM) Decorator selectionStyle(std::function<void(Cell&)> style);
 
// --- Diseño ---
// Conjunto de elementos horizontales, verticales o apilados.
FTXUI_EXPORT(DOM) Element hbox(Elements);
FTXUI_EXPORT(DOM) Element vbox(Elements);
FTXUI_EXPORT(DOM) Element dbox(Elements);
FTXUI_EXPORT(DOM)
Element flexbox(Elements, FlexboxConfig config = FlexboxConfig());
FTXUI_EXPORT(DOM) Element gridbox(std::vector<Elements> lines);
 
FTXUI_EXPORT(DOM)
Element hflow(Elements);  // Ayudante: flexbox predeterminado con dirección de fila.
FTXUI_EXPORT(DOM)
Element vflow(Elements);  // Ayudante: flexbox predeterminado con dirección de columna.
 
// -- Flexibilidad ---
// Define cómo compartir el espacio restante cuando no todo se utiliza dentro de un
// contenedor.
FTXUI_EXPORT(DOM) Element flex(Element);  // Expandir/Minimizar si es posible/necesario.
FTXUI_EXPORT(DOM) Element flex_grow(Element);    // Expandir elemento si es posible.
FTXUI_EXPORT(DOM) Element flex_shrink(Element);  // Minimizar elemento si es necesario.
FTXUI_EXPORT(DOM) Decorator flex_factor(int grow, int shrink);
FTXUI_EXPORT(DOM) Decorator flex_grow_factor(int grow);
FTXUI_EXPORT(DOM) Decorator flex_shrink_factor(int shrink);
 
FTXUI_EXPORT(DOM)
Element xflex(Element);  // Expandir/Minimizar si es posible/necesario en el eje X.
FTXUI_EXPORT(DOM)
Element xflex_grow(Element);  // Expandir elemento si es posible en el eje X.
FTXUI_EXPORT(DOM)
Element xflex_shrink(Element);  // Minimizar elemento si es necesario en el eje X.
FTXUI_EXPORT(DOM) Decorator xflex_factor(int grow, int shrink);
FTXUI_EXPORT(DOM) Decorator xflex_grow_factor(int grow);
FTXUI_EXPORT(DOM) Decorator xflex_shrink_factor(int shrink);
 
FTXUI_EXPORT(DOM)
Element yflex(Element);  // Expandir/Minimizar si es posible/necesario en el eje Y.
FTXUI_EXPORT(DOM)
Element yflex_grow(Element);  // Expandir elemento si es posible en el eje Y.
FTXUI_EXPORT(DOM)
Element yflex_shrink(Element);  // Minimizar elemento si es necesario en el eje Y.
FTXUI_EXPORT(DOM) Decorator yflex_factor(int grow, int shrink);
FTXUI_EXPORT(DOM) Decorator yflex_grow_factor(int grow);
FTXUI_EXPORT(DOM) Decorator yflex_shrink_factor(int shrink);
 
FTXUI_EXPORT(DOM) Element notflex(Element);  // Restablecer el atributo flex.
FTXUI_EXPORT(DOM) Element filler();          // Un elemento expandible en blanco.
 
// -- Anulación de tamaño;
enum WidthOrHeight : uint8_t { WIDTH, HEIGHT };
enum Constraint : uint8_t { LESS_THAN, EQUAL, GREATER_THAN };
FTXUI_EXPORT(DOM) Decorator size(WidthOrHeight, Constraint, int value);
 
// --- Marco ---
// Un marco es un área desplazable. El área interna es potencialmente más grande que
// la externa. El área interna se desplaza para hacer visible el
// elemento enfocado.
FTXUI_EXPORT(DOM) Element frame(Element);
FTXUI_EXPORT(DOM) Element xframe(Element);
FTXUI_EXPORT(DOM) Element yframe(Element);
FTXUI_EXPORT(DOM) Element focus(Element);
FTXUI_EXPORT(DOM) Element select(Element e);  // Obsoleto - Alias para focus.
 
// --- Cursor ---
// Son similares a `focus`, pero también cambian la forma del cursor.
FTXUI_EXPORT(DOM) Element focusCursorBlock(Element);
FTXUI_EXPORT(DOM) Element focusCursorBlockBlinking(Element);
FTXUI_EXPORT(DOM) Element focusCursorBar(Element);
FTXUI_EXPORT(DOM) Element focusCursorBarBlinking(Element);
FTXUI_EXPORT(DOM) Element focusCursorUnderline(Element);
FTXUI_EXPORT(DOM) Element focusCursorUnderlineBlinking(Element);
 
// --- Varios ---
FTXUI_EXPORT(DOM) Element vscroll_indicator(Element);
FTXUI_EXPORT(DOM) Element hscroll_indicator(Element);
FTXUI_EXPORT(DOM) Decorator reflect(Box& box);
// Antes de dibujar el |element| limpiar el píxel de abajo. Esto es útil en
// combinación con dbox.
FTXUI_EXPORT(DOM) Element clear_under(Element element);
 
// --- Utilidad --------------------------------------------------------------------
FTXUI_EXPORT(DOM) Element hcenter(Element);
FTXUI_EXPORT(DOM) Element vcenter(Element);
FTXUI_EXPORT(DOM) Element center(Element);
FTXUI_EXPORT(DOM) Element align_right(Element);
FTXUI_EXPORT(DOM) Element nothing(Element element);
 
namespace Dimension {
FTXUI_EXPORT(DOM) Dimensions Fit(Element&, bool extend_beyond_screen = false);
}  // namespace Dimension
 
}  // namespace ftxui
 
// Hace que el contenedor pueda tomar cualquier número de hijos como entrada.
#include "ftxui/dom/take_any_args.hpp"
 
// Incluir definiciones antiguas usando wstring.
#include "ftxui/dom/deprecated.hpp"
#endif  // FTXUI_DOM_ELEMENTS_HPP

texto

El widget más simple. Muestra un texto.

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

I am a piece of text.

vtext

Salida del terminal:

vtext("HELLO");

Salida del terminal:

H
E
L
L
O

párrafo

Similar a ftxui::text, pero las palabras individuales se ajustan a lo largo de múltiples líneas, dependiendo del ancho de su contenedor.

Código de ejemplo:

paragraph("A very long text")

ezgif com-gif-maker (4)

Para un ejemplo más detallado, consulte ejemplo detallado. Párrafo también incluye una serie de otras variantes como se muestra a continuación:

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);
}

borde

Añade un borde alrededor de un elemento.

Salida del terminal:

border(text("The element"))

Salida del terminal:

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

‍[!nota] Puedes lograr el mismo comportamiento usando el operador pipe.

Código:
text("El elemento") | border

El borde también viene en una variedad de estilos como se muestra a continuación:

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(Cell);
}

ventana

Una ftxui::window es un ftxui::border, pero con una cabecera adicional. Para añadir una ventana alrededor de un elemento, envuélvalo y especifique una cadena como cabecera. Código:

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

Salida del terminal:

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

separador

Muestra una línea vertical/horizontal para dividir visualmente el contenido de un contenedor en dos.

Salida del terminal:

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

Salida del terminal:

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

Los separadores vienen en una variedad de estilos como se muestra a continuación:

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

medidor

Este es un elemento visual que representa una proporción de progreso.

Salida del terminal:

border(gauge(0.5))

Salida del terminal:

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

Los medidores pueden mostrarse en muchas orientaciones como se muestra a continuación:

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);
}

gráfico

Vea:

Element graph(GraphFunction);

Colores

La mayoría de las consolas de terminal pueden mostrar texto y fondos de colores. FTXUI soporta todas las paletas de colores:

Decorator color(Color);

Decorator bgcolor(Color);

Galería de colores:

Paleta16

En la mayoría de los terminales se admiten los siguientes colores:

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

Ejemplo de uso de los colores anteriores usando el operador pipe:

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

Paleta256

En terminales que soportan 256 colores.

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

ColorVerdadero

En terminales que soportan TrueColor, puedes usar directamente el espacio de color RGB de 24 bits:

Usa los constructores a continuación para especificar los valores RGB o HSV para tu color:

Hay dos constructores:

ftxui::Color::RGB(uint8_t red, uint8_t green, uint8_t blue);

ftxui::Color::HSV(uint8_t hue, uint8_t saturation, uint8_t value);

DegradadoLineal

FTXUI soporta degradado lineal. Ya sea en primer plano o en segundo plano.

Decorator color(const LinearGradient&);

Decorator bgcolor(const LinearGradient&);

Un ftxui::LinearGradient se define por un ángulo en grados y una lista de paradas de color.

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

También puedes usar constructores simplificados:

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

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

Ver demostración.

Estilo

Además de texto y fondos de colores. Muchos terminales soportan efectos de texto como: 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);

Ejemplo

Para usar estos efectos, simplemente envuelve tus elementos con el efecto deseado:

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

Alternativamente, usa el operador pipe para encadenarlo en tu elemento:

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

Diseño

Permite que los elementos se organicen de las siguientes maneras:

Horizontalmente con ftxui::hbox
Verticalmente con ftxui::vbox
Dentro de una cuadrícula con ftxui::gridbox
Envuelto en una dirección usando ftxui::flexbox.

Ejemplo usando ftxui::hbox, ftxui::vbox y ftxui::filler.

Ejemplo usando ftxui::gridbox:

Ejemplo usando flexbox:

Consulta este ejemplo y la demostración asociada.

El elemento también puede volverse flexible usando el decorador ftxui::flex.

Salida del terminal:

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

Salida en la terminal:

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

Salida del terminal:

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

Salida del terminal:

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

Tabla

Permite un formato sencillo de datos en una tabla visual ordenada.

Ejemplo básico:

auto table = Table({
  {"Planet", "Radius", "Mass"},
  {"Mercury", "2440", "0.330"},
  {"Venus", "6052", "4.87"},
  {"Earth", "6371", "5.97"},
  {"Mars", "3390", "0.642"},
});
 
table.SelectAll().Border(LIGHT);
table.SelectRow(0).Decorate(bold);
table.SelectRow(0).SeparatorVertical(LIGHT);
table.SelectRow(0).Border(DOUBLE);
 
auto document = table.Render();

Ejemplo de código:

Selección y estilo

Puede seleccionar partes de la tabla y aplicarles decoradores o bordes. Los métodos de selección incluyen:

ftxui::TableSelection::SelectAll();
ftxui::TableSelection::SelectCell(column, row);
ftxui::TableSelection::SelectRow(row_index);
ftxui::TableSelection::SelectRows(row_min, row_max);
ftxui::TableSelection::SelectColumn(column_index);
ftxui::TableSelection::SelectColumns(column_min, column_max);
ftxui::TableSelection::SelectRectangle(column_min, column_max, row_min, row_max);

Una vez hecha una selección, puede aplicar:

ftxui::TableSelection::Decorate(Decorator); // Apply a decorator to the whole selection (cells and borders).
ftxui::TableSelection::DecorateCells(Decorator); // Apply a decorator only to the cells.
ftxui::TableSelection::Border(BorderStyle); // Add a border around the selection.
ftxui::TableSelection::Separator(BorderStyle); // 

Bordes coloreados

También puede aplicar decoradores específicamente a bordes y separadores:

// Apply a red border to the whole table.
table.SelectAll().Border(LIGHT, color(Color::Red));
 
// Apply a blue separator to the first row.
table.SelectRow(0).SeparatorVertical(LIGHT, color(Color::Blue));

Los siguientes métodos están disponibles para una decoración de bordes detallada:

ftxui::TableSelection::DecorateBorder(Decorator); // Apply a decorator to all borders of the selection.
ftxui::TableSelection::DecorateBorderLeft(Decorator); // Apply a decorator to the left border of the selection.
ftxui::TableSelection::DecorateBorderRight(Decorator); // Apply a decorator to the right border of the selection.
ftxui::TableSelection::DecorateBorderTop(Decorator); // Apply a decorator to the top border of the selection.
ftxui::TableSelection::DecorateBorderBottom(Decorator); // Apply a decorator to the bottom border of the selection.
ftxui::TableSelection::DecorateSeparator(Decorator); // Apply a decorator to all separators of the selection.
ftxui::TableSelection::DecorateSeparatorVertical(Decorator); // Apply a decorator to all vertical separators of the selection.
ftxui::TableSelection::DecorateSeparatorHorizontal(Decorator); // Apply a decorator to all horizontal separators of the selection.

Lienzo

Ver la API <ftxui/dom/canvas.hpp>

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

El dibujo se puede realizar en un ftxui::Canvas, usando caracteres braille, de bloque o simples:

Ejemplo simple:

Ejemplo complejo:

ezgif com-gif-maker (3)

Table of Contents

texto

vtext

vtext

párrafo

borde

ventana

separador

medidor

gráfico

Colores

Paleta16

Paleta256

ColorVerdadero

DegradadoLineal

Estilo

Diseño

Tabla

Selección y estilo

Bordes coloreados

Lienzo