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