Tabsview example and the examples projects in general

Applications
#1

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 ?

4 Likes
#2

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
#3

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

#4

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.

#5

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
Improving SFOS apps design and helping with design
#6

thanks ! will give it a try

have checked it in piepmatz: looks nice !

#7

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

#8

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

#9

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:

#10

Is still someone planning to release a generic library component of this?

I am currently experimenting with replacing the navigation in podqast: qml/pages/MainCarousel.qml · 445ec8f19a783806b2b4d7ba34374f67377e44b5 · Cy8aer / podqast · GitLab

My implementation is mainly suited for switching qml pages (which are no pages anymore)
There could still go some work into making it more generic regarding tabheader placement

#11

I still.use tabs.in sailkick and will so

in olive i did remove them

i.did use copy paste, a lib build.in chum would be nice …