InlineMessage QML Type

An inline message item with support for associated actions. More...

• List of all members, including inherited members

Properties

• actions : list<Action>
• animating : bool
• hoveredLink : string
• icon
  • icon.color : color
  • icon.fromControlsIcon : function
  • icon.height : real
  • icon.name : string
  • icon.source : var
  • icon.width : real
• position : enumeration
• showCloseButton : bool
• text : string
• type : enumeration

Signals

• linkActivated(string link)
• linkHovered(string link)

Detailed Description

InlineMessage can be used to provide non-modal information or interactivity without requiring the use of a dialog. To learn when to use it, see https://develop.kde.org/hig/status_changes/#in-app-notifications.

InlineMessage has two visibility modes: inline (default) and borderless. The inline version includes outer padding suitable for being displayed amidst page content. The borderless version is best used used as a header or footer where it is expected to touch the edges of its parent view, and is activated using the position property.

The InlineMessage item is hidden by default. It also manages its height (and implicitHeight) during an animated reveal when shown. You should avoid setting height on an InlineMessage unless it is already visible.

The type property determines the message's coloration and default icon. This icon can be overridden using the icon property.

No close button is shown by default, which means you're responsible for hiding the message when it's no longer relevant. Optionally, a close button can be added using the showCloseButton property.

Actions are added from leading to trailing, and aligned to the trailing position. If more actions are set than can fit, an overflow menu is provided.

Example displayed inline:

import org.kde.kirigami as Kirigami

Kirigami.InlineMessage {
    type: Kirigami.MessageType.Error

    text: i18n("My error message")

    actions: [
        Kirigami.Action {
            icon.name: "list-add"
            text: i18n("Add")
            onTriggered: source => {
                // do stuff
            }
        },
        Kirigami.Action {
            icon.name: "edit"
            text: i18n("Edit")
            onTriggered: source => {
                // do stuff
            }
        }
    ]
}

Example displayed in the header position:

  import org.kde.kirigami as Kirigami

  Kirigami.Page {
      header: Kirigami.InlineMessage {
          position: Kirigami.InlineMessage.Position.Header
          type: Kirigami.MessageType.Warning

          text: i18n("My warning message")

          actions: [
              Kirigami.Action {
                  icon.name: "edit-undo"
                  text: i18n("Undo")
                  onTriggered: source => {
                      // do stuff
                  }
              }
          ]
      }

      // Add page content here
  }
}

Property Documentation

icon: icon.fromControlsIcon(control.icon).

Signal Documentation