START TOUR NOW
Tour Preview

Find the Best Demos and Examples

Check out this quick tour to find the best demos and examples for you, and to see how the Felgo SDK can help you to develop your next app or game!

Contents

AppButton

A button with a default raised and flat button style. More...

Import Statement: import Felgo 3.0
Inherits:

Button
Inherited By:

AppleSignInButton and SwipeButton

Properties

Detailed Description

The AppButton comes with a default look that matches platform-specific styles.

Example Usage

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

How do I add an onClick listener to the button?

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!"
   }

 }

More Frequently Asked Development Questions

Find more examples for frequently asked development questions and important concepts in the following guides:

Property Documentation

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 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 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 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.


fontFamily : string

The font family of the button's text. By default the Theme font is used.


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.


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 property was introduced in Felgo 2.7.0.


iconLeft : string

The optional icon that shall be displayed to the left the button text. It overrides AppButton.leftItem if set.

This property was introduced in Felgo 3.7.0.


iconRight : string

The optional icon that shall be displayed to the right the button text. It overrides AppButton.rightItem if set.

This property was introduced in Felgo 3.7.0.


iconSize : real

The size of the button's icon. The default value matches Theme::navigationBar.defaultIconSize.

This property was introduced in Felgo 2.7.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 : Item

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 flat is set to true.

This property was introduced in Felgo 2.6.2.


pressed : bool

Whether the button is currently being pressed.

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 : Item

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 VPlayApps 1.0

 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.


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 : int

The way the text property should be displayed. Supported text formats are:

  • Text.AutoText (default)
  • Text.PlainText
  • Text.StyledText
  • Text.RichText

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.


verticalPadding : real

The vertical distance from the button edge to the text. Theme::appButton.verticalPadding is used by default.

This 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 property was introduced in Felgo 2.7.0.