mirror of
https://github.com/ArthurSonzogni/FTXUI.git
synced 2024-11-22 10:40:00 +08:00
Add example in the README.md
This commit is contained in:
Arthur Sonzogni
GitHub
parent
0d47dd19ab
commit
188cffc5f6
226
README.md
226
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:
|
||||
|
||||
Loading…
Reference in New Issue
Block a user