group

#include <liblec/lecui/containers/group.h>

The group is a containers for visually grouping widgets. Widgets are not added to a group like the way they are added to panes; rather, widgets are associated with a group. This is done using the widget aliases.

#include <liblec/lecui/containers/page.h>
#include <liblec/lecui/containers/group.h>
#include <liblec/lecui/widgets/label.h>
#include <liblec/lecui/widgets/button.h>
using namespace liblec::lecui;

class sample_form : public form {
    page_manager _page_man{ *this };

public:
    sample_form() :
        form("Sample Form") {
        events().layout = [this](std::string& error) {
            auto& home = _page_man.add("home");

            auto& label = widgets::label::add(home, "my_label");
            label
                .text("This is a simple label and we shall group it with a button")
                .rect(rect()
                    .left(10.f)
                    .right(home.size().get_width() - 10.f)
                    .top(10.f)
                    .height(20.f));

            auto& button = widgets::button::add(home, "my_button");
            button.text("Button")
                .rect().snap_to(label.rect(), rect::snap_type::bottom_left, 10.f);

            auto& group = containers::group::add(home);
            group.widgets({ "my_label", "my_button" });

            _page_man.show("home");
            return true;
        };
    }
};

int main() {
    sample_form form;
    std::string error;
    if (!form.create(error))
        form.message(error);
    return 0;
}

Things to note:

1. We added a simple label to the page "home"
2. We added a button to the same page and snapped the button to the label using the .snap_to() method of the rect() class. Snapping is an easy way to build layouts fast.
3. We did not specify the size of the button so the library default was used.
4. We added a group and associated it with the "my_label" and "my_button" aliases. The result is that the group visually groups the widgets with these aliases.

The code above displays the following form:

Changing a group's appearance

Changing a group's appearance is as simple as editing its properties. For example, to leave only the border we can make it transparent by changing the alpha channel of the fill color as follows:

auto& group = containers::group::add(home);
group
    .widgets({ "my_label", "my_button" })
    .color_fill().alpha(0);

The result is as follows: