tab_pane

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

The tab pane is a container much like the pane except that it contains tabs that allow switching content within the same space. In the code below we shall add a tab pane to the page called "home" and we shall set the size of the tab pane to 300x300 pixels.

#include <liblec/lecui/containers/page.h>
#include <liblec/lecui/containers/tab_pane.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");

            // add a tab pane to the "home page"
            auto& tab_pane = containers::tab_pane::add(home);
            tab_pane.rect().width(300.f).height(300.f);

            // add tabs to "tab_pane" here

            _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:

• The tab pane is added using the add() method of the tab_pane class.
• The add() method takes three parameters: the container to place the tab pane in, the unique alias of the pane and the content margin (note that there are default values for the latter two).

The code above displays the following form:

Here are important facts about tab panes:

• tab panes, by default, share the same appearance as panes with one important difference: they have another smaller pane above them for tabs, as seen in the screenshot.
• just like regular panes, the usable area in a tab-pane is less than the size of the pane itself when using defaults (less by 10pixels all-round).
• widgets cannot be added directly to the tab pane, they can only be added to tabs.

To add tabs, we use the add() method in the tab class.

#include <liblec/lecui/containers/page.h>
#include <liblec/lecui/containers/tab_pane.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");

            // add a tab pane to the "home page"
            auto& tab_pane = containers::tab_pane::add(home);
            tab_pane.rect().width(300.f).height(300.f);

            // add tabs to "tab_pane" here
            auto& tab_one = containers::tab::add(tab_pane, "First");
            auto& tab_two = containers::tab::add(tab_pane, "Second");
            auto& tab_three = containers::tab::add(tab_pane, "Third");

            // select the default tab
            tab_pane.selected("First");

            _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. Tab panes can be added to any container, including panes and the tabs of other tab panes.
2. Tabs can only be added to tab panes.
3. The tab add() method takes two parameters: the tab pane and the name of the tab.

The code above displays the following form:

4. By default, none of the tabs are selected. To set the tab that is selected by default we need to use the .selected() method of the tab pane class. The method takes only one parameter: the name of the tab.
5. Tabs don't use aliases they use names because, unlike aliases, the tab's name is the text that is actually displayed on the tab.

The screenshot below shows the actual usable area of each tab (red line) when using the defaults. The reason for this is as explained for regular panes:

To change the size of the usable area set the content_margin parameter in the tab pane add() method to what you desire. For example, to make use all the space just set the parameter to 0.

auto& tab_pane = containers::tab_pane::add(home, "", 0.f);

Widgets can then be added to each of the tabs the same way they are added to any container. Also note that other containers can be added as well to virtually any depth that the computer's memory allows.

Adding widgets to containers is discussed here.

Changing a tab pane's appearance

Changing a tab pane's appearance is as simple as editing its properties. For example, to place the tabs at the bottom we can do this:

tab_pane.tab_side(containers::tab_pane::side::bottom);

Adding that single line of code results in this form:

To place the tabs on the left or right requires an extra line of code: we need to use the .caption_reserve() method of the tab_pane_builder class as follows:

tab_pane
    .tab_side(containers::tab_pane::side::left)
    .caption_reserve({ "First", "Second", "Third" });

The reason for this is that the tab captions are now orientated perpendicular to the tab area so according to the documentation for the tab pane we need to use the .caption_reserve() method to prevent a default size for the tabs being used that may result in the truncation of the captions. Using the .caption_reserve() ensures that the tabs are sized just enough to accommodate all the captions. Kindly refer to the remarks in either the html documentation or the in-code XML documentation for tab panes for more information.

The result of adding those two lines of code is this form:

By default, the orientation of the caption text is horizontal but this can be changed. Changing the code as follows for instance:

tab_pane
    .tab_side(containers::tab_pane::side::left)
    .caption_orientation(containers::tab_pane::orientation::vertical);

Note that we do not need the .caption_reserve() method here. However, adding the .caption_reserve() method anyway is generally a good idea as a failsafe measure in case the orientations are changed in later versions of your code or via some app settings.

The result of adding those two lines of code is this form:

To see all the properties that can be modified refer to the lecui html documentation or the in-code XML documentation for tab panes.