From 188cffc5f6db6fc6331ab27451aa6dea2fd562f5 Mon Sep 17 00:00:00 2001 From: Arthur Sonzogni Date: Thu, 23 Dec 2021 15:12:22 +0100 Subject: [PATCH] Add example in the README.md --- README.md | 226 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 225 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d0e771b..211536c 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 [](https://arthursonzogni.github.io/FTXUI/elements_8hpp_source.html +) + +
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](https://arthursonzogni.github.io/FTXUI/examples_2dom_2vbox_hbox_8cpp-example.html) using `hbox`, `vbox` and `filler`. + +![image](https://user-images.githubusercontent.com/4759106/147242524-7103b5d9-1a92-4e2d-ac70-b3d6740061e3.png) + + +[Example](https://arthursonzogni.github.io/FTXUI/examples_2dom_2gridbox_8cpp-example.htmlp) using gridbox: + +![image](https://user-images.githubusercontent.com/4759106/147242972-0db1f2e9-0790-496f-86e6-ed2c604f7a73.png) + +[Example](https://github.com/ArthurSonzogni/FTXUI/blob/master/examples/dom/hflow.cpp) using flexbox: + +![image](https://user-images.githubusercontent.com/4759106/147243064-780ac7cc-605b-475f-94b8-cf7c4aed03a5.png) + +[See](https://arthursonzogni.github.io/FTXUI/examples_2dom_2hflow_8cpp-example.html) also this [demo](https://arthursonzogni.com/FTXUI/examples/?file=component/flexbox). + +
+ +
Style + +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) + +![image](https://user-images.githubusercontent.com/4759106/147244118-380bf834-9e33-40df-9ff0-07c10f2598ef.png) + +FTXUI support the pipe operator. It means: `decorator1(decorator2(element))` and `element | decorator1 | decorator2` can be used. + +
+ +
Colors + +FTXUI support every color palettes: + +Color [gallery](https://arthursonzogni.github.io/FTXUI/examples_2dom_2color_gallery_8cpp-example.html): +![image](https://user-images.githubusercontent.com/4759106/147248595-04c7245a-5b85-4544-809d-a5984fc6f9e7.png) + +
+ +
Border and separator + +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): + +![image](https://user-images.githubusercontent.com/4759106/147244514-4135f24b-fb8e-4067-8896-bc53545583f7.png) + +
+ +
Text and paragraph + +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): + +![ezgif com-gif-maker (4)](https://user-images.githubusercontent.com/4759106/147251370-983a06e7-6f41-4113-92b8-942f43d34d06.gif) + +
+ +
Table + +A class to easily style a table of data. + +[Example](https://arthursonzogni.github.io/FTXUI/examples_2dom_2table_8cpp-example.html): + +![image](https://user-images.githubusercontent.com/4759106/147250766-77d8ec9e-cf2b-486d-9866-1fd9f1bd2e6b.png) + +
+ +
Canvas + +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): + +![image](https://user-images.githubusercontent.com/4759106/147245843-76cc62fb-ccb4-421b-aacf-939f9afb42fe.png) + +Complex [examples](https://github.com/ArthurSonzogni/FTXUI/blob/master/examples/component/canvas_animated.cpp): + +![ezgif com-gif-maker (3)](https://user-images.githubusercontent.com/4759106/147250538-783a8246-98e0-4a25-b032-3bd3710549d1.gif) +
+ +#### 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 [](https://arthursonzogni.github.io/FTXUI/component_8hpp_source.html) + +
Gallery + +[Gallery](https://arthursonzogni.github.io/FTXUI/examples_2component_2gallery_8cpp-example.html) of multiple components. ([demo](https://arthursonzogni.com/FTXUI/examples/?file=component/gallery)) + +![image](https://user-images.githubusercontent.com/4759106/147247330-b60beb9f-e665-48b4-81c0-4b01ee95bc66.png) + +
+ +
Radiobox + +[Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2radiobox_8cpp-example.html): + +![image](https://user-images.githubusercontent.com/4759106/147246401-809d14a5-6621-4e36-8dd9-a2d75ef2a94e.png) + +
+ +
Checkbox + +[Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2checkbox_8cpp-example.html): + +![image](https://user-images.githubusercontent.com/4759106/147246646-b86926a9-1ef9-4efb-af98-48a9b62acd81.png) + +
+ +
Input + +[Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2input_8cpp-example.html): + +![image](https://user-images.githubusercontent.com/4759106/147247671-f1d6f606-1845-4e94-a4a0-d4273e9ae6bd.png) + +
+ +
Toggle + +[Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2toggle_8cpp-example.html): + +![image](https://user-images.githubusercontent.com/4759106/147249383-e2201cf1-b7b8-4a5a-916f-d761e3e7ae40.png) + +
+ + +
Slider + +[Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2slider_8cpp-example.html): + +![image](https://user-images.githubusercontent.com/4759106/147249265-7e2cad75-082c-436e-affe-44a550c480ab.png) + +
+ + +
Menu + +[Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2menu_8cpp-example.html): + +![image](https://user-images.githubusercontent.com/4759106/147247822-0035fd6f-bb13-4b3a-b057-77eb9291582f.png) + +
+ + +
ResizableSplit + +[Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2resizable_split_8cpp-example.html): + +![ezgif com-gif-maker](https://user-images.githubusercontent.com/4759106/147248372-c55512fe-9b96-4b08-a1df-d05cf2cae431.gif) +
+ + +
Dropdown + +[Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2dropdown_8cpp-example.html): + +![youtube-video-gif (3)](https://user-images.githubusercontent.com/4759106/147246982-1e821751-531c-4e1f-bc37-2fa290e143cd.gif) + +
+ +
Tab + +[Vertical](https://arthursonzogni.github.io/FTXUI/examples_2component_2tab_vertical_8cpp-example.html): + +![ezgif com-gif-maker (1)](https://user-images.githubusercontent.com/4759106/147250144-22ff044a-4773-4ff7-a49c-12ba4034acb4.gif) + +[Horizontal](https://arthursonzogni.github.io/FTXUI/examples_2component_2tab_horizontal_8cpp-example.html): + + ![ezgif com-gif-maker (2)](https://user-images.githubusercontent.com/4759106/147250217-fe447e0f-7a99-4e08-948a-995087d9b40e.gif) + + + +
+ + + + + ## Project using FTXUI Feel free to add your projects here: