papyros / qml-material

:book: Material Design implemented in QtQuick
GNU Lesser General Public License v2.1
2.57k stars 476 forks source link

How to use tabs ? #35

Closed mhammerc closed 9 years ago

mhammerc commented 9 years ago

Hi :) ! I know it's not the better place to ask this but i don't know where ask this question. I'm trying to use tabs but I don't understand how to do it. The traditionnal method (explained here http://qt-project.org/doc/qt-5/qml-qtquick-controls-tabview.html) don't work so can you tell me quickly please how your tabs system work ? I see the code and I think I need to make Tabs element and push to it all tabs but I don't fully understand how to do it.

Thanks

iBelieve commented 9 years ago

We have an initial demo in the examples/demo directory. Check out the SubPage.qml file to see how it's done:

Page {
    id: page
    title: "Page Title"

    tabs: [
        // Each tab can have text and an icon
        {
            text: "Overview",
            icon: "action/home"
        },

        // You can also leave out the icon
        {
            text:"Projects",
        },

        // Or just simply use a string
        "Inbox"
    ]

    // TabView is simply a customized ListView
    // You can use any model/delegate for the tab contents,
    // but a VisualItemModel works well
    TabView {
        id: tabView
        anchors.fill: parent
        currentIndex: page.selectedTab
        model: tabs
    }

    VisualItemModel {
        id: tabs

        // Tab 1
        Rectangle {
            width: tabView.width
            height: tabView.height
            color: "green"
        }

        // Tab 3
        Rectangle {
            width: tabView.width
            height: tabView.height
            color: "orange"
        }

        // Tab 2
        Rectangle {
            width: tabView.width
            height: tabView.height
            color: "purple"
        }
    }
}
mhammerc commented 9 years ago

thank you a lot, i close the issue :)