Contents

AppButton

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

Import Statement: import Felgo 3.0
Inherits:

Button
Inherited By:

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.


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.


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.


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.