• Home
• Felgo
• StyledButton

StyledButton

The StyledButton has a gradient, radius and border and an optional flatStyle, ready to be published in games & apps. More...

• List of all members, including inherited members

Properties

• borderColor : color
• borderWidth : int
• flatStyle : bool
• gradientBottomColor : color
• gradientTopColor : color
• gradientTopColorLighterFactor : real
• radius : int

Detailed Description

The StyledButton is a skinned Qt Quick Controls Button that has the same style across platforms: a white-to-grey gradient, black textColor, 4px radius and a dark-grey border color. You can also set the flatStyle property to true to get a button without border color and no gradient.

You can use this button in published games as it looks more polished than the SimpleButton. It changes its background color when the button is hovered (only works on Desktop with a mouse input) and when the button is pressed.

The default size values for StyledButton are the size of the contained text. So the longer the text, the bigger the StyledButton is. You can change the default size and behavior of the StyledButton by creating a new qml file that has the StyledButton as root element and then change your default button style. This custom component can then be used in your game during development, so you can quickly change all your button appearances afterwards.

Alternative button components are GameButton and SimpleButton. See this table when to use which button type:

All of these button types can be customized by setting a style.

Example Usage

 import Felgo

 GameWindow {

   Scene {

     StyledButton {
       text: "Toggle Physics"

       onClicked {
         // .. enter code for toggling physics settings here ..
       }
     }

   }
 }

Button Styling

The StyledButton provides several properties that make most popular styling requirements easier without setting an own ButtonStyle.

Example for Simple Button Styling:

 import Felgo

 StyledButton {

   // these are the default values, change the ones youÄd like to change
   color: "#ccc"
   textColor: "black"
   gradientTopColorLighterFactor: 1.15
   radius: 4
   borderWidth: activeFocus ? 2 : 1
   borderColor: "#888"
 }

For more advanced styling, assign a ButtonStyle to the style property.

Example for Advanced Button Styling:

 import Felgo
 import QtQuick
 import QtQuick.Controls.Styles

 StyledButton {
   id: styledButton

   style: ButtonStyle {

     background: Rectangle {
       implicitWidth: 100
       implicitHeight: 25
       border.width: control.activeFocus ? 2 : 1
       border.color: "#888"
       radius: 4
       gradient: Gradient {
           GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
           GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
       }
     }

     label: Text {
       anchors.centerIn: parent
       font.pixelSize: styledButton.pixelSize
       color: styledButton.textColor
       text: styledButton.text
     }
   }
 }

Property Documentation