Revision history [back]

With respect to the documentation of a ButtonLayout example for SFOS;

 import QtQuick 2.2
 import Sailfish.Silica 1.0

 Page {
     ButtonLayout {
         anchors.width: parent.width   // <---- this line
         Button {
             text: "Button1"
         }
         Button {
             text: "Button2"
         }
         Button {
             text: "Button3"
         }
     }
 }

This throws an error in the SDK, as I would expect it to.....anchors.width?

With respect to the documentation of a ButtonLayout example for SFOS;

 import QtQuick 2.2
 import Sailfish.Silica 1.0

 Page {
     ButtonLayout {
         anchors.width: parent.width   // <---- this line
         Button {
             text: "Button1"
         }
         Button {
             text: "Button2"
         }
         Button {
             text: "Button3"
         }
     }
 }

This throws an error in the SDK, as I would expect it to.....anchors.width?to.....anchors.width?, clearly this should be width: parent.width, then the example works.

import QtQuick 2.0
import Sailfish.Silica 1.0

Page {
    id: page

    SilicaFlickable {
        anchors.fill: parent
        Column {
            id: column
            width: page.width
            spacing: Theme.paddingLarge

            PageHeader { title: qsTr("Button layout") }

            ButtonLayout {
                width: parent.width
                Button {
                    text: "Button 1"
                    onClicked: {
                        console.log("Button 1 clicked")
                    }
                }
                Button {
                    text: "Button 2"
                    onClicked: {
                        console.log("Button 2 clicked")
                    }
                }
                Button {
                    text: "Button 3"
                    onClicked: {
                        console.log("Button 3 clicked")
                    }
                }
            }
        }
    }
}

With respect to the documentation of a ButtonLayout example for SFOS;

 import QtQuick 2.2
 import Sailfish.Silica 1.0

 Page {
     ButtonLayout {
         anchors.width: parent.width   // <---- this line
         Button {
             text: "Button1"
         }
         Button {
             text: "Button2"
         }
         Button {
             text: "Button3"
         }
     }
 }

This throws an error in the SDK, as I would expect it to.....anchors.width?, clearly this should be width: parent.width, then the example works.

Also, the example, along with many others, are somewhat lacking any context. Many use cases for buttons might be on pages in apps or settings, so why not set an example of how you could arrange 3 buttons on a page, like the following;

import QtQuick 2.0
import Sailfish.Silica 1.0

Page {
    id: page

    SilicaFlickable {
        anchors.fill: parent
        Column {
            id: column
            width: page.width
            spacing: Theme.paddingLarge

            PageHeader { title: qsTr("Button layout") }

            ButtonLayout {
                width: parent.width
                Button {
                    text: "Button 1"
                    onClicked: {
                        console.log("Button 1 clicked")
                    }
                }
                Button {
                    text: "Button 2"
                    onClicked: {
                        console.log("Button 2 clicked")
                    }
                }
                Button {
                    text: "Button 3"
                    onClicked: {
                        console.log("Button 3 clicked")
                    }
                }
            }
        }
    }
}

With respect to the documentation of a ButtonLayout example for SFOS;

 import QtQuick 2.2
 import Sailfish.Silica 1.0

 Page {
     ButtonLayout {
         anchors.width: parent.width   // <---- this line
         Button {
             text: "Button1"
         }
         Button {
             text: "Button2"
         }
         Button {
             text: "Button3"
         }
     }
 }

This throws an error in the SDK, as I would expect it to.....anchors.width?, clearly this should be width: parent.width, then the example works.

Also, the example, along with many others, are somewhat lacking any context. Many use cases for buttons might be on pages in apps or settings, so why not set an example of how you could arrange 3 buttons on a page, like the following;

import QtQuick 2.0
import Sailfish.Silica 1.0

Page {
    id: page

    SilicaFlickable {
        anchors.fill: parent
        Column {
            id: column
            width: page.width
            spacing: Theme.paddingLarge

            PageHeader { title: qsTr("Button layout") }

            ButtonLayout {
                width: parent.width
                Button {
                    text: "Button 1"
                    onClicked: {
                        console.log("Button 1 clicked")
                    }
                }
                Button {
                    text: "Button 2"
                    onClicked: {
                        console.log("Button 2 clicked")
                    }
                }
                Button {
                    text: "Button 3"
                    onClicked: {
                        console.log("Button 3 clicked")
                    }
                }
            }
        }
    }
}