Project

General

Profile

Support #11119

Create bottom navigation bar (like Material Design)

Added by Manuel Weichselbaumer 2 months ago.

Status:
New
Priority:
Normal
Assignee:
-
Target version:
-
Start date:
11/29/2022
Due date:
% Done:

0%

Estimated time:

Description

Hi there,
i am about to create WebApp with smartphone as main target. Therefore, it should have a bottom navigation bar (as found in MaterialDesign, iOS and Android Apps).

As a starting point, i tried it with WNavigationBar:

    Wt::WNavigationBar* navBar = addNew<Wt::WNavigationBar>();
    navBar->setResponsive(true);
    navBar->addStyleClass("navbar-expand-sm fixed-bottom navbar-light bg-light text-center");
    auto container = navBar->addWidget(std::make_unique<Wt::WContainerWidget>());
    auto hbox = container->setLayout(std::make_unique<Wt::WHBoxLayout>());
    hbox->addWidget(std::make_unique<Wt::WIcon>("fa fa-tachometer fa-2x"));
    hbox->addWidget(std::make_unique<Wt::WIcon>("fa fa-area-chart fa-2x"));
    hbox->addWidget(std::make_unique<Wt::WIcon>("fa fa-gear fa-2x"));

This already creates a bar at the bottom of the page, which occupies the entire width.
unfortunately, my icons are not spaced evenly across the entire width (condensed on the left instead) when expanded.
However, if i scale down the window to make the menu collapse and i toggle the menu button, my icons some to be arranged quite nicely.

How could i realise that? Or should i stay away from WNavigationBar completely?
I also did not manage to create what i want with e.g. WBorderLayout. How do i occupy the entire screen/browser window with the latter one? Or how would i align a widget to the bottom?

Thanks a lot!

No data to display

Also available in: Atom PDF