AppButton

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

Import Statement: import VPlayApps 1.0
Inherits:

Button

Inherited By:

SwipeButton

Properties

Detailed Description

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

The AppButton component comes in two different styles that can be switched with the flat property.

 import VPlayApps 1.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

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 QML property was introduced in V-Play 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 V-Play 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 V-Play 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 V-Play 2.6.2.


fontCapitalization : int

The Text::font.capitalization setting. The default value matches Theme::appButton.fontCapitalization.

This QML property was introduced in V-Play 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 QML property was introduced in V-Play 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 V-Play 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 V-Play 2.7.0.


minimumHeight : real

The minimum height of the button without margins. It matches Theme::appButton.minimumHeight.

This QML property was introduced in V-Play 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 V-Play 2.6.2.


pressed : bool

Whether the button is currently being pressed.

This QML property was introduced in V-Play 2.6.2.


radius : real

The border radius of the button. The default value matches Theme::appButton.radius.


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 V-Play 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 V-Play 2.6.2.


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 V-Play 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 V-Play 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 V-Play 2.7.0.


Videos

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support