Liri Fluid API

NavigationListView QML Type

The navigation drawer slides in from the left and is a common pattern in apps. More...

Import Statement: import Fluid.Controls 1.1

Properties

Detailed Description

This is a temporary navigation drawer: it can toggle open or closed. Closed by default, this type of navigation drawer opens temporarily above all other content until a section is selected or the overlay is tapped.

NavigationDrawer is recommended on phones and tablets.

This navigation drawer comes with a built-in ListView.

 import QtQuick 2.10
 import QtQuick.Controls 2.3
 import QtQuick.Window 2.2
 import Fluid.Controls 1.0 as FluidControls

 Window {
     id: window
     width: 400
     height: 400
     visible: true

     Button {
         text: "Open"
         onClicked: drawer.open()
     }

     FluidControls.NavigationListView {
         topContent: Image {
             width: parent.width
             height: 200
             source: "background.png"
         }

         actions: [
             FluidControls.Action {
                 text: "Action 1"
             },
             FluidControls.Action {
                 text: "Action 2"
             }
         ]
     }
 }

For more information you can read the Material Design guidelines.

Property Documentation

actions : list<Action>

List of actions to be displayed by the drawer.


autoHighlight : bool

This property holds whether auto-highlight is enabled.

If this property is true, the current item will be automatically highlighted.

The default value is false.


currentIndex : int

The currentIndex property holds the index of the current item.


currentItem : Item

The currentItem property holds the current item.


delegate : Component

The delegate for item that constitute a menu item.