API Documentation
Documentation for developing SailfishOS applicationsButton QML Type
A push button with a text label More...
| Import Statement: | import Sailfish.Silica 1.0 |
Properties
- border
- border.color : color
- border.highlightColor : color
- color : color
- down : bool
- highlightBackgroundColor : color
- highlightColor : color
- icon : Image
- layoutDirection : enumeration
- preferredWidth : real
- text : string
Detailed Description
The Button type provides a Sailfish-styled button with a text label.
Here is a simple button:
import QtQuick 2.2
import Sailfish.Silica 1.0
Button {
text: "click me"
onClicked: console.log("clicked!")
}Button inherits the QtQuick MouseArea type, so any properties, signals and methods of MouseArea (such as the onClicked handler in the example above) are also available to Button objects. See the MouseArea documentation for its full list of available properties, signals and methods.
It is not recommended to set the width of the button explicitly. Rather, set the preferredWidth property to the desired size so that the button can expand to accomodate the text if necessary.
Setting the height of a Button will increase the tappable area, but will not change the height of the visible button height.
SecondaryButton provides less accented button and suggests that it isn’t the main action on the page.
import QtQuick 2.6
import Sailfish.Silica 1.0
SecondaryButton {
text: "click me"
onClicked: console.log("Secondary button clicked!")
}Property Documentation
Additional button style settings allow to change the color of the button border.
See also highlightBackgroundColor, highlightColor, and color.
This property controls the color of the button and the related text.
See also highlightBackgroundColor and highlightColor.
This property is true while the button is pressed and the touch position remains within the button area.
See also MouseArea::pressed.
This property controls the color of the button when down is true.
See also highlightColor and color.
This property controls the color of the button text when down is true.
See also highlightBackgroundColor and color.
The image shown within the button. If you set only an icon, then the button’s preferredWidth will change to Theme.buttonWidthTiny It is not recommended to use icon-only buttons, text-only buttons, and text and icon buttons in the same layout.
This option controls the position of the text and the icon within the button relative to each other.
- Qt.LeftToRight (default) - The icon goes first. The text is located to the right of the icon.
- Qt.RightToLeft - Mirroring items relative to the default. The icon is located to the right of the text.
If a button with text and an icon is positioned inside a layout that is structurally a column, then the content inside the button is aligned to the left of the largest element in width. Otherwise, center alignment is used.
See also ButtonLayout.
This property controls the preferred size of the button. The following standard button sizes are defined:
- Theme.buttonWidthTiny - This is the default size for square icon-only buttons.
- Theme.buttonWidthExtraSmall - This is only used in a special case, where the width of all the button layout labels is limited and thus three buttons are expected to fit side by side on most system languages. Most applications should avoid using this variant.
- Theme.buttonWidthSmall - this is the default size. At least two small buttons will fit side by side. On larger screens or in landscape orientation, more than two small buttons may fit across the screen.
- Theme.buttonWidthMedium - depending upon the screen size and orientation, there may only be space for one medium button across the screen.
- Theme.buttonWidthLarge - depending upon the screen size and orientation, there may only be space for one large button across the screen.
If the text supplied does not fit within the requested button size the button width will be increased to contain the text.