BottomSheetGrid QML Type | Fluid Reference Documentation

- Fluid Reference Documentation
- Fluid 1.2.0

# 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

- List of all members, including inherited members

## Properties

- actions : list<Action>
- columns : int
- rows : int
- title : string

## 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.