💻 C++ Functional Terminal User Interface. ❤️
Go to file
Mikołaj Lubiak 99df1ac8ba
Some checks failed
Build / Tests (cl, Windows MSVC, windows-latest) (push) Waiting to run
Build / Create release (push) Blocked by required conditions
Build / Build packages (build/ftxui*Darwin*, macos-latest) (push) Blocked by required conditions
Build / Build packages (build/ftxui*Linux*, ubuntu-latest) (push) Blocked by required conditions
Build / Build packages (build/ftxui*Win64*, windows-latest) (push) Blocked by required conditions
Build / Tests (gcc, gcov, Linux GCC, ubuntu-latest) (push) Failing after 1m46s
Build / Tests (llvm, llvm-cov gcov, Linux Clang, ubuntu-latest) (push) Failing after 2m27s
Build / documentation (push) Failing after 1m30s
CodeQL / Analyze (cpp) (push) Failing after 38s
Add SliderWithCallback component (#938)
Add SliderOption::on_change.

Useful to observe a change to the value.

Signed-off-by: Mikołaj Lubiak <lubiak@proton.me>
Co-authored-by: ArthurSonzogni <sonzogniarthur@gmail.com>
2024-10-29 08:03:59 +01:00
.github Fix CQ failures. 2024-08-17 12:01:43 +02:00
cmake Added -fPIC compile option (#913) 2024-08-11 19:17:57 +02:00
doc Add example to use system ftxui 2024-01-26 18:32:44 +01:00
examples Add scrollbar example. 2024-08-18 10:46:41 +02:00
include/ftxui Add SliderWithCallback component (#938) 2024-10-29 08:03:59 +01:00
src/ftxui Add SliderWithCallback component (#938) 2024-10-29 08:03:59 +01:00
tools Move copyright to the top of files. 2023-08-19 13:57:01 +02:00
.clang-format Variou details: 2020-08-28 23:54:25 +02:00
.clang-tidy Apply Clang-tidy (#918) 2024-08-16 11:19:51 +02:00
.gitignore Separate a reusable Image class from Screen (#834) 2024-04-27 11:03:44 +02:00
CHANGELOG.md Add SliderWithCallback component (#938) 2024-10-29 08:03:59 +01:00
CMakeLists.txt Generate compile commands for clangd. (#855) 2024-05-01 14:32:22 +02:00
codecov.yml Bring back C++17 minimal requirement. (#475) 2022-09-03 13:03:04 +02:00
flake.lock update nix and add dev shell (#769) 2023-10-23 08:48:50 +02:00
flake.nix update nix and add dev shell (#769) 2023-10-23 08:48:50 +02:00
ftxui.pc.in Add pkg-config file. (#642) 2023-05-17 10:50:47 +02:00
iwyu.imp Feature: hyperlink support. (#665) 2023-06-04 21:06:19 +02:00
LICENSE Add LICENSE. Add take_any_args. 2019-01-06 16:14:19 +01:00
README.md add ftxui-image-view (#924) 2024-08-27 14:35:15 +02:00

Demo image

latest packaged version(s)
Documentation · Report a Bug · Examples . Request Feature · Send a Pull Request

FTXUI

Functional Terminal (X) User interface

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

Feature

  • Functional style. Inspired by 1 and React
  • Simple and elegant syntax (in my opinion)
  • Keyboard & mouse navigation.
  • Support for UTF8 and fullwidth chars (→ 测试)
  • Support for animations. Demo 1, Demo 2
  • Support for drawing. Demo
  • No dependencies
  • Cross platform: Linux/MacOS (main target), WebAssembly, Windows (Thanks to contributors!).
  • Learn by examples, and tutorials
  • Multiple packages: CMake FetchContent (preferred), vcpkg, pkgbuild, conan.
  • Good practices: documentation, tests, fuzzers, performance tests, automated CI, automated packaging, etc...

Documentation

Example

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

image

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
  • underlinedDouble
  • blink
  • strikethrough
  • color
  • bgcolor
  • hyperlink

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

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>

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)

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:

Utilization

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

include(FetchContent)

FetchContent_Declare(ftxui
  GIT_REPOSITORY https://github.com/ArthurSonzogni/ftxui
  GIT_TAG v5.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, FTXUI may be used from the following packages:

Packaging status

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.

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

Contributors