diff --git a/README.md b/README.md index d0e771b177493369323277a114d9033409a11a6b..211536c313e1fb9d2c0c93808f725c066b0e94e4 100644 --- a/README.md +++ b/README.md @@ -62,7 +62,7 @@ A simple C++ library for terminal based user interface. └────────────────────────────────────────────────────────────────────────────┘ ~~~ -# Documentation +## Documentation - [Starter example project](https://github.com/ArthurSonzogni/ftxui-starter) - [Documentation](https://arthursonzogni.github.io/FTXUI/) @@ -70,6 +70,230 @@ A simple C++ library for terminal based user interface. - [Build using CMake](https://arthursonzogni.com/FTXUI/doc/#build-using-cmake) - [Build using nxxm](https://arthursonzogni.com/FTXUI/doc/#build-using-cmake) +## 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>](https://arthursonzogni.github.io/FTXUI/elements_8hpp_source.html +) + +<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 the `flex` decorator. + +[Example](https://arthursonzogni.github.io/FTXUI/examples_2dom_2vbox_hbox_8cpp-example.html) using `hbox`, `vbox` and `filler`. + + + + +[Example](https://arthursonzogni.github.io/FTXUI/examples_2dom_2gridbox_8cpp-example.htmlp) using gridbox: + + + +[Example](https://github.com/ArthurSonzogni/FTXUI/blob/master/examples/dom/hflow.cpp) using flexbox: + + + +[See](https://arthursonzogni.github.io/FTXUI/examples_2dom_2hflow_8cpp-example.html) also this [demo](https://arthursonzogni.com/FTXUI/examples/?file=component/flexbox). + +</details> + +<details><summary>Style</summary> + +An element can be decorated using the functions: + - `bold` + - `dim` + - `inverted` + - `underlined` + - `blink` + - `color` + - `bgcolor` + +[Example](https://arthursonzogni.github.io/FTXUI/examples_2dom_2style_gallery_8cpp-example.html) + + + +FTXUI support the pipe operator. It means: `decorator1(decorator2(element))` and `element | decorator1 | decorator2` can be used. + +</details> + +<details><summary>Colors</summary> + +FTXUI support every color palettes: + +Color [gallery](https://arthursonzogni.github.io/FTXUI/examples_2dom_2color_gallery_8cpp-example.html): + + +</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](https://arthursonzogni.github.io/FTXUI/examples_2dom_2separator_8cpp-example.html): + + + +</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 function 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](https://arthursonzogni.github.io/FTXUI/examples_2dom_2table_8cpp-example.html): + + + +</details> + +<details><summary>Table</summary> + +A class to easily style a table of data. + +[Example](https://arthursonzogni.github.io/FTXUI/examples_2dom_2table_8cpp-example.html): + + + +</details> + +<details><summary>Canvas</summary> + +Drawing can be made on a Canvas, using braille, block, or simple characters: + +Simple [example](https://github.com/ArthurSonzogni/FTXUI/blob/master/examples/dom/canvas.cpp): + + + +Complex [examples](https://github.com/ArthurSonzogni/FTXUI/blob/master/examples/component/canvas_animated.cpp): + + +</details> + +#### 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>](https://arthursonzogni.github.io/FTXUI/component_8hpp_source.html) + +<details><summary>Gallery</summary> + +[Gallery](https://arthursonzogni.github.io/FTXUI/examples_2component_2gallery_8cpp-example.html) of multiple components. ([demo](https://arthursonzogni.com/FTXUI/examples/?file=component/gallery)) + + + +</details> + +<details><summary>Radiobox</summary> + +[Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2radiobox_8cpp-example.html): + + + +</details> + +<details><summary>Checkbox</summary> + +[Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2checkbox_8cpp-example.html): + + + +</details> + +<details><summary>Input</summary> + +[Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2input_8cpp-example.html): + + + +</details> + +<details><summary>Toggle</summary> + +[Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2toggle_8cpp-example.html): + + + +</details> + + +<details><summary>Slider</summary> + +[Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2slider_8cpp-example.html): + + + +</details> + + +<details><summary>Menu</summary> + +[Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2menu_8cpp-example.html): + + + +</details> + + +<details><summary>ResizableSplit</summary> + +[Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2resizable_split_8cpp-example.html): + + +</details> + + +<details><summary>Dropdown</summary> + +[Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2dropdown_8cpp-example.html): + + + +</details> + +<details><summary>Tab</summary> + +[Vertical](https://arthursonzogni.github.io/FTXUI/examples_2component_2tab_vertical_8cpp-example.html): + + + +[Horizontal](https://arthursonzogni.github.io/FTXUI/examples_2component_2tab_horizontal_8cpp-example.html): + +  + + + +</details> + + + + + ## Project using FTXUI Feel free to add your projects here: