FTXUI 6.1.9
C++ functional terminal UI.
Loading...
Searching...
No Matches
ftxui / component

Table of Contents

title-img

ftxui::component モジュールは、ユーザーイベント (キーボード、マウスなど) に応答するインタラクティブなコンポーネントを生成するロジックを定義します。

Example セクションには、例のコレクションが記載されています。

ftxui::ScreenInteractive は、コンポーネントをレンダリングするメインループを定義します。

ftxui::Component は ftxui::ComponentBase への共有ポインタです。後者は以下を定義します。

ftxui::Element は単一のフレームをレンダリングするために使用されます。

ftxui::Component は、動的なユーザーインターフェースをレンダリングし、複数のフレームを生成し、イベントに応じてその状態を更新するために使用されます。

複数のコンポーネントのギャラリー。(デモ)

image

すべての事前定義されたコンポーネントは "ftxui/dom/component.hpp" で利用可能です。

// Copyright 2021 Arthur Sonzogni. All rights reserved.
// このソースコードの使用は、LICENSE ファイルにあるMITライセンスに従います。
#ifndef FTXUI_COMPONENT_HPP
#define FTXUI_COMPONENT_HPP
#include <functional> // for function
#include <memory> // for make_shared, shared_ptr
#include <utility> // for forward
#include <ftxui/util/warn_windows_macro.hpp>
#include "ftxui/component/component_base.hpp" // for Component, Components
#include "ftxui/component/component_options.hpp" // for ButtonOption, CheckboxOption, MenuOption
#include "ftxui/dom/elements.hpp" // for Element
#include "ftxui/util/ref.hpp" // for ConstRef, Ref, ConstStringRef, ConstStringListRef, StringRef
namespace ftxui {
struct ButtonOption;
struct CheckboxOption;
struct Event;
struct InputOption;
struct MenuOption;
struct RadioboxOption;
struct MenuEntryOption;
template <class T, class... Args>
std::shared_ptr<T> Make(Args&&... args) {
return std::make_shared<T>(std::forward<Args>(args)...);
}
Component operator|(Component component, ElementDecorator decorator);
Component& operator|=(Component& component, ComponentDecorator decorator);
Component& operator|=(Component& component, ElementDecorator decorator);
// コンポーネントを装飾するためのパイプ演算子。
namespace Container {
Component Vertical(Components children);
Component Vertical(Components children, int* selector);
Component Horizontal(Components children);
Component Horizontal(Components children, int* selector);
Component Tab(Components children, int* selector);
Component Stacked(Components children);
} // namespace Container
Component Button(ButtonOption options);
Component Button(ConstStringRef label,
std::function<void()> on_click,
ButtonOption options = ButtonOption::Simple());
Component Checkbox(CheckboxOption options);
Component Checkbox(ConstStringRef label,
bool* checked,
CheckboxOption options = CheckboxOption::Simple());
Component Input(InputOption options = {});
Component Input(StringRef content, InputOption options = {});
Component Input(StringRef content,
StringRef placeholder,
InputOption options = {});
Component Menu(MenuOption options);
Component Menu(ConstStringListRef entries,
int* selected_,
MenuOption options = MenuOption::Vertical());
Component MenuEntry(MenuEntryOption options);
Component MenuEntry(ConstStringRef label, MenuEntryOption options = {});
Component Radiobox(RadioboxOption options);
Component Radiobox(ConstStringListRef entries,
int* selected_,
RadioboxOption options = {});
Component Dropdown(ConstStringListRef entries, int* selected);
Component Dropdown(DropdownOption options);
Component Toggle(ConstStringListRef entries, int* selected);
// 一般的なスライダーコンストラクタ:
template <typename T>
Component Slider(SliderOption<T> options);
// `SliderOption`コンストラクタを使用しない短縮形:
Component Slider(ConstStringRef label,
Ref<int> value,
ConstRef<int> min = 0,
ConstRef<int> max = 100,
ConstRef<int> increment = 5);
Component Slider(ConstStringRef label,
Ref<float> value,
ConstRef<float> min = 0.f,
ConstRef<float> max = 100.f,
ConstRef<float> increment = 5.f);
Component Slider(ConstStringRef label,
Ref<long> value,
ConstRef<long> min = 0L,
ConstRef<long> max = 100L,
ConstRef<long> increment = 5L);
Component ResizableSplit(ResizableSplitOption options);
Component ResizableSplitLeft(Component main, Component back, int* main_size);
Component ResizableSplitRight(Component main, Component back, int* main_size);
Component ResizableSplitTop(Component main, Component back, int* main_size);
Component ResizableSplitBottom(Component main, Component back, int* main_size);
Component Renderer(Component child, std::function<Element()>);
Component Renderer(std::function<Element()>);
Component Renderer(std::function<Element(bool /* focused */)>);
ComponentDecorator Renderer(ElementDecorator);
Component CatchEvent(Component child, std::function<bool(Event)>);
ComponentDecorator CatchEvent(std::function<bool(Event)> on_event);
Component Maybe(Component, const bool* show);
Component Maybe(Component, std::function<bool()>);
ComponentDecorator Maybe(const bool* show);
ComponentDecorator Maybe(std::function<bool()>);
Component Modal(Component main, Component modal, const bool* show_modal);
ComponentDecorator Modal(Component modal, const bool* show_modal);
Component Collapsible(ConstStringRef label,
Component child,
Ref<bool> show = false);
Component Hoverable(Component component, bool* hover);
Component Hoverable(Component component,
std::function<void()> on_enter,
std::function<void()> on_leave);
Component Hoverable(Component component, //
std::function<void(bool)> on_change);
ComponentDecorator Hoverable(bool* hover);
ComponentDecorator Hoverable(std::function<void()> on_enter,
std::function<void()> on_leave);
ComponentDecorator Hoverable(std::function<void(bool)> on_change);
Component Window(WindowOptions option);
} // namespace ftxui
#endif /* end of include guard: FTXUI_COMPONENT_HPP */
component_base.hpp
component_options.hpp
ftxui::CheckboxOption::Simple
static CheckboxOption Simple()
標準チェックボックスのオプション。
Definition component_options.cpp:243
ftxui::ButtonOption::Simple
static ButtonOption Simple()
フォーカス時に反転するButtonOptionを作成します。
Definition component_options.cpp:164
ftxui::MenuOption::Vertical
static MenuOption Vertical()
垂直メニューの標準オプション。 これは選択可能なアイテムのリストを実装するのに役立ちます。
Definition component_options.cpp:101
ftxui::Container::Horizontal
Component Horizontal(Components children)
コンポーネントのリスト。水平方向に1つずつ描画され、左右の矢印キーまたは'h'/'l'キーを使用して水平方向にナビゲートされます。
Definition container.cpp:357
ftxui::Maybe
Component Maybe(Component, const bool *show)
コンポーネント|child|を装飾します。|show|がtrueの場合にのみ表示されます。
Definition src/ftxui/component/maybe.cpp:69
ftxui::ResizableSplitTop
Component ResizableSplitTop(Component main, Component back, int *main_size)
2つのコンポーネント間の垂直分割。マウスで設定可能。
Definition src/ftxui/component/resizable_split.cpp:264
ftxui::Menu
Component Menu(MenuOption options)
テキストのリスト。フォーカスされた要素が選択されます。
Definition src/ftxui/component/menu.cpp:512
ftxui::MenuEntry
Component MenuEntry(MenuEntryOption options)
特定のメニューエントリ。これらはContainer::Verticalに入れてメニューを形成できます。
Definition src/ftxui/component/menu.cpp:612
ftxui::Toggle
Component Toggle(ConstStringListRef entries, int *selected)
要素の水平リスト。ユーザーはこれらを操作できます。
Definition src/ftxui/component/menu.cpp:554
ftxui::Radiobox
Component Radiobox(RadioboxOption options)
1つだけ選択できる要素のリスト。
Definition src/ftxui/component/radiobox.cpp:202
ftxui::Button
Component Button(ButtonOption options)
Draw a button. Execute a function when clicked. (ja: ボタンを描画します。クリックされたときに機能を実行します。)
Definition src/ftxui/component/button.cpp:175
ftxui::Modal
Component Modal(Component main, Component modal, const bool *show_modal)
Definition modal.cpp:17
ftxui::Renderer
Component Renderer(Component child, std::function< Element()>)
|child|に似ていますが、|render|をComponentRender()イベントとして使用する新しいコンポーネントを返します。
Definition src/ftxui/component/renderer.cpp:60
ftxui::Hoverable
Component Hoverable(Component component, bool *hover)
コンポーネントをラップします。マウスでホバーされているかどうかを知る機能を提供します。
Definition hoverable.cpp:42
ftxui::Window
Component Window(WindowOptions option)
ドラッグ可能/サイズ変更可能なウィンドウ。複数のウィンドウを使用するには、それらを Container::Stacked({...})コンポーネントを使用してスタックする必要があります。
Definition src/ftxui/component/window.cpp:311
ftxui::Container::Vertical
Component Vertical(Components children)
コンポーネントのリスト。垂直方向に1つずつ描画され、上下の矢印キーまたは'j'/'k'キーを使用して垂直方向にナビゲートされます。
Definition container.cpp:314
ftxui::ResizableSplitRight
Component ResizableSplitRight(Component main, Component back, int *main_size)
2つのコンポーネント間の水平分割。マウスで設定可能。
Definition src/ftxui/component/resizable_split.cpp:231
ftxui::Dropdown
Component Dropdown(ConstStringListRef entries, int *selected)
ドロップダウンメニュー。
Definition src/ftxui/component/dropdown.cpp:21
ftxui::Container::Stacked
Component Stacked(Components children)
互いの上にスタックされるコンポーネントのリスト。 イベントは、最初のコンポーネントに伝播され、処理されない場合は2番目のコンポーネントに伝播されます。 コンポーネントは与えられた順序とは逆の順序で描画さ...
Definition container.cpp:430
ftxui::ResizableSplitBottom
Component ResizableSplitBottom(Component main, Component back, int *main_size)
2つのコンポーネント間の垂直分割。マウスで設定可能。
Definition src/ftxui/component/resizable_split.cpp:297
ftxui::Checkbox
Component Checkbox(CheckboxOption options)
チェック可能な要素を描画します。
Definition src/ftxui/component/checkbox.cpp:107
ftxui::ResizableSplitLeft
Component ResizableSplitLeft(Component main, Component back, int *main_size)
2つのコンポーネント間の水平分割。マウスで設定可能。
Definition src/ftxui/component/resizable_split.cpp:198
ftxui::Container::Tab
Component Tab(Components children, int *selector)
コンポーネントのリスト。一度に1つだけ描画され、操作されます。|selector|は選択されたコンポーネントのインデックスを提供します。これはタブを実装するのに便利です。
Definition container.cpp:403
Container
FTXUIのftxui::Container::名前空間
ftxui
FTXUI ftxui:: 名前空間
Definition animation.hpp:9
ftxui::Make
std::shared_ptr< T > Make(Args &&... args)
Definition component.hpp:26
ftxui::Element
std::shared_ptr< Node > Element
Definition elements.hpp:21
ftxui::Components
std::vector< Component > Components
Definition component_base.hpp:24
ftxui::ResizableSplit
Component ResizableSplit(ResizableSplitOption options)
2つのコンポーネント間の分割。
Definition src/ftxui/component/resizable_split.cpp:170
ftxui::Collapsible
Component Collapsible(ConstStringRef label, Component child, Ref< bool > show=false)
折りたたみ可能なコンポーネント。矢印付きのチェックボックスを表示します。アクティブ化されると、子が 表示されます。
Definition src/ftxui/component/collapsible.cpp:32
ftxui::Input
Component Input(InputOption options={})
ftxui::operator|
Component operator|(Component component, ElementDecorator decorator)
Definition component/util.cpp:17
ftxui::Slider
Component Slider(SliderOption< T > options)
どの方向にも対応するスライダー。
Definition src/ftxui/component/slider.cpp:315
ftxui::operator|=
Component & operator|=(Component &component, ComponentDecorator decorator)
Definition component/util.cpp:22
ftxui::Component
std::shared_ptr< ComponentBase > Component
Definition component_base.hpp:23
ftxui::CatchEvent
Component CatchEvent(Component child, std::function< bool(Event)>)
warn_windows_macro.hpp

