index

# FTXUI

Introduction

Introduction

indexpage_1introduction
Configure

Configure

indexpage_1configure
Using CMake and find_package

Using CMake and find_package

indexpage_1build-cmake-find-package
Using CMake and FetchContent

Using CMake and FetchContent

indexpage_1build-cmake
Build

Build

indexpage_1autotoc_md126
List of modules.

List of modules.

indexpage_1modules
screen

screen

indexpage_1module-screen
dom

dom

indexpage_1module-dom
text

text

indexpage_1dom-text
vtext

vtext

indexpage_1dom-vtext
paragraph

paragraph

indexpage_1dom-paragraph
border

border

indexpage_1dom-border
window

window

indexpage_1dom-window
separator

separator

indexpage_1dom-separator
gauge

gauge

indexpage_1dom-gauge
graph

graph

indexpage_1dom-graph
Colors

Colors

indexpage_1dom-colors
Palette16

Palette16

indexpage_1dom-colors-palette-16
Palette256

Palette256

indexpage_1dom-colors-palette-256
TrueColor

TrueColor

indexpage_1dom-colors-true-color
LinearGradient

LinearGradient

indexpage_1dom-linear-gradient
Style

Style

indexpage_1dom-style
Layout

Layout

indexpage_1dom-layout
Table

Table

indexpage_1dom-table
Canvas

Canvas

indexpage_1dom-canvas
component

component

indexpage_1module-component
Input

Input

indexpage_1component-input
Filtered input

Filtered input

indexpage_1autotoc_md127
Menu

Menu

indexpage_1component-menu
Toggle

Toggle

indexpage_1component-toggle
CheckBox

CheckBox

indexpage_1component-checkbox
RadioBox

RadioBox

indexpage_1component-radiobox
Dropdown

Dropdown

indexpage_1component-dropdown
Slider

Slider

indexpage_1component-slider
Renderer

Renderer

indexpage_1component-renderer
CatchEvent

CatchEvent

indexpage_1component-catchevent
Collapsible

Collapsible

indexpage_1component-collapsible
Maybe

Maybe

indexpage_1component-maybe
Container

Container

indexpage_1component-container
Horizontal

Horizontal

indexpage_1component-horizontal
Vertical

Vertical

indexpage_1component-vertical
Tab

Tab

indexpage_1component-tab
ResizableSplit

ResizableSplit

indexpage_1component-resizable-split
Force a frame redraw.

Force a frame redraw.

indexpage_1component-force-redraw

# Introduction

Welcome to the FTXUI documentation!

This is a brief tutorial. You are also encouraged to self-learn by reading the examples.

Short example

To build a single frame, you need create an `ftxui::Element`, and display it on a `ftxui::Screen`.

main.cpp

    #include<ftxui/dom/elements.hpp>
    #include<ftxui/screen/screen.hpp>
    #include<iostream>

    intmain(void){
    usingnamespaceftxui;

    //Definethedocument
    Elementdocument=
    hbox({
    text("left")|border,
    text("middle")|border|flex,
    text("right")|border,
    });

    autoscreen=Screen::Create(
    Dimension::Full(),//Width
    Dimension::Fit(document)//Height
    );
    Render(screen,document);
    screen.Print();

    returnEXIT_SUCCESS;
    }

output

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

## Configure

### Using CMake and find_package

Assuming FTXUI is available or installed on the system.

CMakeLists.txt

    cmake_minimum_required(VERSION3.11)
    find_package(ftxui5REQUIRED)
    project(ftxui-starterLANGUAGESCXXVERSION1.0.0)
    add_executable(ftxui-startersrc/main.cpp)
    target_link_libraries(ftxui-starter
    PRIVATEftxui::screen
    PRIVATEftxui::dom
    PRIVATEftxui::component#Notneededforthisexample.
    )

### Using CMake and FetchContent

If you want to fetch FTXUI using cmake:

