"Tabbed page" tab height and font size configuration

Setup, Configuration and Use Items & Sitemaps
,
1

I use the so called “tabbed page” as starting page for a GUI on a 10" full HD screen (portrait mode)

The tabs are considered the ‘primary’ navigation controls for the different sections.
Unfortunately the tab bar and text are quite small. Is there way to configure the height of the
tab-bar and font/icon size of the tabs ?

2

From the tabbed page wizard, I actually don’t think that there is any way to do this. You would have to build your own tabs/tab-bar on a layout page or a widget.

The basic structure using the f7 tabbar could look something like this:

component: f7-page
config:
  style:
    padding: 0
  tabs: true
slots:
  fixed:
    - component: f7-tabs
      slots:
        default:
          - component: f7-page-content
            config:
              id: tab1
              tab: true
              tabActive: true
            slots:
              default:
                #Tab 1 content goes here <---
          - component: f7-page-content
            config:
              id: tab2
              tab: true
            slots:
              default:
                #Tab 2 content goes here <---
    - component: f7-toolbar
      config:
        bottom: true
        tabbar: true
      slots:
        default:
          - component: f7-link
            config:
              tabLink: "#tab1"
              tabLinkActive: true
              text: "Tab #1"
          - component: f7-link
            config:
              tabLink: "#tab2"
              text: "Tab #2"

With that you could then add any styling you want to each tab. For example, to make the text larger:

          - component: f7-link
            config:
              tabLink: "#tab1"
              tabLinkActive: true
              text: "Tab #1"
              style:
                font-size: 36px
3

Thanks I will give it a try. One question. The current tabbed page inserts the content of other pages. Would that be possible here as well ?

4

Not explicitly, but anything you can display on a page, you can also build in a custom widget. So, if you want to go this route, then you can just mock up your page with the page editor, switch over the the code tab and paste that code into the widget.

Then you just have another page and the only widget you put on that page is this big tabbed widget.

It’s not a perfect system, but it might be your best option.

I think the main issue that your dealing with is that because you’re running your small screen off what is technically not a mobile device, the f7 library is using the styles desktop optimized styles. You could also see if changing the user agent info in the browser to simulate a mobile device would get you a better set of default styles without having to build everything yourself.