mirror of
https://github.com/ArthurSonzogni/FTXUI.git
synced 2024-11-23 03:10:01 +08:00
Update table of content of tutorial.md
This commit is contained in:
parent
dd9b0f5ec8
commit
50a732c651
59
tutorial.md
59
tutorial.md
@ -1,3 +1,18 @@
|
|||||||
|
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:
|
All the dom element are declared in one header:
|
||||||
~~~cpp
|
~~~cpp
|
||||||
#include <ftxui/dom/elements.hpp>
|
#include <ftxui/dom/elements.hpp>
|
||||||
@ -33,7 +48,21 @@ Element center(Element);
|
|||||||
Element flex(Element);
|
Element flex(Element);
|
||||||
~~~
|
~~~
|
||||||
|
|
||||||
# Layout elements.
|
### 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
|
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.
|
compose all the elements together. They will display their children one by one in one direction.
|
||||||
@ -42,7 +71,7 @@ space dispatched to all the flexible elements.
|
|||||||
|
|
||||||
flex() is used to make an element flexible.
|
flex() is used to make an element flexible.
|
||||||
|
|
||||||
## Examples
|
#### Examples
|
||||||
~~~cpp
|
~~~cpp
|
||||||
hbox(
|
hbox(
|
||||||
frame(text(L"left")),
|
frame(text(L"left")),
|
||||||
@ -69,11 +98,11 @@ flex() is used to make an element flexible.
|
|||||||
└────┘└───────────────────────────────────┘└───────────────────────────────────┘
|
└────┘└───────────────────────────────────┘└───────────────────────────────────┘
|
||||||
~~~
|
~~~
|
||||||
|
|
||||||
# Widget elements.
|
### Widget.
|
||||||
|
|
||||||
## text
|
#### text
|
||||||
|
|
||||||
The more simple widget. It display a text.
|
The most simple widget. It display a text.
|
||||||
~~~cpp
|
~~~cpp
|
||||||
text(L"I am a piece of text");
|
text(L"I am a piece of text");
|
||||||
~~~
|
~~~
|
||||||
@ -81,7 +110,7 @@ The more simple widget. It display a text.
|
|||||||
I am a piece of text.
|
I am a piece of text.
|
||||||
~~~
|
~~~
|
||||||
|
|
||||||
## frame
|
#### frame
|
||||||
Add a border arround an element
|
Add a border arround an element
|
||||||
~~~c+
|
~~~c+
|
||||||
frame(text(L"The element"))
|
frame(text(L"The element"))
|
||||||
@ -93,7 +122,7 @@ frame(text(L"The element"))
|
|||||||
└───────────┘
|
└───────────┘
|
||||||
~~~
|
~~~
|
||||||
|
|
||||||
## separator
|
#### separator
|
||||||
|
|
||||||
Display a vertical or horizontal line to visually split the content of a
|
Display a vertical or horizontal line to visually split the content of a
|
||||||
container in two.
|
container in two.
|
||||||
@ -119,8 +148,7 @@ frame(hbox(
|
|||||||
└───────────┴────────────┘
|
└───────────┴────────────┘
|
||||||
~~~
|
~~~
|
||||||
|
|
||||||
## gauge
|
#### gauge
|
||||||
|
|
||||||
|
|
||||||
A gauge. It can be used to represent a progress bar.
|
A gauge. It can be used to represent a progress bar.
|
||||||
~~~c+
|
~~~c+
|
||||||
@ -133,13 +161,8 @@ frame(gauge(0.5))
|
|||||||
└────────────────────────────────────────────────────────────────────────────┘
|
└────────────────────────────────────────────────────────────────────────────┘
|
||||||
~~~
|
~~~
|
||||||
|
|
||||||
# Decorator (style)
|
## Components.
|
||||||
A terminal console can usually display colored text and colored background.
|
|
||||||
The text can also have different effects: bold, dim, underlined, inverted.
|
|
||||||
|
|
||||||
Element bold(Element);
|
### Input
|
||||||
Element dim(Element);
|
### Menu
|
||||||
Element inverted(Element);
|
### Toggle.
|
||||||
Element underlined(Element);
|
|
||||||
Element color(Element);
|
|
||||||
Element bgcolor(Element);
|
|
||||||
|
Loading…
Reference in New Issue
Block a user