Input

例:

image

によって生成されます: "ftxui/component/component.hpp" の ftxui::Input()

Filtered input

ftxui::CatchEvent を使用して、入力コンポーネントによって受信される文字をフィルタリングできます。

std::string phone_number;
Component input = Input(&phone_number, "phone number");
// Filter out non-digit characters.
input |= CatchEvent([&](Event event) {
return event.is_character() && !std::isdigit(event.character()[0]);
});
// Filter out characters past the 10th one.
input |= CatchEvent([&](Event event) {
return event.is_character() && phone_number.size() >= 10;
});

Menu

メニューオブジェクトを定義します。エントリのリストが含まれており、そのうちの1つが選択されています。

例:

image

によって生成されます: "ftxui/component/component.hpp" の ftxui::Menu()

Toggle

特別な種類のメニュー。エントリは水平に表示されます。

例:

image

によって生成されます: "ftxui/component/component.hpp" の ftxui::Toggle()

CheckBox

このコンポーネントはチェックボックスを定義します。これはオン/オフを切り替えることができる単一のエントリです。

例:

image

によって生成されます: "ftxui/component/component.hpp" の ftxui::Checkbox()

RadioBox

ラジオボタンコンポーネント。これはエントリのリストであり、そのうちの1つをオンにすることができます。

