F7-Tabs

Add-ons UIs
1

Does anybody have a working example of f7-tabs? It doesn’t matter if it’s on page or card level. I set up this yaml code as a starting point for discussion:

- component: f7-tabs
  config:
    id: tabs
  slots:
    default:
      - component: oh-block
        slots:
          default:
            - component: f7-tab
              config:
                id: tab1
                tabActive: true
              slots:
                default:
                  - component: oh-block
                    slots:
                      default:
                        - component: Label
                          config:
                            text: Test Tab1
            - component: f7-tab
              config:
                id: tab2
                tabActive: false
              slots:
                default:
                  - component: oh-block
                    slots:
                      default:
                        - component: Label
                          config:
                            text: Test Tab2

I was expecting to get a tab frame which I could control (activate a tab) by settig its property tabActive to true.

btw, I do not mean a “tabbed page” when creating a new page layout.

2

I think one of the problems you may be having is trying to use the oh-block components. The tabs work just fine without them.

uid: widget_tab_demo
component: f7-card
config:
  title: Tab Demo
slots:
  default:
    - component: f7-tabs
      config:
        id: tabs
      slots:
        default:
          - component: f7-tab
            config:
              id: tab1
              tabActive: true
            slots:
              default:
                - component: Label
                  config:
                    text: Test Tab1
          - component: f7-tab
            config:
              id: tab2
              tabActive: false
            slots:
              default:
                - component: Label
                  config:
                    text: Test Tab2
    - component: f7-toolbar
      config:
        tabbar: true
        bottom: true
      slots:
        default:
          - component: f7-link
            config:
              tabLink: "#tab1"
              text: "Tab #1"
              tabLinkActive: true
          - component: f7-link
            config:
              tabLink: "#tab2"
              text: "Tab #2"

image

image

1 Like
3

wow - great. many thanks Justin!
I didn’t put the tabs into an f7-card element. now it works just fine.