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

• 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