ContextQMD
Back to Ftxui

README

README.md

6.1.919.8 KB
Original Source
<p align="center"> </img>

<a href="#"></img></a> <a href="http://opensource.org/licenses/MIT"></img></a> <a href="#"></img></a> <a href="#"></img></a> <a href="#"></img></a> <a href="https://github.com/ArthurSonzogni/FTXUI/graphs/contributors"></img></a>

<a href="https://github.com/ArthurSonzogni/FTXUI/issues"></img></a> <a href="https://repology.org/project/ftxui/versions"></a> <a href="https://codecov.io/gh/ArthurSonzogni/FTXUI">

</a>

<a href="https://arthursonzogni.github.io/FTXUI/">Documentation</a> · <a href="https://github.com/ArthurSonzogni/FTXUI/issues">Report a Bug</a> · <a href="https://arthursonzogni.github.io/FTXUI/examples/">Examples</a> . <a href="https://github.com/ArthurSonzogni/FTXUI/issues">Request Feature</a> · <a href="https://github.com/ArthurSonzogni/FTXUI/pulls">Send a Pull Request</a>

Doc: <a href="https://github.com/ArthurSonzogni/">English</a> | <a href="https://arthursonzogni.github.io/FTXUI/fr/index.html">Français</a> | <a href="https://arthursonzogni.github.io/FTXUI/es/index.html">Español</a> | <a href="https://arthursonzogni.github.io/FTXUI/zh-TW/index.html">繁體中文</a> | <a href="https://arthursonzogni.github.io/FTXUI/zh-CH/index.html">简体中文</a> | <a href="https://arthursonzogni.github.io/FTXUI/ja/index.html">日本語</a> |

</p>

FTXUI

<i>Functional Terminal (X) User interface</i>

A simple cross-platform C++ library for terminal based user interfaces!

Feature

Documentation

Example

cpp
    vbox({
      hbox({
        text("one") | border,
        text("two") | border | flex,
        text("three") | border | flex,
      }),

      gauge(0.25) | color(Color::Red),
      gauge(0.50) | color(Color::White),
      gauge(0.75) | color(Color::Blue),
    });

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>

<details><summary>Layout</summary>

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 flex decorator.

Example using hbox, vbox and filler.

Example using gridbox:

Example using flexbox:

See also this demo.

</details> <details><summary>Style</summary>

An element can be decorated using the functions:

  • bold
  • italic
  • dim
  • inverted
  • underlined
  • underlinedDouble
  • blink
  • strikethrough
  • color
  • bgcolor
  • hyperlink

Example

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

</details> <details><summary>Colors</summary>

FTXUI support every color palette:

Color gallery:

</details> <details><summary>Border and separator</summary>

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

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

Demo:

</details> <details><summary>Text and paragraph</summary>

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

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

cpp
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

</details> <details><summary>Table</summary>

A class to easily style a table of data.

Example:

</details> <details><summary>Canvas</summary>

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

Simple example:

Complex examples:

</details>

Component

ftxui/component produces dynamic UI, reactive to the user's input. It defines a set of ftxui::Component. A component reacts to Events (keyboard, mouse, resize, ...) and Renders as an Element (see previous section).

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

<details><summary>Gallery</summary>

Gallery of multiple components. (demo)

</details> <details><summary>Radiobox</summary>

Example:

</details> <details><summary>Checkbox</summary>

Example:

</details> <details><summary>Input</summary>

Example:

</details> <details><summary>Toggle</summary>

Example:

</details> <details><summary>Slider</summary>

Example:

</details> <details><summary>Menu</summary>

Example:

</details> <details><summary>ResizableSplit</summary>

Example:

</details> <details><summary>Dropdown</summary>

Example:

</details> <details><summary>Tab</summary>

Vertical:

Horizontal:

</details>

Libraries for FTXUI

Project using FTXUI

Feel free to add your projects here:

cpp-best-practices/game_jam

Several games using the FTXUI have been made during the Game Jam:

Build using CMake

It is highly recommended to use CMake FetchContent to depend on FTXUI so you may specify which commit you would like to depend on.

cmake
include(FetchContent)
FetchContent_Declare(ftxui
  GIT_REPOSITORY https://github.com/ArthurSonzogni/ftxui
  GIT_TAG v6.1.9
)
FetchContent_MakeAvailable(ftxui)

target_link_libraries(your_target PRIVATE
    # Chose a submodule
    ftxui::component
    ftxui::dom
    ftxui::screen
)

Build using Bazel

MODULE.bazel

starlark
bazel_dep(
    name = "ftxui",
    version = "v6.1.9",
)

BUILD.bazel

starlark
cc_binary(
    name = "your_target",
    srcs = ["your_source.cc"],
    deps = [
        # Choose submodules
        "@ftxui//:component",
        "@ftxui//:dom",
        "@ftxui//:screen",
        
        # Or use the single ftxui target (includes all modules)
        # "@ftxui//:ftxui",
    ],
)

Build with something else:

If you don't, FTXUI may be used from the following packages:

If you choose to build and link FTXUI yourself, ftxui-component must be first in the linking order relative to the other FTXUI libraries, i.e.

bash
g++ . . . -lftxui-component -lftxui-dom -lftxui-screen . . .

To build FTXUI with modules, check documentation

Contributors

<a href="https://github.com/ArthurSonzogni/FTXUI/graphs/contributors"> </a>