BottomSheet QML Type | Fluid Reference Documentation

- Fluid Reference Documentation
- Fluid 1.2.0

# BottomSheet QML Type

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

Import Statement: | import Fluid.Controls 1.1
Inherited By: | BottomSheetGrid

- List of all members, including inherited members

## Properties

- maxHeight : int

## Detailed Description

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 2.10
      import QtQuick.Controls 2.3
      import QtQuick.Controls.Material 2.3
      import Fluid.Controls 1.0 as FluidControls

      Item {
          Button {
              anchors.centerIn: parent
              text: qsTr("Press Me")
              onClicked: customBottomSheet.open()
          }

          FluidControls.BottomSheet {
              id: customBottomSheet

              Column {
                  width: parent.width

                  Pane {
                      width: parent.width
                      padding: 16

                      Column {
                          spacing: 8

                          FluidControls.TitleLabel {
                              text: "freedom"
                          }

                          FluidControls.BodyLabel {
                              text: "/ˈfriːdəm/"
                              color: Material.secondaryTextColor
                          }
                      }

                      Material.background: Material.color(Material.Yellow, Material.Shade800)
                  }

                  Pane {
                      width: parent.width
                      implicitHeight: 100
                      padding: 16

                      Column {
                          FluidControls.SubheadingLabel {
                              text: "noun"
                              color: Material.secondaryTextColor
                          }

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

## Property Documentation

maxHeight : int

Maximum height of the bottom sheet.

By default it's set to the height of the `ApplicationWindow` minus `AppBar` height.