BottomSheetGrid QML Type | Fluid Reference Documentation

- Fluid Reference Documentation
- Fluid 1.0.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.0
Inherits: | BottomSheet

- List of all members, including inherited members

## Properties

- actions : 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 : 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.