FTXUI/tutorial.md

169 lines
4.7 KiB
Markdown
Raw Normal View History

2018-10-21 20:32:25 +08:00
Table of content.
- [DOM](#dom)
* [Style](#style)
* [Layout](#layout)
* [Widget.](#widget)
+ [text](#text)
+ [frame](#frame)
+ [separator](#separator)
+ [gauge](#gauge)
- [Components.](#components)
* [Input](#input)
* [Menu](#menu)
* [Toggle.](#toggle)
## DOM
All the dom element are declared in one header:
2018-10-21 20:14:46 +08:00
~~~cpp
#include <ftxui/dom/elements.hpp>
2018-10-21 20:14:46 +08:00
~~~
It declares the following set of elements:
2018-10-21 20:14:46 +08:00
~~~cpp
// --- Layout ----
Element vbox(Children);
Element hbox(Children);
Element flex();
// --- Widget --
Element text(std::wstring text);
Element separator();
Element gauge(float ratio);
Element frame(Child);
Element frame(Child title, Child content);
// -- Decorator (Style) ---
Element bold(Element);
Element dim(Element);
Element inverted(Element);
Element underlined(Element);
2018-10-19 04:58:38 +08:00
Element color(Color,Element);
Element bgcolor(Element);
// --- Decorator ---
Element hcenter(Element);
Element vcenter(Element);
Element center(Element);
Element flex(Element);
2018-10-21 20:14:46 +08:00
~~~
2018-10-21 20:32:25 +08:00
### Style
A terminal console can usually display colored text and colored background.
The text can also have different effects: bold, dim, underlined, inverted.
~~~cpp
Element bold(Element);
Element dim(Element);
Element inverted(Element);
Element underlined(Element);
Element blink(Element);
Element color(Color, Element);
Element bgcolor(Color, Element);
~~~
### Layout
vbox (Vertical-box) and hbox (Horizontal-box) are containers. They are used to
compose all the elements together. They will display their children one by one in one direction.
Each elements will occupy the space it required plus a fraction of the remaining
space dispatched to all the flexible elements.
flex() is used to make an element flexible.
2018-10-21 20:32:25 +08:00
#### Examples
2018-10-21 20:14:46 +08:00
~~~cpp
hbox(
frame(text(L"left")),
flex(frame(text(L"middle"))),
frame(text(L"right"))
);
2018-10-21 20:14:46 +08:00
~~~
~~~bash
┌────┐┌─────────────────────────────────────────────────────────────────┐┌─────┐
│left││middle ││right│
└────┘└─────────────────────────────────────────────────────────────────┘└─────┘
2018-10-21 20:14:46 +08:00
~~~
2018-10-21 20:14:46 +08:00
~~~cpp
hbox(
frame(text(L"left")),
flex(frame(text(L"middle"))),
flex(frame(text(L"right")))
);
2018-10-21 20:14:46 +08:00
~~~
~~~bash
┌────┐┌───────────────────────────────────┐┌───────────────────────────────────┐
│left││middle ││right │
└────┘└───────────────────────────────────┘└───────────────────────────────────┘
2018-10-21 20:14:46 +08:00
~~~
2018-10-21 20:32:25 +08:00
### Widget.
2018-10-21 20:32:25 +08:00
#### text
2018-10-21 20:32:25 +08:00
The most simple widget. It display a text.
2018-10-21 20:14:46 +08:00
~~~cpp
text(L"I am a piece of text");
2018-10-21 20:14:46 +08:00
~~~
~~~bash
I am a piece of text.
2018-10-21 20:14:46 +08:00
~~~
2018-10-21 20:32:25 +08:00
#### frame
Add a border arround an element
2018-10-21 20:14:46 +08:00
~~~c+
frame(text(L"The element"))
2018-10-21 20:14:46 +08:00
~~~
2018-10-21 20:14:46 +08:00
~~~bash
┌───────────┐
│The element│
└───────────┘
2018-10-21 20:14:46 +08:00
~~~
2018-10-21 20:32:25 +08:00
#### separator
Display a vertical or horizontal line to visually split the content of a
container in two.
2018-10-21 20:14:46 +08:00
~~~cpp
frame(hbox(
2018-10-21 20:32:25 +08:00
vbox(
text(L"left top"),
text(L"left bottom")
),
separator(),
vbox(
text(L"right top"),
text(L"right bottom")
)
));
2018-10-21 20:14:46 +08:00
~~~
2018-10-21 20:14:46 +08:00
~~~bash
┌───────────┬────────────┐
│left top │right top │
│left bottom│right bottom│
└───────────┴────────────┘
2018-10-21 20:14:46 +08:00
~~~
2018-10-21 20:32:25 +08:00
#### gauge
A gauge. It can be used to represent a progress bar.
2018-10-21 20:14:46 +08:00
~~~c+
frame(gauge(0.5))
2018-10-21 20:14:46 +08:00
~~~
2018-10-21 20:14:46 +08:00
~~~bash
┌────────────────────────────────────────────────────────────────────────────┐
│██████████████████████████████████████ │
└────────────────────────────────────────────────────────────────────────────┘
2018-10-21 20:14:46 +08:00
~~~
2018-10-21 20:32:25 +08:00
## Components.
2018-10-21 20:32:25 +08:00
### Input
### Menu
### Toggle.