CMakeLists.txt

    cmake_minimum_required(VERSION3.11)

    include(FetchContent)
    set(FETCHCONTENT_UPDATES_DISCONNECTEDTRUE)
    FetchContent_Declare(ftxui
    GIT_REPOSITORYhttps://github.com/ArthurSonzogni/ftxui
    GIT_TAGmain#Important:Specifyaversionoracommithashhere.
    )
    FetchContent_MakeAvailable(ftxui)

    project(ftxui-starterLANGUAGESCXXVERSION1.0.0)
    add_executable(ftxui-startersrc/main.cpp)
    target_link_libraries(ftxui-starter
    PRIVATEftxui::screen
    PRIVATEftxui::dom
    PRIVATEftxui::component#Notneededforthisexample.
    )

## Build

    mkdirbuild&&cdbuild
    cmake..
    make
    ./main

# List of modules.

The project is comprised of 3 modules:

1. ftxui/screen defines a `ftxui::Screen`, a grid of `ftxui::Pixel`.

2. ftxui/dom is the main module. It defines a hierarchical set of `ftxui::Element`. An element draws something on the `ftxui::Screen`. It is responsive to the size of its container.

3. ftxui/component The module is required if your program needs to respond to user input. It defines a set of `ftxui::Component`. These components can be utilized to navigate using the arrow keys and/or cursor. There are several builtin widgets like checkbox/inputbox/etc to interact with. You can combine them, or even define your own custom components.

# screen

This is the visual element of the program. It defines a `ftxui::Screen`, which is a grid of `ftxui::Pixel`. A Pixel represents a Unicode character and its associated style (bold, italic, colors, etc.). The screen can be printed as a string using `ftxui::Screen::ToString()`. The following example highlights this process:

    #include<ftxui/screen/screen.hpp>
    #include<iostream>

    intmain(void){
    usingnamespaceftxui;
    autoscreen=Screen::Create(Dimension::Fixed(32),Dimension::Fixed(10));

    auto&pixel=screen.PixelAt(9,9);
    pixel.character=U'A';
    pixel.bold=true;
    pixel.foreground_color=Color::Blue;

    std::cout<<screen.ToString();
    returnEXIT_SUCCESS;
    }

# dom

This module defines a hierarchical set of `ftxui::Element`. An element manages the layout and can be responsive to the terminal dimension changes. Note the following example where this module is used to create a simple layout with a number of operators:

Example:

    //Definethedocument
    Elementdocument=vbox({
    text("Thewindow")|bold|color(Color::Blue),
    gauge(0.5)
    text("Thefooter")
    });

    //Addaborder,bycallingthe`ftxui::border`decoratorfunction.
    document=border(document);

    //Addanotherborder,usingthepipeoperator.
    document=document|border.

    //Addanotherborder,usingthe|=operator.
    document|=border

List of elements