例:

image

によって生成されます: "ftxui/component/component.hpp" の ftxui::Radiobox()

Dropdown

ドロップダウンメニューは、開くとユーザーが選択できる要素のリストを表示するコンポーネントです。

例:

youtube-video-gif (3)

によって生成されます: "ftxui/component/component.hpp" の ftxui::Dropdown()

Slider

区切られた中間間隔を持つ範囲で構成されるスライダーオブジェクトを表します。ftxui::Slider() によって作成できます。

例:

image

によって生成されます: "ftxui/component/component.hpp" の ftxui::Slider()

Renderer

ftxui::Renderer() によって生成されます (ftxui/component/component.hpp から)。このコンポーネントは、インターフェースをレンダリングするために別の関数を使用することで、別のコンポーネントを装飾します。

例:

auto inner = [...]
auto renderer = Renderer(inner, [&] {
return inner->Render() | border
});

ftxui::Renderer はコンポーネントデコレーターパターンもサポートしています。

auto component = [...]
component = component
| Renderer([](Element e) { return e | border))
| Renderer(bold)
border
Element border(Element child)
要素の周囲にボーダーを描画します。
Definition src/ftxui/dom/border.cpp:225

短縮形として、コンポーネントを要素デコレーターと組み合わせることもできます。

auto component = [...]
component = component | border | bold;

