Update table of content of tutorial.md

This commit is contained in:
Arthur Sonzogni 2018-10-21 14:32:25 +02:00
parent dd9b0f5ec8
commit 50a732c651

View File

@ -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);