The list of all elements are included and can be accessed by including the corresponding header file:

    #include<ftxui/dom/elements.hpp>

    //Copyright2020ArthurSonzogni.Allrightsreserved.
    //UseofthissourcecodeisgovernedbytheMITlicensethatcanbefoundin
    //theLICENSEfile.
    #ifndefFTXUI_DOM_ELEMENTS_HPP
    #defineFTXUI_DOM_ELEMENTS_HPP

    #include<functional>
    #include<memory>

    #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/ref.hpp"

    namespaceftxui{
    classNode;
    usingElement=std::shared_ptr<Node>;
    usingElements=std::vector<Element>;
    usingDecorator=std::function<Element(Element)>;
    usingGraphFunction=std::function<std::vector<int>(int,int)>;

    enumBorderStyle{
    LIGHT,
    DASHED,
    HEAVY,
    DOUBLE,
    ROUNDED,
    EMPTY,
    };

    //Pipeelementsintodecoratortogethers.
    //Forinstancethenextlinesareequivalents:
    //->text("ftxui")|bold|underlined
    //->underlined(bold(text("FTXUI")))
    Elementoperator|(Element,Decorator);
    Element&operator|=(Element&,Decorator);
    Elementsoperator|(Elements,Decorator);
    Decoratoroperator|(Decorator,Decorator);

    //---Widget---
    Elementtext(std::stringtext);
    Elementvtext(std::stringtext);
    Elementseparator();
    ElementseparatorLight();
    ElementseparatorDashed();
    ElementseparatorHeavy();
    ElementseparatorDouble();
    ElementseparatorEmpty();
    ElementseparatorStyled(BorderStyle);
    Elementseparator(Pixel);
    ElementseparatorCharacter(std::string);
    ElementseparatorHSelector(floatleft,
    floatright,
    Colorunselected_color,
    Colorselected_color);
    ElementseparatorVSelector(floatup,
    floatdown,
    Colorunselected_color,
    Colorselected_color);
    Elementgauge(floatprogress);
    ElementgaugeLeft(floatprogress);
    ElementgaugeRight(floatprogress);
    ElementgaugeUp(floatprogress);
    ElementgaugeDown(floatprogress);
    ElementgaugeDirection(floatprogress,Directiondirection);
    Elementborder(Element);
    ElementborderLight(Element);
    ElementborderDashed(Element);
    ElementborderHeavy(Element);
    ElementborderDouble(Element);
    ElementborderRounded(Element);
    ElementborderEmpty(Element);
    DecoratorborderStyled(BorderStyle);
    DecoratorborderStyled(BorderStyle,Color);
    DecoratorborderStyled(Color);
    DecoratorborderWith(constPixel&);
    Elementwindow(Elementtitle,Elementcontent,BorderStyleborder=ROUNDED);
    Elementspinner(intcharset_index,size_timage_index);
    Elementparagraph(conststd::string&text);
    ElementparagraphAlignLeft(conststd::string&text);
    ElementparagraphAlignRight(conststd::string&text);
    ElementparagraphAlignCenter(conststd::string&text);
    ElementparagraphAlignJustify(conststd::string&text);
    Elementgraph(GraphFunction);
    ElementemptyElement();
    Elementcanvas(ConstRef<Canvas>);
    Elementcanvas(intwidth,intheight,std::function<void(Canvas&)>);
    Elementcanvas(std::function<void(Canvas&)>);

    //--Decorator---
    Elementbold(Element);
    Elementdim(Element);
    Elementitalic(Element);
    Elementinverted(Element);
    Elementunderlined(Element);
    ElementunderlinedDouble(Element);
    Elementblink(Element);
    Elementstrikethrough(Element);
    Decoratorcolor(Color);
    Decoratorbgcolor(Color);
    Decoratorcolor(constLinearGradient&);
    Decoratorbgcolor(constLinearGradient&);
    Elementcolor(Color,Element);
    Elementbgcolor(Color,Element);
    Elementcolor(constLinearGradient&,Element);
    Elementbgcolor(constLinearGradient&,Element);
    DecoratorfocusPosition(intx,inty);
    DecoratorfocusPositionRelative(floatx,floaty);
    Elementautomerge(Elementchild);
    Decoratorhyperlink(std::stringlink);
    Elementhyperlink(std::stringlink,Elementchild);
    ElementselectionStyleReset(Element);
    DecoratorselectionColor(Colorforeground);
    DecoratorselectionBackgroundColor(Colorforeground);
    DecoratorselectionForegroundColor(Colorforeground);
    DecoratorselectionStyle(std::function<void(Pixel&)>style);

    //---Layoutis
    //Horizontal,Verticalorstackedsetofelements.
    Elementhbox(Elements);
    Elementvbox(Elements);
    Elementdbox(Elements);
    Elementflexbox(Elements,FlexboxConfigconfig=FlexboxConfig());
    Elementgridbox(std::vector<Elements>lines);

    Elementhflow(Elements);//Helper:defaultflexboxwithrowdirection.
    Elementvflow(Elements);//Helper:defaultflexboxwithcolumndirection.

    //--Flexibility---
    //Definehowtosharetheremainingspacewhennotallofitisusedinsidea
    //container.
    Elementflex(Element);//Expand/Minimizeifpossible/needed.
    Elementflex_grow(Element);//Expandelementifpossible.
    Elementflex_shrink(Element);//Minimizeelementifneeded.

    Elementxflex(Element);//Expand/Minimizeifpossible/neededonXaxis.
    Elementxflex_grow(Element);//ExpandelementifpossibleonXaxis.
    Elementxflex_shrink(Element);//MinimizeelementifneededonXaxis.

    Elementyflex(Element);//Expand/Minimizeifpossible/neededonYaxis.
    Elementyflex_grow(Element);//ExpandelementifpossibleonYaxis.
    Elementyflex_shrink(Element);//MinimizeelementifneededonYaxis.

    Elementnotflex(Element);//Resettheflexattribute.
    Elementfiller();//Ablankexpandableelement.

    //--Sizeoverride;
    enumWidthOrHeight{WIDTH,HEIGHT};
    enumConstraint{LESS_THAN,EQUAL,GREATER_THAN};
    Decoratorsize(WidthOrHeight,Constraint,intvalue);

    //---Frame---
    //Aframeisascrollablearea.Theinternalareaispotentiallylargerthan
    //theexternalone.Theinternalareaisscrolledinordertomakevisiblethe
    //focusedelement.
    Elementframe(Element);
    Elementxframe(Element);
    Elementyframe(Element);
    Elementfocus(Element);
    Elementselect(Elemente);//Deprecated-Aliasforfocus.

    //---Cursor---
    //Thosearesimilarto`focus`,butalsochangetheshapeofthecursor.
    ElementfocusCursorBlock(Element);
    ElementfocusCursorBlockBlinking(Element);
    ElementfocusCursorBar(Element);
    ElementfocusCursorBarBlinking(Element);
    ElementfocusCursorUnderline(Element);
    ElementfocusCursorUnderlineBlinking(Element);

    //---Misc---
    Elementvscroll_indicator(Element);
    Elementhscroll_indicator(Element);
    Decoratorreflect(Box&box);
    //Beforedrawingthe|element|clearthepixelbelow.Thisisusefulin
    //combinaisonwithdbox.
    Elementclear_under(Elementelement);

    //---Util--------------------------------------------------------------------
    Elementhcenter(Element);
    Elementvcenter(Element);
    Elementcenter(Element);
    Elementalign_right(Element);
    Elementnothing(Elementelement);

    namespaceDimension{
    DimensionsFit(Element&,boolextend_beyond_screen=false);
    }//namespaceDimension

    }//namespaceftxui

    //Makecontainerabletotakeanynumberofchildrenasinput.
    #include"ftxui/dom/take_any_args.hpp"

    //Includeolddefinitionsusingwstring.
    #include"ftxui/dom/deprecated.hpp"
    #endif//FTXUI_DOM_ELEMENTS_HPP

