Sheet

Sheets are full-screen views that are placed as separate layers on top of the current screen context. A sheet displays a view from within the current application.

Sheets are primarily used to display a UI that's related to the creation or selection of content, often as temporary subtasks to the main navigation of the application. You can think of a sheet as representing a separate flow, or detour, from the main application flow.

Some examples of where you might use sheets include composing an email, creating a new contact, creating a meeting, or selecting content by using a picker.

A sheet includes a set of buttons at the top, which represent actions that are specific to that sheet. For example, a sheet for composing an email might include actions such as Cancel and Send. In general, a sheet should contain a cancel or back action in the upper-left corner, and a positive action (such as Send, Confirm, or OK) in the upper-right corner.

A sheet always occupies the entire screen when it is displayed, and can contain NavigationPane, TabbedPane, or Page components. A sheet can also include actions that appear on the action bar at the bottom of the sheet. An opened sheet will always be placed on top of the current screen context and will cover any previously opened sheets.

You can attach a sheet to any UIObject by using the attachedObjects property.

 Sheet* pMySheet = Sheet::create()
                   .content(Page::create())
                   .onClosed(this, SLOT(onClosedHandler())
                   .open();

  Page {
      attachedObjects: [
          Sheet {
              id: mySheet
              content: Page {
                  Button {
                      text: "Close Sheet"
                      onClicked: mySheet.close()
                  }
              }
          }
      ]
      actions: [
          ActionItem {
              title: "Show Sheet"
              ActionBar.placement: ActionBarPlacement.OnBar
              onTriggered: {
                 mySheet.open();
              }
          }
      ]
  }