API Documentation

Documentation for developing SailfishOS applications

ButtonLayout QML Type

An item that lays out Button types More...

Import Statement: import Sailfish.Silica 1.0

List of all members, including inherited members

Properties

columnSpacing : real
preferredWidth : real
rowSpacing : real

Attached Properties

newLine : bool

Detailed Description

The ButtonLayout type lays out Button types according to Sailfish styling rules.

This is typically used to display multiple buttons grouped together, sizing and positioning the buttons to achieve a pleasing layout on various device types and language translations.

 import QtQuick 2.2
 import Sailfish.Silica 1.0

 Page {
     ButtonLayout {
         Button {
             text: "Button1"
         }
         Button {
             text: "Button2"
         }
         Button {
             text: "Button3"
         }
     }
 }

The layout ensures all Buttons on a row have an equal size. The layout will always choose one of the standard button sizes (Button::preferredWidth) unless the text wouldn't fit in a Theme.buttonSizeLarge sized button.

The size of a button is determined by the maximum of:

The widest button in the row containing the button
The button width sufficient to contain the text
The preferredWidth specified by the button
The preferredWidth specified for the ButtonLayout

In addition, adjacent rows with an equal number of items will be assigned the same button width.

See also Button.

Property Documentation

columnSpacing : real

This property holds the spacing between each column of buttons.

preferredWidth : real

This property holds the preferredWidth of all buttons in the layout. Any Button whose text can not fit within the desired preferredWidth will expand as needed to ensure the button text is entirely contained.

The following standard button sizes are defined:

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.

rowSpacing : real

This property holds the spacing between each row of buttons.

Attached Property Documentation

ButtonLayout.newLine : bool

This attached property determines whether the Button it is attached to will start on a new line.

For example, the code below would typically place the two buttons in a single row, but setting ButtonLayout.newLine: true on the second Button causes the buttons to be displayed on two lines.

 import QtQuick 2.2
 import Sailfish.Silica 1.0

 Page {
     ButtonLayout {
         Button {
             text: "Button 1"
         }
         Button {
             ButtonLayout.newLine: true
             text: "Button 2"
         }
     }
 }