Tabsview example and the examples projects in general

Hi,
i was looking for an example of TabsView as used in Dialer, but found nothing then to inspect the qml code on phone itself.
the component gallery does not contain it …
can you point me to some github repo that has an example ?

btw. is the component gallery open source ? i mean, can one contribute and add an example ?

btw.
it seems that TabView is part of: Sailfish.Silica.private 1.0

for what good reason is that ?! why private ?

2 Likes

Ok, here goes the example: (for the sake of length i have kicked out the copyright)

import QtQuick 2.0
import Sailfish.Silica 1.0
import Sailfish.Silica.private 1.0

Page  {
    id: tabsPage
    anchors.fill: parent
    TabView {
        id: tabs
        anchors.fill: parent

        header: Column {
            width: parent.width

            TabButtonRow {
                Repeater {
                    model: [
                        qsTrId("tab1"),
                        QsTrId("tab2"),
                        qsTrId("tab3")
                    ]

                    TabButton {
                        onClicked: tabs.moveTo(model.index)

                        title: modelData
                        tabIndex: model.index
                    }
                }
            }
        }

        model: [tab1View, tab2View, tab3View]
        Component {
            id: tab1View
            TabItem {
                Label {
                    text: "tab1"
                }
            }
        }
        Component {
            id: tab2View
            TabItem {
                Label {
                    text: "tab2"
                }
            }
        }
        Component {
            id: tab3View
            TabItem {
                Label {
                    text: "tab3"
                }
            }
        } 
    }
}

One thing to mention:
Most of the time you want to fill the tabs with other components located in other files. in my case i had 4 pages for it (Page). These would not should on UI until i did change them to from Page { … } to SilicaListView {…}

2 Likes

You can use this way from my application. It is not prohibited in official store

thanks, but this is not a tab but a collapsing, grouped list.

in my app i have implemented a corousel, similar to windows metro, where the last swipe would bring you back to first page.
the new tab is behaving the same way, it goes in circle …
so i did switch from my old implementation to the tabview.

I refactored the tab bar used in Piepmatz and Wunderfitz into a stand-alone component. Maybe you would like to use it as long as Silica’s TabBar is still a private component? You can find the code here: https://github.com/ichthyosaurus/sf-docked-tab-bar

(I didn’t have the time for proper documentation yet. You can see here how to use it: https://github.com/ichthyosaurus/harbour-wunderfitz/blob/some-refactoring/qml/harbour-wunderfitz.qml and …/pages/TitlePage.qml)

3 Likes

thanks ! will give it a try

have checked it in piepmatz: looks nice !

Enjoy, it’s dead simple. We will make nice component about it with @ichthyosaurus soon I believe

Hi, brought that in. looks nice ! and works in landscape too :slight_smile:

Nice, glad you like it :)!

Yes, that was a big priority for me; I don’t like apps that restrict the orientation so I try to do better in mine. :slight_smile: