FTXUI 6.1.9
C++ functional terminal UI.
Loading...
Searching...
No Matches
flexbox_config.hpp
Go to the documentation of this file.
1// Copyright 2021 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#ifndef FTXUI_DOM_FLEXBOX_CONFIG_HPP
5#define FTXUI_DOM_FLEXBOX_CONFIG_HPP
6
7#include "ftxui/util/export.hpp" // for FTXUI_EXPORT
8
9/*
10 This replicate the CSS flexbox model.
11 See guide for documentation:
12 https://css-tricks.com/snippets/css/a-guide-to-flexbox/
13*/
14
15namespace ftxui {
16
17/// @brief FlexboxConfig is a configuration structure that defines the layout
18/// properties for a flexbox container.
19//
20/// It allows you to specify the direction of the flex items, whether they
21/// should wrap, how they should be justified along the main axis, and how
22/// they should be aligned along the cross axis.
23/// It also includes properties for gaps between flex items in both the
24/// main and cross axes.
25/// This structure is used to configure the layout behavior of flexbox
26/// containers in a terminal user interface.
27///
28/// @ingroup dom
29struct FTXUI_EXPORT(DOM) FlexboxConfig {
30 /// This establishes the main-axis, thus defining the direction flex items are
31 /// placed in the flex container. Flexbox is (aside wrapping) single-direction
32 /// layout concept. Think of flex items as primarily laying out either in
33 /// horizontal rows or vertical columns.
34 enum class Direction {
35 Row, ///< Flex items are laid out in a row.
36 RowInversed, ///< Flex items are laid out in a row, but in reverse order.
37 Column, ///< Flex items are laid out in a column.
38 ColumnInversed ///< Flex items are laid out in a column, but in reverse
39 ///< order.
40 };
41 Direction direction = Direction::Row;
42
43 /// By default, flex items will all try to fit onto one line. You can change
44 /// that and allow the items to wrap as needed with this property.
45 enum class Wrap {
46 NoWrap, ///< Flex items will all try to fit onto one line.
47 Wrap, ///< Flex items will wrap onto multiple lines.
48 WrapInversed, ///< Flex items will wrap onto multiple lines, but in reverse
49 ///< order.
50 };
51 Wrap wrap = Wrap::Wrap;
52
53 /// This defines the alignment along the main axis. It helps distribute extra
54 /// free space leftover when either all the flex items on a line are
55 /// inflexible, or are flexible but have reached their maximum size. It also
56 /// exerts some control over the alignment of items when they overflow the
57 /// line.
58 enum class JustifyContent {
59 /// Items are aligned to the start of flexbox's direction.
60 FlexStart,
61 /// Items are aligned to the end of flexbox's direction.
62 FlexEnd,
63 /// Items are centered along the line.
64 Center,
65 /// Items are stretched to fill the line.
66 Stretch,
67 /// Items are evenly distributed in the line; first item is on the start
68 // line, last item on the end line
69 SpaceBetween,
70 /// Items are evenly distributed in the line with equal space around them.
71 /// Note that visually the spaces aren’t equal, since all the items have
72 /// equal space on both sides. The first item will have one unit of space
73 /// against the container edge, but two units of space between the next item
74 /// because that next item has its own spacing that applies.
75 SpaceAround,
76 /// Items are distributed so that the spacing between any two items (and the
77 /// space to the edges) is equal.
78 SpaceEvenly,
79 };
80 JustifyContent justify_content = JustifyContent::FlexStart;
81
82 /// This defines the default behavior for how flex items are laid out along
83 /// the cross axis on the current line. Think of it as the justify-content
84 /// version for the cross-axis (perpendicular to the main-axis).
85 enum class AlignItems {
86 FlexStart, ///< items are placed at the start of the cross axis.
87 FlexEnd, ///< items are placed at the end of the cross axis.
88 Center, ///< items are centered along the cross axis.
89 Stretch, ///< items are stretched to fill the cross axis.
90 };
91 AlignItems align_items = AlignItems::FlexStart;
92
93 // This aligns a flex container’s lines within when there is extra space in
94 // the cross-axis, similar to how justify-content aligns individual items
95 // within the main-axis.
96 enum class AlignContent {
97 FlexStart, ///< items are placed at the start of the cross axis.
98 FlexEnd, ///< items are placed at the end of the cross axis.
99 Center, ///< items are centered along the cross axis.
100 Stretch, ///< items are stretched to fill the cross axis.
101 SpaceBetween, ///< items are evenly distributed in the cross axis.
102 SpaceAround, ///< tems evenly distributed with equal space around each
103 ///< line.
104 SpaceEvenly, ///< items are evenly distributed in the cross axis with equal
105 ///< space around them.
106 };
107 AlignContent align_content = AlignContent::FlexStart;
108
109 int gap_x = 0;
110 int gap_y = 0;
111
112 // Constructor pattern. For chained use like:
113 // ```
114 // FlexboxConfig()
115 // .Set(FlexboxConfig::Direction::Row)
116 // .Set(FlexboxConfig::Wrap::Wrap);
117 // ```
118 FlexboxConfig& Set(FlexboxConfig::Direction);
119 FlexboxConfig& Set(FlexboxConfig::Wrap);
120 FlexboxConfig& Set(FlexboxConfig::JustifyContent);
121 FlexboxConfig& Set(FlexboxConfig::AlignItems);
122 FlexboxConfig& Set(FlexboxConfig::AlignContent);
123 FlexboxConfig& SetGap(int gap_x, int gap_y);
124};
125
126} // namespace ftxui
127
128#endif // FTXUI_DOM_FLEXBOX_CONFIG_HPP
Component Wrap(std::string name, Component component)
Definition gallery.cpp:18
Direction
Direction is an enumeration that represents the four cardinal directions.
Definition direction.hpp:13
The FTXUI ftxui:: namespace.
Definition animation.hpp:11
Direction direction
Definition elements.hpp:82