## text

The most simple widget. It displays a text.

    text("Iamapieceoftext");

    Iamapieceoftext.

## vtext

Identical to `ftxui::text`, but displayed vertically.

Code:

    vtext("HELLO");

Terminal output:

    H
    E
    L
    L
    O

## paragraph

Similar to `ftxui::text`, but the individual word are wrapped along multiple lines, depending on the width of its container.

Sample Code:

    paragraph("Averylongtext")

For a more detailed example refer to detailed example. Paragraph also includes a number of other variants as shown below:

    Elementparagraph(std::stringtext);
    ElementparagraphAlignLeft(std::stringtext);
    ElementparagraphAlignRight(std::stringtext);
    ElementparagraphAlignCenter(std::stringtext);
    ElementparagraphAlignJustify(std::stringtext);

## border

Adds a border around an element.

Code:

    border(text("Theelement"))

Terminal output:

    ┌───────────┐
    │Theelement│
    └───────────┘

You can achieve the same behavior by using the pipe operator.

Code:

    text("Theelement")|border

Border also comes in a variety of styles as shown below:

    Elementborder(Element);
    ElementborderLight(Element);
    ElementborderHeavy(Element);
    ElementborderDouble(Element);
    ElementborderRounded(Element);
    ElementborderEmpty(Element);
    DecoratorborderStyled(BorderStyle);
    DecoratorborderWith(Pixel);

## window

A `ftxui::window` is a `ftxui::border`, but with an additional header. To add a window around an element, wrap it and specify a string as the header. Code:

    window("Thewindow",text("Theelement"))

Terminal output:

    ┌Thewindow─┐
    │Theelement│
    └───────────┘

## separator

