Introduction

Basic Concepts

Nomad HIG works with the Kirigami framework to build convergent applications by making use of its adaptive components.

You could think of the application main content-views as a folding piece of paper in a horizontal layout, as shown in illustration below, where the views get folded when there's not enough space to fit them and can be either swiped or stacked to access them.

---

---

Structure

Nomad HIG uses a set of specific components to build the layout of the application in a coherent manner across the Nomad applications.

In the following documents each of those components will be described separately

Primary Components

A Nomad App structure is layout vertically, while the application contents are layout horizontally making use of the folding metaphor.

The main structure is layout vertically making use of the following components:

• Header Toolbar on top
• Secondary Toolbar(s) under the header toolbar or above the footer toolbar
• Application view content on the center
• Footer Toolbar on the bottom

And horizontally we have the Drawers, which provide access to the application menus and actions:

• Global Drawer on the left side
• Contextual Drawer on the right side

Those components are well defined and supported as properties both on QCC2 and Kirigami by making use of ApplicationWindow, Page or Kirigami.Page, like this:

---

The following demos the basic structure of a Nomad app:

`

/Nomad app/

import QtQuick 2.9

import QtQuick.Controls 2.2

import org.kde.kirigami 2.0 as Kirigami


Kirigami.ApplicationWindow
{
    header: ToolBar
    {
        position: ToolBar.Header
    }

    footer: ToolBar
    {
        position: ToolBar.Footer
    }

    Page
    {
        id: mainView

        anchors.fill: parent

        header: ToolBar
        {
            id: secondaryToolbar

            position: ToolBar.Header
        }
    }
}

`

---

The following image illustrates the defined structure:

---

There are different ways to layout the application views content, the following illustration provides some basic examples: