mirror of
https://github.com/ArthurSonzogni/FTXUI.git
synced 2024-11-23 03:10:01 +08:00
Fix tutorial.md.
This commit is contained in:
parent
f94b63fafb
commit
dd9b0f5ec8
56
tutorial.md
56
tutorial.md
@ -1,11 +1,11 @@
|
|||||||
All the dom element are declared in one header:
|
All the dom element are declared in one header:
|
||||||
"""c++
|
~~~cpp
|
||||||
#include <ftxui/dom/elements.hpp>
|
#include <ftxui/dom/elements.hpp>
|
||||||
"""
|
~~~
|
||||||
|
|
||||||
It declares the following set of elements:
|
It declares the following set of elements:
|
||||||
|
|
||||||
"""C++
|
~~~cpp
|
||||||
// --- Layout ----
|
// --- Layout ----
|
||||||
Element vbox(Children);
|
Element vbox(Children);
|
||||||
Element hbox(Children);
|
Element hbox(Children);
|
||||||
@ -31,7 +31,7 @@ Element hcenter(Element);
|
|||||||
Element vcenter(Element);
|
Element vcenter(Element);
|
||||||
Element center(Element);
|
Element center(Element);
|
||||||
Element flex(Element);
|
Element flex(Element);
|
||||||
"""
|
~~~
|
||||||
|
|
||||||
# Layout elements.
|
# Layout elements.
|
||||||
|
|
||||||
@ -43,62 +43,62 @@ 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
|
||||||
"""C++
|
~~~cpp
|
||||||
hbox(
|
hbox(
|
||||||
frame(text(L"left")),
|
frame(text(L"left")),
|
||||||
flex(frame(text(L"middle"))),
|
flex(frame(text(L"middle"))),
|
||||||
frame(text(L"right"))
|
frame(text(L"right"))
|
||||||
);
|
);
|
||||||
"""
|
~~~
|
||||||
"""bash
|
~~~bash
|
||||||
┌────┐┌─────────────────────────────────────────────────────────────────┐┌─────┐
|
┌────┐┌─────────────────────────────────────────────────────────────────┐┌─────┐
|
||||||
│left││middle ││right│
|
│left││middle ││right│
|
||||||
└────┘└─────────────────────────────────────────────────────────────────┘└─────┘
|
└────┘└─────────────────────────────────────────────────────────────────┘└─────┘
|
||||||
"""
|
~~~
|
||||||
|
|
||||||
"""C++
|
~~~cpp
|
||||||
hbox(
|
hbox(
|
||||||
frame(text(L"left")),
|
frame(text(L"left")),
|
||||||
flex(frame(text(L"middle"))),
|
flex(frame(text(L"middle"))),
|
||||||
flex(frame(text(L"right")))
|
flex(frame(text(L"right")))
|
||||||
);
|
);
|
||||||
"""
|
~~~
|
||||||
"""bash
|
~~~bash
|
||||||
┌────┐┌───────────────────────────────────┐┌───────────────────────────────────┐
|
┌────┐┌───────────────────────────────────┐┌───────────────────────────────────┐
|
||||||
│left││middle ││right │
|
│left││middle ││right │
|
||||||
└────┘└───────────────────────────────────┘└───────────────────────────────────┘
|
└────┘└───────────────────────────────────┘└───────────────────────────────────┘
|
||||||
"""
|
~~~
|
||||||
|
|
||||||
# Widget elements.
|
# Widget elements.
|
||||||
|
|
||||||
## text
|
## text
|
||||||
|
|
||||||
The more simple widget. It display a text.
|
The more simple widget. It display a text.
|
||||||
"""C++
|
~~~cpp
|
||||||
text(L"I am a piece of text");
|
text(L"I am a piece of text");
|
||||||
"""
|
~~~
|
||||||
"""bash
|
~~~bash
|
||||||
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"))
|
||||||
"""
|
~~~
|
||||||
|
|
||||||
"""bash
|
~~~bash
|
||||||
┌───────────┐
|
┌───────────┐
|
||||||
│The element│
|
│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.
|
||||||
|
|
||||||
"""c++
|
~~~cpp
|
||||||
frame(hbox(
|
frame(hbox(
|
||||||
vbox(
|
vbox(
|
||||||
text(L"left top"),
|
text(L"left top"),
|
||||||
@ -110,28 +110,28 @@ frame(hbox(
|
|||||||
text(L"right bottom")
|
text(L"right bottom")
|
||||||
)
|
)
|
||||||
));
|
));
|
||||||
"""
|
~~~
|
||||||
|
|
||||||
"""bash
|
~~~bash
|
||||||
┌───────────┬────────────┐
|
┌───────────┬────────────┐
|
||||||
│left top │right top │
|
│left top │right top │
|
||||||
│left bottom│right bottom│
|
│left bottom│right bottom│
|
||||||
└───────────┴────────────┘
|
└───────────┴────────────┘
|
||||||
"""
|
~~~
|
||||||
|
|
||||||
## 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+
|
||||||
frame(gauge(0.5))
|
frame(gauge(0.5))
|
||||||
"""
|
~~~
|
||||||
|
|
||||||
"""bash
|
~~~bash
|
||||||
┌────────────────────────────────────────────────────────────────────────────┐
|
┌────────────────────────────────────────────────────────────────────────────┐
|
||||||
│██████████████████████████████████████ │
|
│██████████████████████████████████████ │
|
||||||
└────────────────────────────────────────────────────────────────────────────┘
|
└────────────────────────────────────────────────────────────────────────────┘
|
||||||
"""
|
~~~
|
||||||
|
|
||||||
# Decorator (style)
|
# Decorator (style)
|
||||||
A terminal console can usually display colored text and colored background.
|
A terminal console can usually display colored text and colored background.
|
||||||
|
Loading…
Reference in New Issue
Block a user