Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up

💻 C++ Functional Terminal User Interface. ❤️

License

NotificationsYou must be signed in to change notification settings

ArthurSonzogni/FTXUI

Repository files navigation

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 by1andReact
  • Simple and elegant syntax (in my opinion)
  • Keyboard & mouse navigation.
  • Support forUTF8 andfullwidth 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 byexamples, andtutorials
  • 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

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 withhbox
  • vertically withvbox
  • inside a grid withgridbox
  • wrap along one direction using theflexbox.

Element can become flexible using the theflex decorator.

Example usinghbox,vbox andfiller.

image

Example using gridbox:

image

Example using flexbox:

image

See also thisdemo.

Style

An element can be decorated using the functions:

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

Example

image

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

Colors

FTXUI support every color palette:

Colorgallery: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 usingtext("content").

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

Elementparagraph(std::string text);ElementparagraphAlignLeft(std::string text);ElementparagraphAlignRight(std::string text);ElementparagraphAlignCenter(std::string text);ElementparagraphAlignJustify(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:

Simpleexample:

image

Complexexamples:

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:

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

Utilization

It ishighly 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


[8]ページ先頭

©2009-2025 Movatter.jp