QLayout allows you to configure your views as a 3x3 matrix, containing an optional Header and/or Footer (mostly used for navbar, but can be anything). If you haven’t already, please read QLayout documentation page first.
Layout Builder
Scaffold your layout(s) by clicking on the button below.
Layout BuilderUsage
Since the header and footer needs a layout and QLayout by default manages the entire window, then for demoing purposes we are going to use containerized QLayouts. But remember that by no means you are required to use containerized QLayouts for QHeader or QFooter.
You can use glossy class on toolbars in header and footer.
Various content
Reveal property
In the example below, scroll the page to see the QHeader and QFooter behavior.
iOS look and feel
In the example below, you could use Ionicons icons (v4) with ion-ios- prefix for QTabs, which would perfectly match the iOS look and feel.
Desktop app look and feel
The example below is especially useful if you build an Electron app and you hide the default app frame.
Accessibility v2.25+
QHeader and QFooter render real <header> and <footer> elements, so they are exposed to assistive technology as the banner and footer landmarks of your QLayout with no extra work. A header or footer hidden through its v-model also leaves the Tab order and the accessibility tree entirely, so nothing invisible stays reachable.
One hidden by the reveal behavior is only translated off-screen instead; should keyboard focus land inside it (e.g. by tabbing), it reveals itself again, so focus never sits in an invisible bar.