FTXUI 7.0.3
C++ functional terminal UI.
Loading...
Searching...
No Matches
examples/component/button.cpp
Go to the documentation of this file.
1// Copyright 2020 Arthur Sonzogni. All rights reserved.
2// Use of this source code is governed by the MIT license that can be found in
3// the LICENSE file.
4#include <memory> // for shared_ptr, __shared_ptr_access
5#include <string> // for operator+, to_string
6
7#include "ftxui/component/app.hpp" // for App
8#include "ftxui/component/captured_mouse.hpp" // for ftxui
9#include "ftxui/component/component.hpp" // for Button, Horizontal, Renderer
10#include "ftxui/component/component_base.hpp" // for ComponentBase
11#include "ftxui/dom/elements.hpp" // for separator, gauge, text, Element, operator|, vbox, border
12
13using namespace ftxui;
14
15// Ceci est une fonction utilitaire pour créer un bouton avec un style personnalisé.
16// Le style est défini par une fonction lambda qui prend un EntryState et
17// retourne un Element.
18// Nous utilisons `center` pour centrer le texte à l'intérieur du bouton, puis `border` pour
19// ajouter une bordure autour du bouton, et enfin `flex` pour que le bouton remplisse
20// l'espace disponible.
21ButtonOption Style() {
22 auto option = ButtonOption::Animated();
23 option.transform = [](const EntryState& s) {
24 auto element = text(s.label);
25 if (s.focused) {
26 element |= bold;
27 }
28 return element | center | borderEmpty | flex;
29 };
30 return option;
31}
32
33int main() {
34 int value = 50;
35
36 // clang-format off
37 auto btn_dec_01 = Button("-1", [&] { value -= 1; }, Style());
38 auto btn_inc_01 = Button("+1", [&] { value += 1; }, Style());
39 auto btn_dec_10 = Button("-10", [&] { value -= 10; }, Style());
40 auto btn_inc_10 = Button("+10", [&] { value += 10; }, Style());
41 // clang-format on
42
43 // L'arbre des composants. Cela définit comment naviguer en utilisant le clavier.
44 // La `row` sélectionnée est partagée pour obtenir une disposition en grille.
45 int row = 0;
46 auto buttons = Container::Vertical({
47 Container::Horizontal({btn_dec_01, btn_inc_01}, &row) | flex,
48 Container::Horizontal({btn_dec_10, btn_inc_10}, &row) | flex,
49 });
50
51 // Modifier la façon de les afficher à l'écran :
52 auto component = Renderer(buttons, [&] {
53 return vbox({
54 text("value = " + std::to_string(value)),
55 separator(),
56 buttons->Render() | flex,
57 }) |
58 flex | border;
59 });
60
61 auto screen = App::FitComponent();
62 screen.Loop(component);
63 return 0;
64}
ButtonOption Style()
Component Button(ConstStringRef label, std::function< void()> on_click, ButtonOption options=ButtonOption::Simple())
Dessine un bouton. Exécute une fonction lorsqu'il est cliqué.
Component Renderer(Component child, std::function< Element()>)
Retourne un nouveau Component, similaire à |child|, mais utilisant |render| comme événement Component...
Element text(std::string_view text)
Affiche un morceau de texte unicode encodé en UTF8.
Element flex(Element child)
Permet à un élément enfant de s'étendre proportionnellement à l'espace restant dans un conteneur.
Definition flex.cpp:95
Element bold(Element child)
Utilise une police en gras, pour les éléments avec plus d'emphase.
Definition bold.cpp:33
Element separator()
Dessine une séparation verticale ou horizontale entre deux autres éléments.
Element vbox(Elements children)
Un conteneur affichant les éléments verticalement un par un.
Definition vbox.cpp:96
L'espace de noms FTXUI ftxui::
Definition animation.hpp:11
const Element & element
Definition node.hpp:94
int value
Definition elements.hpp:195