Nested Tab

[tdolata]

Is it possible to use nested Container::Tab? If so, how can this be done?

[ArthurSonzogni]

Hello.

Yes, you can compose anything, inside anything. You just have to create two of them. One inside the other.

Example 1

#include <string>
#include "ftxui/component/component.hpp"
#include "ftxui/component/screen_interactive.hpp"
#include "ftxui/dom/elements.hpp"

using namespace ftxui;

// Create component, rendering the |label|.
Component MakeEmpty(std::string label) {
  return Renderer([label] { return text(label); });
}

int main(int argc, const char* argv[]) {
  std::vector<std::string> entries = {"one", "two", "three", "four"};

  // 1. Make the nested tab.
  int nested_tab_selected = 0;
  auto nested_tab_toggle = Toggle(&entries, &nested_tab_selected);
  auto nested_tab_content = Container::Tab(
      {
          MakeEmpty("nested tab content one"),
          MakeEmpty("nested tab content two"),
          MakeEmpty("nested tab content three"),
          MakeEmpty("nested tab content four"),
      },
      &nested_tab_selected);

  auto nested_component = Container::Vertical({
      nested_tab_toggle,
      nested_tab_content,
  });

  // 2. Make the global tab.
  int tab_selected = 0;
  auto tab_toggle = Toggle(&entries, &tab_selected);
  auto tab_content = Container::Tab(
      {
          MakeEmpty("tab content one"),
          MakeEmpty("tab content two"),
          nested_component,
          MakeEmpty("tab content four"),
      },
      &tab_selected);

  auto component = Container::Vertical({
      tab_toggle,
      tab_content,
  });

  // 3. Execute the component:
  auto screen = ScreenInteractive::FitComponent();
  screen.Loop(component);
  return 0;
}

test-2022-03-22_01.42.12.mp4

If you had some separator and borders, you get:"

Example 2

#include <string>
#include "ftxui/component/component.hpp"
#include "ftxui/component/screen_interactive.hpp"
#include "ftxui/dom/elements.hpp"

using namespace ftxui;

// Create component, rendering the |label|.
Component MakeEmpty(std::string label) {
  return Renderer([label] { return text(label); });
}

int main(int argc, const char* argv[]) {
  std::vector<std::string> entries = {"one", "two", "three", "four"};

  // 1. Make the nested tab.
  int nested_tab_selected = 0;
  auto nested_tab_toggle = Toggle(&entries, &nested_tab_selected);
  auto nested_tab_content = Container::Tab(
      {
          MakeEmpty("nested tab content one"),
          MakeEmpty("nested tab content two"),
          MakeEmpty("nested tab content three"),
          MakeEmpty("nested tab content four"),
      },
      &nested_tab_selected);

  auto nested_component = Container::Vertical({
      nested_tab_toggle,
      Renderer([] { return separator(); }),
      nested_tab_content,
  }) | border;

  // 2. Make the global tab.
  int tab_selected = 0;
  auto tab_toggle = Toggle(&entries, &tab_selected);
  auto tab_content = Container::Tab(
      {
          MakeEmpty("tab content one"),
          MakeEmpty("tab content two"),
          nested_component,
          MakeEmpty("tab content four"),
      },
      &tab_selected);

  auto component = Container::Vertical({
      tab_toggle,
      Renderer([] { return separator(); }),
      tab_content,
  }) | border;

  // 3. Execute the component:
  auto screen = ScreenInteractive::FitComponent();
  screen.Loop(component);
  return 0;
}

test-2022-03-22_01.39.48.mp4

[tdolata]

I thank you very much for your very quick reply.
I see you can't sleep after night too :).

Very good job with FTXUI, thanks.