/** @file TabBarDemo.qml
*
* @brief This defines the main screen area with tabbed menu on the bottom.
*/

import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.3

Rectangle {
    width:800
    height: 480
    visible: true
    TabBar {
        id: tabBar

        currentIndex: screenStack.currentIndex

        height: 100
        anchors {
            bottom: parent.bottom
            left: parent.left
            right: parent.right
        }

        TabButton {
            onClicked:
            {
                console.log("Clicked " + text + " TabButton")
            }
            text: "PAGE 0"
        }

        TabButton {
            onClicked:
            {
                console.log("Clicked " + text + " TabButton")
            }
            text: "PAGE 1"
        }

        TabButton {
            onClicked:
            {
                console.log("Clicked " + text + " TabButton")
            }
            text: "PAGE 2"
        }
    }

    StackLayout {
        id: screenStack
        currentIndex: tabBar.currentIndex
        visible: true
        anchors {
            left: parent.left
            right: parent.right
            top: parent.top
            bottom: tabBar.top
        }

        Item {
            id: page0
            Text {
                anchors.centerIn: parent
                font.pointSize: 18
                font.weight: Font.Bold
                text: "PAGE 0"
            }
        }

        Item {
            id: page1
            Text {
                anchors.centerIn: parent
                font.pointSize: 18
                font.weight: Font.Bold
                text: "PAGE 1"
            }
        }

        Item {
            id: page2
            Text {
                anchors.centerIn: parent
                font.pointSize: 18
                font.weight: Font.Bold
                text: "PAGE 2"
            }
        }
    }
    Component.onCompleted: visible = true
}