Liri Fluid API

BottomSheetGrid QML Type

A sheet of paper with actions and an optional title that slides up from the bottom. More...

Import Statement: import Fluid.Controls 1.1
Inherits:

BottomSheet

Properties

Detailed Description

A sheet of paper that displays actions in a grid and an optional title that slides up from the bottom edge of the screen and presents a set of clear and simple actions.

 import QtQuick 2.10
 import QtQuick.Controls 2.3
 import Fluid.Core 1.0 as FluidCore
 import Fluid.Controls 1.0 as FluidControls

 Item {
     Button {
         anchors.centerIn: parent
         text: qsTr("Press Me")
         onClicked: gridBottomSheet.open()
     }

     FluidControls.BottomSheetGrid {
         id: gridBottomSheet
         actions: [
             FluidControls.Action {
                 text: qsTr("Folder")
                 icon.source: FluidCore.Utils.iconUrl("file/folder")
             },
             FluidControls.Action {
                 text: qsTr("New Folder")
                 icon.source: FluidCore.Utils.iconUrl("file/create_new_folder")
             },
             FluidControls.Action {
                 text: qsTr("Shared Folder")
                 icon.source: FluidCore.Utils.iconUrl("file/folder_shared")
             },
             FluidControls.Action {
                 text: qsTr("Cloud")
                 icon.source: FluidCore.Utils.iconUrl("file/cloud")
             },
             FluidControls.Action {
                 text: qsTr("Email Attachment")
                 icon.source: FluidCore.Utils.iconUrl("file/attachment")
             },
             FluidControls.Action {
                 text: qsTr("Upload")
                 icon.source: FluidCore.Utils.iconUrl("file/file_upload")
             },
             FluidControls.Action {
                 text: qsTr("Placeholder 1")
                 icon.source: FluidCore.Utils.iconUrl("file/cloud_done")
             },
             FluidControls.Action {
                 text: qsTr("Placeholder 2")
                 icon.source: FluidCore.Utils.iconUrl("file/cloud_done")
             },
             FluidControls.Action {
                 text: qsTr("Placeholder 3")
                 icon.source: FluidCore.Utils.iconUrl("file/cloud_done")
             },
             FluidControls.Action {
                 text: qsTr("Placeholder 4")
                 icon.source: FluidCore.Utils.iconUrl("file/cloud_done")
             },
             FluidControls.Action {
                 text: qsTr("Placeholder 5")
                 icon.source: FluidCore.Utils.iconUrl("file/cloud_done")
             },
             FluidControls.Action {
                 text: qsTr("Placeholder 6")
                 icon.source: FluidCore.Utils.iconUrl("file/cloud_done")
             },
             FluidControls.Action {
                 text: qsTr("Placeholder 7")
                 icon.source: FluidCore.Utils.iconUrl("file/cloud_done")
             },
             FluidControls.Action {
                 text: qsTr("Placeholder 8")
                 icon.source: FluidCore.Utils.iconUrl("file/cloud_done")
             },
             FluidControls.Action {
                 text: qsTr("Placeholder 9")
                 icon.source: FluidCore.Utils.iconUrl("file/cloud_done")
             },
             FluidControls.Action {
                 text: qsTr("Placeholder 10")
                 icon.source: FluidCore.Utils.iconUrl("file/cloud_done")
             },
             FluidControls.Action {
                 text: qsTr("Placeholder 11")
                 icon.source: FluidCore.Utils.iconUrl("file/cloud_done")
             },
             FluidControls.Action {
                 text: qsTr("Placeholder 12")
                 icon.source: FluidCore.Utils.iconUrl("file/cloud_done")
             },
             FluidControls.Action {
                 text: qsTr("Placeholder 13")
                 icon.source: FluidCore.Utils.iconUrl("file/cloud_done")
             },
             FluidControls.Action {
                 text: qsTr("Placeholder 14")
                 icon.source: FluidCore.Utils.iconUrl("file/cloud_done")
             },
             FluidControls.Action {
                 text: qsTr("Placeholder 15")
                 icon.source: FluidCore.Utils.iconUrl("file/cloud_done")
             },
             FluidControls.Action {
                 text: qsTr("Placeholder 16")
                 icon.source: FluidCore.Utils.iconUrl("file/cloud_done")
             },
             FluidControls.Action {
                 text: qsTr("Placeholder 17")
                 icon.source: FluidCore.Utils.iconUrl("file/cloud_done")
             },
             FluidControls.Action {
                 text: qsTr("Placeholder 18")
                 icon.source: FluidCore.Utils.iconUrl("file/cloud_done")
             },
             FluidControls.Action {
                 text: qsTr("Placeholder 19")
                 icon.source: FluidCore.Utils.iconUrl("file/cloud_done")
             },
             FluidControls.Action {
                 text: qsTr("Placeholder 20")
                 icon.source: FluidCore.Utils.iconUrl("file/cloud_done")
             }
         ]
     }
 }

For more information you can read the Material Design guidelines.

Property Documentation

actions : list<Action>

Actions to display in the bottom sheet.


columns : int

Number of columns. By default it's set to fit the screen width.


rows : int

Number of rows. By default it's set to fit the screen size based on the columns.


title : string

Title.