CatchEvent

ftxui::CatchEvent() によって生成されます (ftxui/component/component.hpp から)。このコンポーネントは、基になるコンポーネントの前にイベントをキャッチして、他のコンポーネントを装飾します。

例:

auto screen = ScreenInteractive::TerminalOutput();
auto renderer = Renderer([] {
return text("My interface");
});
auto component = CatchEvent(renderer, [&](Event event) {
if (event == Event::Character('q')) {
screen.ExitLoopClosure()();
return true;
}
return false;
});
screen.Loop(component);

ftxui::CatchEvent はデコレーターとしても使用できます。

component = component
| CatchEvent(handler_1)
| CatchEvent(handler_2)
| CatchEvent(handler_3)
;

Collapsible

ユーザーが可視性をオン/オフに切り替えることができる視覚要素に役立ちます。本質的に、これは ftxui::Checkbox() と ftxui::Maybe() コンポーネントの組み合わせです。

auto collapsible = Collapsible("Show more", inner_element);

Maybe

ftxui::Maybe() によって生成されます (ftxui/component/component.hpp から)。このコンポーネントは、ブール値または述語を介して他のコンポーネントを表示/非表示するために利用できます。

ブール値の例:

bool show = true;
auto component = Renderer([]{ return "Hello World!"; });
auto maybe_component = Maybe(component, &show)

述語の例:

auto component = Renderer([]{ return "Hello World!"; });
auto maybe_component = Maybe(component, [&] { return time > 10; })

通常どおり、ftxui::Maybe はデコレーターとしても使用できます。

component = component
| Maybe(&a_boolean)
| Maybe([&] { return time > 10; })
;

Container

Horizontal

"ftxui/component/component.hpp" の ftxui::Container::Horizontal() によって生成されます。コンポーネントのリストを水平に表示し、キーボード/マウスナビゲーションを処理します。

Vertical

"ftxui/component/component.hpp" の ftxui::Container::Vertical() によって生成されます。コンポーネントのリストを垂直に表示し、キーボード/マウスナビゲーションを処理します。

Tab

"ftxui/component/component.hpp" の ftxui::Container::Tab() によって生成されます。コンポーネントのリストを受け取り、そのうちの1つだけを表示します。これはタブバーを実装するのに役立ちます。

垂直:

ezgif com-gif-maker (1)

水平:

ezgif com-gif-maker (2)

ResizableSplit

2つの子コンポーネント間の水平または垂直の分離を定義します。分割の位置は可変で、マウスで制御できます。 4つの可能な分割があります。

例:

ezgif com-gif-maker

Force a frame redraw.

通常、ftxui::ScreenInteractive::Loop() は、新しいイベントグループ (キーボード、マウス、ウィンドウのリサイズなど) が処理されるたびに新しいフレームを描画する役割を担います。ただし、FTXUI に認識されない任意のイベントに反応したい場合があります。これを達成するには、スレッドを介して ftxui::ScreenInteractive::PostEvent (これはスレッドセーフです) を使用してイベントをポストする必要があります。イベント ftxui::Event::Custom をポストする必要があります。

例:

screen->PostEvent(Event::Custom);

新しいイベントを処理する必要がない場合は、代わりに以下を使用できます。

screen->RequestAnimationFrame();

instead.