An animated switch that has two states on and off. More...
The animated switch type provides a switch button with image animation. The control can be created using 2 or 3 images.
Here is a simple animated switch using 2 images:
import QtQuick 1.1 import "components" AnimatedSwitch { id: animatedswitch1 width: 130 height: 56 on: false imageOn: "" textOffX: 78 sliderImage: "images/knob.svg" textOnX: 18 imageOff: "images/background.svg" sliderImageY: 2 imageOffHeight: 56 imageOffWidth: 130 textColor: "#ffffff" font.family: "Arial" font.bold: false sliderImageOffX: 78 textOn: "On" sliderImageOnX: 1 font.pixelSize: 22 textOff: "Off" onOnChanged: { console.debug(on); } }
Here is a simple animated switch using 3 images:
import QtQuick 1.1 import "components" AnimatedSwitch{ id: animatedswitch2 width: 100; height: 27; on: true imageOff: "images/off.png" imageOffWidth: 100 imageOffHeight: 27 sliderImage: "images/slider.png" imageOn: "images/on.png" imageOnWidth: 100 imageOnHeight: 27 sliderImageOnX: 0 sliderImageY: 0 sliderImageOffX: 62 textOnX: 18 textOffX: 54 textColor: "#000000" onOnChanged: { console.debug(on); } }
The horizontal x position of the slider image when the switch is in the off state.
The vertical y position of the slider image in relation to the imageOff source.
The horizontal position where we will position the text when the switch is in the off state.
The horizontal position where we will position the text when the switch is in the on state.