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: |
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.
Number of rows. By default it's set to fit the screen size based on the columns.