A tab widget is a widget that organizes contents in tab panes.

A WTabWidget combines a horizontal WMenu with a WStackedWidget in a tab-like look. A tab widget will place the tab bar on top of the contents, and fit the contents below it. It is similar to a WNavigationBar but with fewer options like a title or multiple menus.

Example
source 
#include <Wt/WContainerWidget.h>
#include <Wt/WMenuItem.h>
#include <Wt/WTabWidget.h>
#include <Wt/WTextArea.h>

auto container = std::make_unique<Wt::WContainerWidget>();

Wt::WTabWidget *tabW = container->addNew<Wt::WTabWidget>();
tabW->addTab(std::make_unique<Wt::WTextArea>("This is the contents of the first tab."),
             "First", Wt::ContentLoading::Eager);
tabW->addTab(std::make_unique<Wt::WTextArea>("The contents of the tabs are pre-loaded in"
                               " the browser to ensure swift switching."),
             "Preload", Wt::ContentLoading::Eager);
tabW->addTab(std::make_unique<Wt::WTextArea>("You could change any other style attribute of the"
                               " tab widget by modifying the style class."
                               " The style class 'trhead' is applied to this tab."),
             "Style", Wt::ContentLoading::Eager)->setStyleClass("trhead");

Wt::WMenuItem *tab
    = tabW->addTab(std::make_unique<Wt::WTextArea>("You can close this tab"
                                     " by clicking on the close icon."),
                   "Close");
tab->setCloseable(true);

tabW->setStyleClass("tabwidget");

The tab widget is styled by the current CSS theme. The look (of the header) can be overridden using the Wt-tabs CSS class and addition to selectors like ul, li and span.

Top