sailfish-components/NotifyBanner/docs/NotifyBanner.md

NotifyBanner

General

The NotifyBanner component is used to show Messages like Errors to the User. It shows a banner at the top of the screen.

Functions and Parameters

NotifyBanner.show(text, params);

This operation shows the banner.

Parameters

text

This parameter is required. It should receive a string with the Message to be shown.

params

This parameter is optional. It receives a JS-Object with parameters for colors and timeout:

{
  // Set the color of the Text
  fgColor: "red",
  
  // Set the color of the Background
  bgcolor: "yellow",
  
  // Set the timeout in ms
  time: 4000
}

You can specify any combination of the three parameters. Every parameter not specified will use these default values:

• time: 3000
• fgColor: Theme.primaryColor
• bgColor: Theme.secondaryHighlightColor

Usage

First include the NotifyBanner.qml in your project, then import it in the main QML-File. A Directory layout may look like this:

my-project
|--qml
   |--componenets
   |  |-NotifyBanner.qml
   |--main.qml

In main.qml import the components directory and create the global notify element:

import QtQuick 2.0
import Sailfish.Silica 1.0
import "pages"
import "components"

ApplicationWindow {
  id: appWin
  
  NotifyBanner { id: notify }
  
  initialPage: Component { MainPage { } }
  cover: Qt.resolvedUrl("cover/CoverPage.qml")
}

Now you can use it throughout your project like this:

// Basic usage with default values
notify.show("An Error occured");

// Advanced Options
notify.show("Here is a message", {time: 4000, fgColor: "black", bgColor: "yellow"});