Skip to main content

Tabs

A value based tab set with native focus and arrow key navigation.

Loading preview…
Live C++Source and licences
#include <QApplication>
#include <QFile>
#include <QHBoxLayout>
#include <QLabel>
#include <QPainter>
#include <QStandardItemModel>
#include <QUrl>
#include <QVBoxLayout>
#include <array>
#ifdef SHADCN_GALLERY_MEDIA
#include <shadcn/media.hpp>
#endif
#include <shadcn/shadcn.hpp>

QWidget* example(QWidget* parent = nullptr) {
    using namespace shadcn;
    auto* canvas = new QWidget(parent);
    canvas->setAutoFillBackground(true);
    auto* outer = new QHBoxLayout(canvas);
    outer->setContentsMargins(32, 32, 32, 32);
    auto* host = new QWidget(canvas);
    auto* layout = new QVBoxLayout(host);
    layout->setContentsMargins(0, 0, 0, 0);
    layout->setSpacing(16);
    outer->addStretch();
    outer->addWidget(host, 0, Qt::AlignCenter);
    outer->addStretch();
    auto* tabs = new Tabs(Qt::Horizontal, host);
    tabs->setFixedWidth(360);
    for (const auto* nameValue : {"Account", "Password"}) {
        (void)tabs->addTab(nameValue, nameValue);
        auto* card = new Card(tabs);
        card->setTitle(nameValue);
        card->setDescription("Make changes to your account here.");
        auto* input = new Input(card);
        input->setPlaceholderText(nameValue == QString("Account") ? "Name" : "Current password");
        card->content().addWidget(input);
        card->footer().addWidget(new Button("Save changes", card));
        tabs->addContent(nameValue, *card);
    }
    layout->addWidget(tabs);
    return canvas;
}

Installation​

add_subdirectory(shadcn-cpp)
target_link_libraries(app PRIVATE shadcn::widgets)

Usage​

#include <shadcn/navigation.hpp>
#include <QLabel>

shadcn::Tabs tabs(Qt::Horizontal, parent);
tabs.addTab("account", "Account");
tabs.addTab("security", "Security");
tabs.addContent("account",
    *new QLabel("Account settings", &tabs));
tabs.setCurrentValue("account");

API​

addTab creates a tab button. addContent connects a value to a page, and currentChanged reports the active value.

Variations​

Use the line list variant or a vertical orientation for dense settings screens.

Keyboard and accessibility​

Qt supplies native focus, keyboard interaction and accessible object roles. Give the component a visible label or an accessible name when its text alone does not explain the action.

Ownership​

The parent widget owns the component. Child widgets created through a component layout follow Qt parent ownership. References returned by helper methods are borrowed.