Displays a vertical/horizontal line to visually split the content of a container in two.

Code:

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

Terminal output:

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

Separators come in a variety of flavors as shown below:

    Elementseparator(void);
    ElementseparatorLight();
    ElementseparatorHeavy();
    ElementseparatorDouble();
    ElementseparatorEmpty();
    ElementseparatorStyled(BorderStyle);
    Elementseparator(Pixel);
    ElementseparatorCharacter(std::string);
    ElementseparatorHSelector(floatleft,
    floatright,
    Colorbackground,
    Colorforeground);
    ElementseparatorVSelector(floatup,
    floatdown,
    Colorbackground,
    Colorforeground);

## gauge

It constitutes a gauge. It can be used to represent a progress bar.

Code:

    border(gauge(0.5))

Teminal output:

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

Gauges can be displayed in many orientations as shown below:

    Elementgauge(floatratio);
    ElementgaugeLeft(floatratio);
    ElementgaugeRight(floatratio);
    ElementgaugeUp(floatratio);
    ElementgaugeDown(floatratio);
    ElementgaugeDirection(floatratio,GaugeDirection);

## graph

See:

    Elementgraph(GraphFunction);

## Colors

Most terminal consoles can display colored text and colored backgrounds. FTXUI supports every color palette:

    Decoratorcolor(Color);
    Decoratorbgcolor(Color);

Color gallery:

### Palette16

On most terminals the following colors are supported:

- Default

- Black

- GrayDark

- GrayLight

- White

- Blue

- BlueLight

- Cyan

- CyanLight

- Green

- GreenLight

- Magenta

- MagentaLight

- Red

- RedLight

- Yellow

- YellowLight

Example use of the above colors using the pipe operator:

    text("Blueforeground")|color(Color::Blue);
    text("Bluebackground")|bgcolor(Color::Blue);
    text("Blackonwhite")|color(Color::Black)|bgcolor(Color::White);

### Palette256

On terminal supporting 256 colors.

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

### TrueColor

On terminal supporting trueColor, you can directly use the 24bit RGB color space:

Use the constructors below to specify the RGB or HSV values for your color:

There are two constructors:

    ftxui::Color::RGB(uint8_tred,uint8_tgreen,uint8_tblue);
    ftxui::Color::HSV(uint8_thue,uint8_tsaturation,uint8_tvalue);

## LinearGradient

FTXUI supports linear gradient. Either on the foreground or the background.

    Decoratorcolor(constLinearGradient&);
    Decoratorbgcolor(constLinearGradient&);

A `ftxui::LinearGradient` is defined by an angle in degree, and a list of color stops.

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

You can also use simplified constructors:

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

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

See demo.

## Style

In addition to colored text and colored backgrounds. Many terminals support text effects such as: `bold`, `italic`, `dim`, `underlined`, `inverted`, `blink`.

    Elementbold(Element);
    Elementitalic(Element);
    Elementdim(Element);
    Elementinverted(Element);
    Elementunderlined(Element);
    ElementunderlinedDouble(Element);
    Elementstrikethrough(Element);
    Elementblink(Element);
    Decoratorcolor(Color);
    Decoratorbgcolor(Color);
    Decoratorcolorgrad(LinearGradient);
    Decoratorbgcolorgrad(LinearGradient);

Example

To use these effects, simply wrap your elements with your desired effect:

    underlined(bold(text("Thistextisboldandunderlined")))

Alternatively, use the pipe operator to chain it on your element:

    text("Thistextisbold")|bold|underlined

## Layout

Enables elements to be arranged in the following ways:

- Horizontally with `ftxui::hbox`

- Vertically with `ftxui::vbox`

- Inside a grid with `ftxui::gridbox`

- Wrapped along one direction using the `ftxui::flexbox`.

Example using `ftxui::hbox`, `ftxui::vbox` and `ftxui::filler`.

Example using `ftxui::gridbox`:

Example using flexbox:

Checkout this example and the associated demo.

Element can also become flexible using the the `ftxui::flex` decorator.

Code:

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

Terminal output:

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

Code:

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

Terminal output:

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

## Table

