The Flex
layout is one of the most powerful containers in Kontra TUI. It allows you to arrange components in a row or column, distributing space evenly among them.
If you're familiar with CSS Flexbox-you're going to feel right at home.
A Flex
container takes a direction (Row
or Column
) and one or more children. It automatically divides the available space equally between them.
The Flex
component comes with a few helpful methods to customize layout behavior.
FlexDirection::Row
- Arrange children side by side (left to right)FlexDirection::Column
- Stack children vertically (top to bottom).set_gap(n)
- Adds horizontal or vertical spacing between children, depending on layout direction.Let's create three simple Text
components with colored backgrounds so we can clearly visualize the layout behavior.
Let's use a Row
layout to place these side-by-side.
This will distribute the terminal's width into three equal panels with a gap of 5 columns in between.
Let's stack the same components vertically.
Layouts can be nested. For example, you can stack a row and column layout together like this:
Finally, render your layout using the Screen
component:
Code for it,
FlexDirection::Row
or FlexDirection::Column
to control direction..set_gap(n)
.
auto layout = std::make_shared<Flex>(
FlexDirection::Row, // or FlexDirection::Column
child1,
child2,
...
);
flex->set_gap(2); // Adds 2 columns or 2 rows of space between children
auto text1 = std::make_shared<Text>("Panel 1", TextStyle("", ansi::BG_RED));
auto text2 = std::make_shared<Text>("Panel 2", TextStyle("", ansi::BG_GREEN));
auto text3 = std::make_shared<Text>("Panel 3", TextStyle("", ansi::BG_BLUE));
auto flex_row = std::make_shared<Flex>(
FlexDirection::Row,
text1,
text2,
text3
);
flex_row->set_gap(5);
auto flex_column = std::make_shared<Flex>(
FlexDirection::Column,
text1,
text2,
text3
);
flex_column->set_gap(1);
auto main_layout = std::make_shared<Flex>(
FlexDirection::Column,
flex_row,
flex_column
);
auto screen = std::make_shared<Screen>(main_layout);
kontra::run(screen, [&](const InputEvent& event) {
// Static example, no input needed.
});
#include "../include/kontra.hpp"
int main() {
auto panel1 = std::make_shared<Text>("Panel 1", TextStyle(ansi::FG_RED));
auto panel2 = std::make_shared<Text>("Panel 2", TextStyle(ansi::FG_GREEN));
auto panel3 = std::make_shared<Text>("Panel 3", TextStyle(ansi::FG_BLUE));
auto flex_row = std::make_shared<Flex>(FlexDirection::Row, panel1, panel2, panel3);
flex_row->set_gap(5);
auto bordered_row_example = std::make_shared<Border>(
flex_row,
BorderStyleBuilder().set_title("FlexDirection::Row").set_color(ansi::FG_CYAN).build()
);
bordered_row_example->set_padding(1);
auto panel4 = std::make_shared<Text>("Panel 1", TextStyle(ansi::FG_RED));
auto panel5 = std::make_shared<Text>("Panel 2", TextStyle(ansi::FG_GREEN));
auto panel6 = std::make_shared<Text>("Panel 3", TextStyle(ansi::FG_BLUE));
auto flex_column = std::make_shared<Flex>(FlexDirection::Column, panel4, panel5, panel6);
flex_column->set_gap(1);
auto bordered_column_example = std::make_shared<Border>(
flex_column,
BorderStyleBuilder().set_title("FlexDirection::Column").set_color(ansi::FG_YELLOW).build()
);
bordered_column_example->set_padding(1);
auto main_layout = std::make_shared<Flex>(
FlexDirection::Column,
bordered_row_example,
bordered_column_example
);
auto screen = std::make_shared<Screen>(main_layout);
kontra::run(screen, [&](const InputEvent& event) {
// Static example, no input needed.
});
return 0;
}