BottomSheet Class Reference

A sheet of paper that slides up from the bottom. More...

Inheritance diagram for BottomSheet:

Collaboration diagram for BottomSheet:

Detailed Description

A sheet of paper that slides up from the bottom.

A sheet of paper that slides up from the bottom edge of the screen and presents a set of clear and simple actions.

import QtQuick
import QtQuick.Controls.Material
import Fluid as Fluid
 
Item {
    Fluid.Button {
        anchors.centerIn: parent
        text: qsTr("Press Me")
        onClicked: customBottomSheet.open()
    }
 
    Fluid.BottomSheet {
        id: customBottomSheet
 
        Column {
            width: parent.width
 
            Fluid.Pane {
                width: parent.width
                padding: 16
 
                Column {
                    spacing: 8
 
                    Fluid.TitleLabel {
                        text: "freedom"
                    }
 
                    Fluid.BodyLabel {
                        text: "/ˈfriːdəm/"
                        color: Material.secondaryTextColor
                    }
                }
 
                Material.background: Material.color(Material.Yellow, Material.Shade800)
            }
 
            Fluid.Pane {
                width: parent.width
                implicitHeight: 100
                padding: 16
 
                Column {
                    Fluid.SubheadingLabel {
                        text: "noun"
                        color: Material.secondaryTextColor
                    }
 
                    Fluid.BodyLabel {
                        text: "the right to live in the way you want without being controlled by anyone else"
                    }
                }
            }
        }
    }
}

For more information you can read the Material Design guidelines.

---

The documentation for this class was generated from the following file:

• /home/runner/work/docs/docs/fluid/src/imports/controls/qml/BottomSheet.qml