amass/FTXUI
1
0
Fork 0
mirror of https://github.com/ArthurSonzogni/FTXUI.git synced 2024-11-26 12:37:06 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix tutorial.md.

Browse Source
This commit is contained in:
Arthur Sonzogni 2018-10-21 14:14:46 +02:00
parent f94b63fafb
commit dd9b0f5ec8
1 changed files with 28 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
tutorial.md
View File

@ -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.