Enables easy formatting of data into a neat table like visual form.

Code example:

## Canvas

See the API <ftxui/dom/canvas.hpp>

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

Drawing can be performed on a `ftxui::Canvas`, using braille, block, or simple characters:

Simple example:

Complex example:

# component

The `ftxui::component` module defines the logic that produces interactive components that respond to user events (keyboard, mouse, etc.).

A `ftxui::ScreenInteractive` defines a main loop that renders a component.

A `ftxui::Component` is a shared pointer to a `ftxui::ComponentBase`. The latter defines:

- `ftxui::ComponentBase::Render()`: How to render the interface.

- `ftxui::ComponentBase::OnEvent()`: How to react to events.

- `ftxui::ComponentBase::Add()`: Construct a parent/child relationship between two components. The tree of component is used to define how to navigate using the keyboard.

`ftxui::Element` are used to render a single frame.

`ftxui::Component` are used to render dynamic user interface, producing multiple frame, and updating its state on events.

Gallery of multiple components. (demo)

All predefined components are available in "ftxui/dom/component.hpp"

    //Copyright2021ArthurSonzogni.Allrightsreserved.
    //UseofthissourcecodeisgovernedbytheMITlicensethatcanbefoundin
    //theLICENSEfile.
    #ifndefFTXUI_COMPONENT_HPP
    #defineFTXUI_COMPONENT_HPP

    #include<functional>//forfunction
    #include<memory>//formake_shared,shared_ptr
    #include<utility>//forforward

    #include"ftxui/component/component_base.hpp"//forComponent,Components
    #include"ftxui/component/component_options.hpp"//forButtonOption,CheckboxOption,MenuOption
    #include"ftxui/dom/elements.hpp"//forElement
    #include"ftxui/util/ref.hpp"//forConstRef,Ref,ConstStringRef,ConstStringListRef,StringRef

    namespaceftxui{
    structButtonOption;
    structCheckboxOption;
    structEvent;
    structInputOption;
    structMenuOption;
    structRadioboxOption;
    structMenuEntryOption;

    template<classT,class...Args>
    std::shared_ptr<T>Make(Args&&...args){
    returnstd::make_shared<T>(std::forward<Args>(args)...);
    }

    //Pipeoperatortodecoratecomponents.
    usingComponentDecorator=std::function<Component(Component)>;
    usingElementDecorator=std::function<Element(Element)>;
    Componentoperator|(Componentcomponent,ComponentDecoratordecorator);
    Componentoperator|(Componentcomponent,ElementDecoratordecorator);
    Component&operator|=(Component&component,ComponentDecoratordecorator);
    Component&operator|=(Component&component,ElementDecoratordecorator);

    namespaceContainer{
    ComponentVertical(Componentschildren);
    ComponentVertical(Componentschildren,int*selector);
    ComponentHorizontal(Componentschildren);
    ComponentHorizontal(Componentschildren,int*selector);
    ComponentTab(Componentschildren,int*selector);
    ComponentStacked(Componentschildren);
    }//namespaceContainer

    ComponentButton(ButtonOptionoptions);
    ComponentButton(ConstStringReflabel,
    std::function<void()>on_click,
    ButtonOptionoptions=ButtonOption::Simple());

    ComponentCheckbox(CheckboxOptionoptions);
    ComponentCheckbox(ConstStringReflabel,
    bool*checked,
    CheckboxOptionoptions=CheckboxOption::Simple());

    ComponentInput(InputOptionoptions={});
    ComponentInput(StringRefcontent,InputOptionoptions={});
    ComponentInput(StringRefcontent,
    StringRefplaceholder,
    InputOptionoptions={});

    ComponentMenu(MenuOptionoptions);
    ComponentMenu(ConstStringListRefentries,
    int*selected_,
    MenuOptionoptions=MenuOption::Vertical());
    ComponentMenuEntry(MenuEntryOptionoptions);
    ComponentMenuEntry(ConstStringReflabel,MenuEntryOptionoptions={});

    ComponentRadiobox(RadioboxOptionoptions);
    ComponentRadiobox(ConstStringListRefentries,
    int*selected_,
    RadioboxOptionoptions={});

    ComponentDropdown(ConstStringListRefentries,int*selected);
    ComponentDropdown(DropdownOptionoptions);

    ComponentToggle(ConstStringListRefentries,int*selected);

    //Generalsliderconstructor:
    template<typenameT>
    ComponentSlider(SliderOption<T>options);

    //Shorthandwithoutthe`SliderOption`constructor:
    ComponentSlider(ConstStringReflabel,
    Ref<int>value,
    ConstRef<int>min=0,
    ConstRef<int>max=100,
    ConstRef<int>increment=5);
    ComponentSlider(ConstStringReflabel,
    Ref<float>value,
    ConstRef<float>min=0.f,
    ConstRef<float>max=100.f,
    ConstRef<float>increment=5.f);
    ComponentSlider(ConstStringReflabel,
    Ref<long>value,
    ConstRef<long>min=0L,
    ConstRef<long>max=100L,
    ConstRef<long>increment=5L);

    ComponentResizableSplit(ResizableSplitOptionoptions);
    ComponentResizableSplitLeft(Componentmain,Componentback,int*main_size);
    ComponentResizableSplitRight(Componentmain,Componentback,int*main_size);
    ComponentResizableSplitTop(Componentmain,Componentback,int*main_size);
    ComponentResizableSplitBottom(Componentmain,Componentback,int*main_size);

    ComponentRenderer(Componentchild,std::function<Element()>);
    ComponentRenderer(std::function<Element()>);
    ComponentRenderer(std::function<Element(bool/*focused*/)>);
    ComponentDecoratorRenderer(ElementDecorator);

    ComponentCatchEvent(Componentchild,std::function<bool(Event)>);
    ComponentDecoratorCatchEvent(std::function<bool(Event)>on_event);

    ComponentMaybe(Component,constbool*show);
    ComponentMaybe(Component,std::function<bool()>);
    ComponentDecoratorMaybe(constbool*show);
    ComponentDecoratorMaybe(std::function<bool()>);

    ComponentModal(Componentmain,Componentmodal,constbool*show_modal);
    ComponentDecoratorModal(Componentmodal,constbool*show_modal);

    ComponentCollapsible(ConstStringReflabel,
    Componentchild,
    Ref<bool>show=false);

    ComponentHoverable(Componentcomponent,bool*hover);
    ComponentHoverable(Componentcomponent,
    std::function<void()>on_enter,
    std::function<void()>on_leave);
    ComponentHoverable(Componentcomponent,//
    std::function<void(bool)>on_change);
    ComponentDecoratorHoverable(bool*hover);
    ComponentDecoratorHoverable(std::function<void()>on_enter,
    std::function<void()>on_leave);
    ComponentDecoratorHoverable(std::function<void(bool)>on_change);

    ComponentWindow(WindowOptionsoption);

    }//namespaceftxui

    #endif/*endofincludeguard:FTXUI_COMPONENT_HPP*/

