Skip to content
Snippets Groups Projects
Select Git revision
0 results

README.md

Blame
    • README.md 13.92 KiB

    Demo image

    Documentation · Report a Bug · Examples . Request Feature · Send a Pull Request

    FTXUI

    Functional Terminal (X) User interface

    A simple C++ library for terminal based user interfaces!

    Feature

    Documentation

    Operating systems

    This is expected to be cross platform. This supports / tests:

    • WebAssembly
    • Linux
    • MacOS
    • Windows

    Example

      vbox({
    hbox({
      text("left") | border,
      text("middle") | border | flex,
      text("right") | border,
    }),
    gauge(0.5) | border,
  });
    ┌────┐┌───────────────────────────────────────────────────────────────┐┌─────┐
│left││middle                                                         ││right│
└────┘└───────────────────────────────────────────────────────────────┘└─────┘
┌────────────────────────────────────────────────────────────────────────────┐
│██████████████████████████████████████                                      │
└────────────────────────────────────────────────────────────────────────────┘

    Short gallery

    DOM

    This module defines a hierarchical set of Element. An element manages layout and can be responsive to the terminal dimensions.

    They are declared in <ftxui/dom/elements.hpp>

    Layout

    Element can be arranged together:

    • horizontally with hbox
    • vertically with vbox
    • inside a grid with gridbox
    • wrap along one direction using the flexbox.

    Element can become flexible using the the flex decorator.

    Example using hbox, vbox and filler.

    image

    Example using gridbox:

    image

    Example using flexbox:

    image

    See also this demo.

    Style

    An element can be decorated using the functions:

    • bold
    • dim
    • inverted
    • underlined
    • blink
    • color
    • bgcolor

    Example

    image

    FTXUI supports the pipe operator. It means: decorator1(decorator2(element)) and element | decorator1 | decorator2 can be used.

    Colors

    FTXUI support every color palette:

    Color gallery: image

    Border and separator

    Use decorator border and element separator() to subdivide your UI:

    auto document = vbox({
    text("top"),
    separator(),
    text("bottom"),
}) | border;

    Demo:

    image

    Text and paragraph

    A simple piece of text is represented using text("content").

    To support text wrapping following spaces the following functions are provided:

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

    Paragraph example

    ezgif com-gif-maker (4)

    Table

    A class to easily style a table of data.

    Example:

    image

    Canvas

    Drawing can be made on a Canvas, using braille, block, or simple characters:

    Simple example:

    image

    Complex examples:

    ezgif com-gif-maker (3)

    Component

    The ftxui/component is needed when you want to produce dynamic UI, reactive to the user's input. It defines a set of ftxui::Component. A component reacts to Events (keyboard, mouse, resize, ...) and Render Element (see previous section).

    Prebuilt components are declared in <ftxui/component/component.hpp>

    Gallery

    Gallery of multiple components. (demo)

    image

    Radiobox

    Example:

    image

    Checkbox

    Example:

    image

    Input

    Example:

    image

    Toggle

    Example:

    image

    Slider

    Example:

    image

    Menu

    Example:

    image

    ResizableSplit

    Example:

    ezgif com-gif-maker

    Dropdown

    Example:

    youtube-video-gif (3)

    Tab

    Vertical:

    ezgif com-gif-maker (1)

    Horizontal:

    ezgif com-gif-maker (2)

    Project using FTXUI

    Feel free to add your projects here:

    Hosted on

    External package

    It is highly recommended to use CMake FetchContent to depend on FTXUI. This way you can specify which commit you would like to depend on.

    include(FetchContent)

FetchContent_Declare(ftxui
  GIT_REPOSITORY https://github.com/ArthurSonzogni/ftxui
  GIT_TAG v2.0.0
)

FetchContent_GetProperties(ftxui)
if(NOT ftxui_POPULATED)
  FetchContent_Populate(ftxui)
  add_subdirectory(${ftxui_SOURCE_DIR} ${ftxui_BINARY_DIR} EXCLUDE_FROM_ALL)
endif()

    If you don't, the following packages have been created:

    Contributors