Widgets with f7-tabs, f7-toolbar numbering of the tabs

Setup, Configuration and Use Widgets
1

Hi,

i am using the SemanticHomeMenu from hmerk and NicoR and currently have two Widgets that make use of f7-tabs with f7-toolbar.
I stumpled over the fact that numbering of the tabs can’t be identical in both widgets.
I first numbered the tabs in both widgets from tab1 .. tab5 what made the activestate and highlighting of the tabs in one of the widgets non-functional.
Changing the numbering (widget1: tab1 .. tab5, widget2: taba .. tabe) solved the problem.

Don’t know if this should be like this.
At least i wasn’t able to find mentioning about this fact in the documention.

Greetings
Stephan Sandmann

2

Without an example of your widget configuration it’s difficult to say exactly what you mean by “numbering of the tabs”. I’m going to guess, however, that you mean using id or class attributes to identify each of your tabs.

To the best of my knowledge, there is no enforced relationship between a tabbar and the tabs themselves in the f7 system. The way that any single tabbar button is connected to the correct tab is with a basic css selector. This is the value you are putting into the tab-link property of the f7-link that makes the tab button. If you are following the examples in the f7 docs, then you are using something like tab-link: "#tab1". In css, the # selector finds an element based on that element’s id, so for that button to be associated with a tab that tab needs to have id: tab1 as one of its config parameters.

If this is what you are doing, then the restriction you have come up against is a basic HTML restriction, not something in F7 of OH. On an HTML page no two elements can have the same id attribute, these must be unique:

When you are including two different widgets into one parent widget, all the resulting HTML winds up as part of the same page, so this is the reason that you cannot give the tabs in your two widgets the same ids.

Because the tab links are just using css selectors, there are many options beside use of the id selector, but in any case you always want that selector to specify a single element or your button may find the incorrect element as it’s tab target giving you unspecified behavior. So, best practice is always going to be exactly what you finally decided upon: always give your tabs completely unique id values.

3

Hi Justin,

you guessed right, thats exactly what i meant.

          - component: f7-tabs
            slots:
              default:
                - component: f7-page-content
                  config:
                    class:
                      - no-padding
                    id: taba
                    style:
                      height: 270px
                    tab: true
                    tabActive: true

I already changed the id’s to be unique, it might still be useful to point out in the documentation that the IDs for the tabs must be unique when using multiple tabbars on a page.

Thanks in any case for the quick help and clarification as to why this is the case.

Stephan