## Input

Example:

Produced by: `ftxui::Input()` from "ftxui/component/component.hpp"

### Filtered input

On can filter out the characters received by the input component, using `ftxui::CatchEvent`.

    std::stringphone_number;
    Componentinput=Input(&phone_number,"phonenumber");

    //Filteroutnon-digitcharacters.
    input|=CatchEvent([&](Eventevent){
    returnevent.is_character()&&!std::isdigit(event.character()[0]);
    });

    //Filteroutcharacterspastthe10thone.
    input|=CatchEvent([&](Eventevent){
    returnevent.is_character()&&phone_number.size()>=10;
    });

## Menu

Defines a menu object. It contains a list of entries, one of them is selected.

Example:

Produced by: `ftxui::Menu()` from "ftxui/component/component.hpp"

## Toggle

A special kind of menu. The entries are displayed horizontally.

Example:

Produced by: `ftxui::Toggle()` from "ftxui/component/component.hpp"

## CheckBox

This component defines a checkbox. It is a single entry that can be turned on/off.

Example:

Produced by: `ftxui::Checkbox()` from "ftxui/component/component.hpp"

## RadioBox

A radiobutton component. This is a list of entries, where one can be turned on.

Example:

Produced by: `ftxui::Radiobox()` from "ftxui/component/component.hpp"

