diff --git a/README.md b/README.md index 8d24ac4..3baf8af 100644 --- a/README.md +++ b/README.md @@ -325,6 +325,7 @@ Feel free to add your projects here: - [eCAL monitor](https://github.com/eclipse-ecal/ecal) - [Path Finder](https://github.com/Ruebled/Path_Finder) - [rw-tui](https://github.com/LeeKyuHyuk/rw-tui) +- [ftxui_CPUMeter](https://github.com/tzzzzzzzx/ftxui_CPUMeter) ### [cpp-best-practices/game_jam](https://github.com/cpp-best-practices/game_jam) diff --git a/examples/component/button.cpp b/examples/component/button.cpp index 27439a3..0d2ab8f 100644 --- a/examples/component/button.cpp +++ b/examples/component/button.cpp @@ -12,28 +12,51 @@ using namespace ftxui; +// This is a helper function to create a button with a custom style. +// The style is defined by a lambda function that takes an EntryState and +// returns an Element. +// We are using `center` to center the text inside the button, then `border` to +// add a border around the button, and finally `flex` to make the button fill +// the available space. +ButtonOption ButtonStyle() { + auto option = ButtonOption::Animated(); + option.transform = [](const EntryState& s) { + auto element = text(s.label); + if (s.focused) { + element |= bold; + } + return element | center | borderEmpty | flex; + }; + return option; +} + int main() { int value = 50; + // The tree of components. This defines how to navigate using the keyboard. - auto buttons = Container::Horizontal({ - Button("Decrease", [&] { value--; }), - Button("Increase", [&] { value++; }), - }); + auto buttons = + Container::Vertical({ + Container::Horizontal({ + Button("-1", [&] { value--; }, ButtonStyle()), + Button("+1", [&] { value++; }, ButtonStyle()), + }) | flex, + Container::Horizontal({ + Button("-10", [&] { value -= 10; }, ButtonStyle()), + Button("-10", [&] { value += 10; }, ButtonStyle()), + }) | flex, + }); // Modify the way to render them on screen: auto component = Renderer(buttons, [&] { return vbox({ text("value = " + std::to_string(value)), separator(), - gauge(value * 0.01f), - separator(), - buttons->Render(), - }) | - border; + buttons->Render() | flex, + }) | flex | border; }); - auto screen = ScreenInteractive::FitComponent(); + auto screen = ScreenInteractive::Fullscreen(); screen.Loop(component); return 0; }