The SimpleButton represents a basic rectangular button with a clicked handler that can be used during development. More...
| Import Statement: | import Felgo 4.0 |
| Inherits: | |
| Inherited By: |
This component can be used during development to quickly create a button with a background Rectangle and a Text item. It changes its background color when the button is hovered (only works on Desktop with a mouse input) and when the button is pressed.
This component should in most cases not be used in the final version of a game, because it has a very basic look. However, you can use it for quickly adding buttons to test game functionality. For published games, use the StyledButton or GameButton instead (see the Button Comparison when to use which of them).
The default size values for SimpleButton are the size of the contained text. So the longer the text, the bigger the SimpleButton is. You can change the default size and behavior of the SimpleButton by creating a new qml file that has the SimpleButton 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 StyledButton. See this table when to use which button type:
| Button Type | Usage |
|---|---|
| SimpleButton | A one-color button without radius or gradient to use during development. |
| StyledButton | A button with a radius, gradient and border. Also has a flatStyle with no border, no gradient and smaller radius. |
| GameButton | The GameButton wraps the QtQuick Controls Button and styles it with the GameStyle. |
All of these button types can be customized by setting a style.
import Felgo GameWindow { Scene { SimpleButton { text: "Toggle Physics" // these are the default values color: "darkblue" textColor: "white" font.pixelSize: 18 onClicked: { // .. enter code for toggling physics settings here .. } } } }
You can customize the look of the SimpleButton by assigning a ButtonStyle to the style property.
Example for Button Styling:
import Felgo import QtQuick SimpleButton { id: styledSimpleButton 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" } } } contentItem: Text { anchors.centerIn: parent font.pixelSize: styledSimpleButton.pixelSize color: styledSimpleButton.textColor text: styledSimpleButton.text } }
|
[since Felgo 2.3.0] color : color |
The background color of the button.
The background color is modified when the button is hovered with the hoveredLighterFactor and when it is pressed with the pressedDarkerFactor.
The default color is "darkblue".
This property was introduced in Felgo 2.3.0.
See also textColor, hoveredLighterFactor, and pressedDarkerFactor.
|
[since Felgo 2.3.0] hoveredLighterFactor : real |
The background color is made ligther by this factor when the button is hovered.
To disable the change of background color at hovering, set this to 1.0. To make it darker, set it to a value smaller than 1.
The default value is 1.2.
This property was introduced in Felgo 2.3.0.
See also color and pressedDarkerFactor.
|
[since Felgo 2.3.0] pixelSize : int |
The text pixelSize. Use either an integer integer value if you use the SimpleButton in a Scene, or Scene::sp() for density-independent pixel size.
The default value is 18.
This property was introduced in Felgo 2.3.0.
|
[since Felgo 2.3.0] pressedDarkerFactor : real |
The background color is made darker by this factor when the button is pressed. To make it lighter, set it to a value smaller than 1.
To disable the change of background color at pressing, set this to 1.0.
The default value is 1.2.
This property was introduced in Felgo 2.3.0.
See also color and pressedDarkerFactor.