## Dropdown

A drop down menu is a component that when checked display a list of element for the user to select one.

Example:

Produced by: `ftxui::Dropdown()` from "ftxui/component/component.hpp"

## Slider

Represents a slider object that consists of a range with binned intermediate intervals. It can be created by `ftxui::Slider()`.

Example:

Produced by: `ftxui::Slider()` from "ftxui/component/component.hpp"

## Renderer

Produced by: `ftxui::Renderer()` from ftxui/component/component.hpp. This component decorate another one by using a different function to render an interface.

Example:

    autoinner=[...]

    autorenderer=Renderer(inner,[&]{
    returninner->Render()|border
    });

`ftxui::Renderer` also supports the component decorator pattern:

    autocomponent= [...]
    component=component
    |Renderer([](Elemente){returne|border))
    |Renderer(bold)

As a short hand, you can also compose a component with an element decorator:

    autocomponent=[...]
    component=component|border|bold;

## CatchEvent

Produced by: `ftxui::CatchEvent()` from ftxui/component/component.hpp. This component decorate others, catching events before the underlying component.

Examples:

    autoscreen=ScreenInteractive::TerminalOutput();
    autorenderer=Renderer([]{
    returntext("Myinterface");
    });
    autocomponent=CatchEvent(renderer,[&](Eventevent){
    if(event==Event::Character('q')){
    screen.ExitLoopClosure()();
    returntrue;
    }
    returnfalse;
    });
    screen.Loop(component);

The `ftxui::CatchEvent` can also be used as a decorator:

    component=component
    |CatchEvent(handler_1)
    |CatchEvent(handler_2)
    |CatchEvent(handler_3)
    ;

## Collapsible

Useful for visual elements whose visibility can be toggle on/off by the user. Essentially, this the combination of the `ftxui::Checkbox()` and `ftxui::Maybe()` components.

    autocollabsible=Collapsible("Showmore",inner_element);

## Maybe

Produced by: `ftxui::Maybe()` from ftxui/component/component.hpp. This component can be utilized to show/hide any other component via a boolean or a predicate.

Example with a boolean:

    boolshow=true;
    autocomponent=Renderer([]{return"HelloWorld!";});
    automaybe_component=Maybe(component,&show)

Example with a predicate:

    autocomponent=Renderer([]{return"HelloWorld!";});
    automaybe_component=Maybe(component,[&]{returntime>10;})

As usual, `ftxui::Maybe` can also be used as a decorator:

    component=component
    |Maybe(&a_boolean)
    |Maybe([&] {returntime>10;})
    ;

## Container

### Horizontal

Produced by: `ftxui::Container::Horizontal()` from "ftxui/component/component.hpp". It displays a list of components horizontally and handle keyboard/mouse navigation.

### Vertical

Produced by: `ftxui::Container::Vertical()` from "ftxui/component/component.hpp". It displays a list of components vertically and handles keyboard/mouse navigation.

### Tab

Produced by: `ftxui::Container::Tab()` from "ftxui/component/component.hpp". It take a list of component and display only one of them. This is useful for implementing a tab bar.

Vertical:

Horizontal:

## ResizableSplit

It defines a horizontal or vertical separation between two children components. The position of the split is variable and controllable using the mouse. There are four possible splits:

- `ftxui::ResizableSplitLeft()`

- `ftxui::ResizableSplitRight()`

- `ftxui::ResizableSplitTop()`

- `ftxui::ResizableSplitBottom()` from "ftxui/component/component.hpp"

Example:

## Force a frame redraw.

Typically, `ftxui::ScreenInteractive::Loop()` is responsible for drawing a new frame whenever a new group of events (e.g keyboard, mouse, window resize, etc.) has been processed. However, you might want to react to arbitrary events that are unknown to FTXUI. To accomplish this, you must post events using `ftxui::ScreenInteractive::PostEvent` (this is thread safe) via a thread. You will have to post the event `ftxui::Event::Custom`.

Example:

    screen->PostEvent(Event::Custom);