Detailed Description

A Material 3 Expressive app bar containing an adaptive search field.

SearchAppBar can act as a launcher that asks the application to open a separate search experience, or as an editable query field. Outer navigationAction and actions remain in the app bar, while searchNavigationAction and searchActions are placed inside the rounded search capsule.

The capsule fills narrow layouts. Above the adaptive breakpoint it uses the larger of the breakpoint width or half the available width.

MD.SearchAppBar {
    mode: MD.SearchAppBar.Editable
    placeholderText: qsTr("Search messages")
    scrollTarget: messageList
 
    searchActions: [
        MD.AppBarAction {
            text: qsTr("Voice search")
            icon.name: "mic"
        }
    ]
 
    onAccepted: searchModel.query(text)
}

Set text on every AppBarAction to provide an accessible name. Safe-area insets, keyboard activation, adaptive overflow, and right-to-left layout are handled automatically.

For more information see the Material Design 3 search guidelines.

Definition at line 43 of file SearchAppBar.qml.

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

src/controls/qml/components/SearchAppBar.qml