A button with a default raised and flat button style. More...
| Import Statement: | import Felgo 3.0 |
| Inherits: | |
| Inherited By: |
The AppButton comes with a default look that matches platform-specific styles.
The AppButton component supports two different styles that can be switched with the flat property.
import Felgo 3.0 import QtQuick 2.0 App { Page { Column { AppButton { text: "Button 1" flat: false } AppButton { text: "Button 2" flat: true } } } }
The first button is styled with flat property set to false (the default style on Android), the second one with true (the default on iOS):
| iOS | Android |
|---|---|
|
|
|
The following example adds an AppButton and handles the clicked signal:
import Felgo 3.0 App { AppButton { text: "Click Me!" anchors.centerIn: parent onClicked: text = "Thanks!" } }
Find more examples for frequently asked development questions and important concepts in the following guides:
|
backgroundColor : color |
The background color of the button in the default state. Matches Theme::appButton.backgroundColor by default.
|
backgroundColorPressed : color |
The background color of the button when pressed. Matches Theme::appButton.backgroundColorPressed by default.
|
borderColor : color |
The color of the border. Matches Theme::appButton.borderColor by default.
|
borderColorDisabled : color |
The color of the border if the button is disabled. Matches Theme::appButton.borderColorDisabled by default.
This QML property was introduced in Felgo 2.7.1.
|
borderColorPressed : color |
The color of the border if the button is pressed. Matches Theme::appButton.borderColorPressed by default.
|
borderWidth : real |
The width of the border. Matches Theme::appButton.borderWidth by default.
|
disabledColor : color |
The background color of the button when disabled. Matches Theme::appButton.disabledColor by default.
|
dropShadow : bool |
Whether a drop shadow should be added to the background of the button. Matches Theme::appButton.dropShadow if the
button is enabled, false otherwise.
This QML property was introduced in Felgo 2.6.2.
|
flat : bool |
Whether the button should be displayed as a flat or raised button. The default value is true on iOS and false on all other platforms.
This QML property was introduced in Felgo 2.6.2.
|
fontBold : bool |
Whether the button text should be bold. The default value matches Theme::appButton.fontBold.
This QML property was introduced in Felgo 2.6.2.
|
fontCapitalization : int |
The Text::font.capitalization setting. The default value matches Theme::appButton.fontCapitalization.
This QML property was introduced in Felgo 2.6.2.
|
horizontalMargin : real |
The margin to the left and right of the button. Theme::appButton.horizontalMargin is used by default.
This QML property was introduced in Felgo 2.6.2.
|
horizontalPadding : real |
The horizontal distance from the button edge to the text. Theme::appButton.horizontalPadding is used by default.
|
icon : string |
The optional icon that shall be displayed above the button text.
This QML property was introduced in Felgo 2.7.0.
|
iconSize : real |
The size of the button's icon. The default value matches Theme::navigationBar.defaultIconSize.
This QML property was introduced in Felgo 2.7.0.
|
minimumHeight : real |
The minimum height of the button without margins. It matches Theme::appButton.minimumHeight.
This QML property was introduced in Felgo 2.7.0.
|
minimumWidth : real |
The minimum width of the button without margins. It matches Theme::appButton.minimumWidth, or Theme::appButton.flatMinimumWidth if flat is set to true.
This QML property was introduced in Felgo 2.6.2.
|
pressed : bool |
Whether the button is currently being pressed.
This QML property was introduced in Felgo 2.6.2.
|
radius : real |
The border radius of the button. The default value matches Theme::appButton.radius.
|
rippleEffect : bool |
Whether the button shows a ripple effect when pressed. Defaults to Theme::appButton.rippleEffect.
You can also hide the ripple effect for all buttons with the app theme:
import VPlayApps 1.0 App { onInitTheme: { Theme.appButton.rippleEffect = false // disable ripple effect } }
This QML property was introduced in Felgo 2.18.2.
|
textColor : color |
The color of the button's text. The default matches the Theme::appButton.textColor or flatTextColor configuration.
|
textColorDisabled : color |
The color of the button's text if it is disabled. The default matches Theme::appButton.textColorDisabled.
This QML property was introduced in Felgo 2.7.1.
|
textColorPressed : color |
The color of the button's text if it is pressed. The default matches Theme::appButton.textColorPressed or Theme::appButton.flatTextColorPressed.
This QML property was introduced in Felgo 2.6.2.
|
textFont : font |
This property gives full access to all font settings of the text within AppButton.
This QML property was introduced in Felgo 2.12.0.
|
textFormat : int |
The way the text property should be displayed. Supported text formats are:
See QtQuick::Text::textFormat for more details.
This QML property was introduced in Felgo 2.17.1.
|
textSize : real |
The font size of the button text. The default value matches Theme::appButton.textSize.
|
verticalMargin : real |
The margin at the top and bottom of the button. Theme::appButton.verticalMargin is used by default.
This QML property was introduced in Felgo 2.6.2.
|
verticalPadding : real |
The vertical distance from the button edge to the text. Theme::appButton.verticalPadding is used by default.
This QML property was introduced in Felgo 2.7.0.
|
wordWrap : bool |
Whether the button text uses multiple lines if it is bigger than the minimumWidth. The default value is false.
This QML property was introduced in Felgo 2.7.0.
Voted #1 for:
