A button with a default raised and flat button style. More...
| Import Statement: | import Felgo 4.0 |
| Inherits: | |
| Inherited By: |
(since Felgo 4.0.0)(since Felgo 2.7.1)(since Felgo 4.0.0)(since Felgo 2.6.2)(since Felgo 2.6.2)(since Felgo 2.6.2)(since Felgo 2.6.2)(since Felgo 3.7.0)(since Felgo 3.7.0)(since Felgo 2.7.0)(since Felgo 4.0.0)(since Felgo 3.7.0)(since Felgo 3.7.0)(since Felgo 2.7.0)(since Felgo 2.6.2)(since Felgo 3.7.0)(since Felgo 2.18.2)(since Felgo 2.7.1)(since Felgo 4.0.0)(since Felgo 2.6.2)(since Felgo 2.12.0)(since Felgo 2.17.1)(since Felgo 2.6.2)(since Felgo 2.7.0)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 Button::flat property.
import Felgo import QtQuick App { AppPage { Column { AppButton { text: "Button 1" flat: false } AppButton { text: "Button 2" flat: true } } } }
The first button is styled with Button::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 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.
|
backgroundColorHovered : color |
The background color of the button when hovered. Matches Theme::appButton.backgroundColorHovered by default.
This property was introduced in Felgo 4.0.0.
|
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 property was introduced in Felgo 2.7.1.
|
borderColorHovered : color |
The color of the border if the button is hovered. Matches Theme::appButton.borderColorHovered by default.
This property was introduced in Felgo 4.0.0.
|
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 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 property was introduced in Felgo 2.6.2.
|
fontCapitalization : int |
The Text::font.capitalization setting. The default value matches Theme::appButton.fontCapitalization.
This 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 property was introduced in Felgo 2.6.2.
|
iconLeft : string |
|
iconRight : string |
|
iconSize : real |
The size of the button's icon. The default value matches Theme::defaultIconSize.
This property was introduced in Felgo 2.7.0.
|
iconType : IconType |
The optional icon that shall be displayed above the button text.
Use one of the IconType constants with this property.
Note: This property was renamed from icon in Felgo 4.0.0. This is because the base type already has the property AbstractButton::icon in Qt Quick Controls 2.
This property was introduced in Felgo 4.0.0.
|
innerSpacing : real |
The spacing between custom AppButton.leftItem or AppButton.rightItem and the button text. Theme::appButton.innerSpacing is used by default.
This property was introduced in Felgo 3.7.0.
|
leftItem : string |
Custom Item that appears to the left of the button text.
This property was introduced in Felgo 3.7.0.
|
minimumHeight : real |
The minimum height of the button without margins. It matches Theme::appButton.minimumHeight.
This 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 Button::flat is set to true.
This property was introduced in Felgo 2.6.2.
|
radius : real |
The border radius of the button. The default value matches Theme::appButton.radius.
|
rightItem : string |
Custom Item that appears to the left of the button text.
This property was introduced in Felgo 3.7.0.
|
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 Felgo App { onInitTheme: { Theme.appButton.rippleEffect = false // disable ripple effect } }
This 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 property was introduced in Felgo 2.7.1.
|
textColorHovered : color |
The color of the button's text if it is hovered. The default matches Theme::appButton.textColorHovered.
This property was introduced in Felgo 4.0.0.
|
textColorPressed : color |
The color of the button's text if it is pressed. The default matches Theme::appButton.textColorPressed or Theme::appButton.flatTextColorPressed.
This 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 property was introduced in Felgo 2.12.0.
|
textFormat : enumeration |
The way the text property should be displayed. Supported text formats are:
See QtQuick::Text::textFormat for more details.
This 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 property was introduced in Felgo 2.6.2.
|
wordWrap : bool |
Whether the button text uses multiple lines if it is bigger than the minimumWidth. The default value is false.
This property was introduced in Felgo 2.7.0.
