API Documentation

Documentation for developing SailfishOS applications

OpacityRampEffect QML Type

A shader effect that applies an opacity fade gradient More...

Import Statement: import Sailfish.Silica 1.0


Detailed Description

OpacityRampEffect linearly decreases the opacity of an item in a specified direction.

The example below fades the text from top to bottom:

 import QtQuick 2.2
 import Sailfish.Silica 1.0

 Item {
     Label {
         id: helloText
         font.pixelSize: Theme.fontSizeExtraLarge
         text: "Hello"
     OpacityRampEffect {
         sourceItem: helloText
         direction: OpacityRamp.TopToBottom

Property Documentation

direction : enumeration

This direction property determines the direction of the fade:

  • OpacityRamp.LeftToRight
  • OpacityRamp.RightToLeft
  • OpacityRamp.TopToBottom
  • OpacityRamp.BottomToTop

The default value is OpacityRamp.LeftToRight.

offset : real

Specifies the distance from the starting edge to begin the ramp down. For example, setting offset: 0.75 with direction: OpacityRamp.LeftToRight will begin fading at 75% of the width of the sourceItem.

The default value is 0.5.

slope : real

Specifies the rate at which opacity is reduced. A value of 1.0 will ramp the opacity down to 0 over the full width of the sourceItem. A value of 2.0 will reduce the opacity to 0 over half the width of the sourceItem.

The default value is 2.0.

sourceItem : Item

Specifies the Item to which the effect is applied. The OpacityRampEffect cannot be a child of the sourceItem.

We use cookies to improve your user experience and to help us to develop our services. By continuing to browse the site, you approve of our use of cookies.