HeaderBar

HeaderBar can be used to add an title and action buttons to the top of a view.

Properties

  • title: (in string): Defines the text that is displayed on the start of the header bar.
  • action-action: (in image): Defines the image for the primary action.
  • action-text: (in string): Defines the text of the primary action. Is displayed inside of a action button.
  • action-enabled: (in bool): If set to true the primary action button is enabled (default: false).
  • offset: (in length): Defines an extra offset that is adding to the left padding.

Example

import { HeaderBar, Icons, RoundButton } from "@coop/lib.slint";

export component Example inherits Window {
    width: 200px;
    height: 25px;

    VerticalLayout {
        HeaderBar {
            action_icon: Icons.arrow_back;
            action_enabled: true;
            title: "My Fancy header";

            RoundButton {
                icon: Icons.more_vert;
                horizontal_stretch: 0;
            }

            action => {
                debug("action");
            }
        }

        Rectangle {
            Text {
                text: "content"
            }
        }
    }
}