Use of Tab menu

[Jorge-Monzon-Electroingenium]

Hi all!

First of all, I'm pretty new in trame. I've just discovered it last week and it looks amazing.

I would like to make a gui with a tabbed menu. In this gui, I would like to display different content depending on the tab selected. I have looked at different examples and found the router example (link) which I think is very close to what I am looking for. However, I am not able to get the result I would like as I cannot display the widgets below the tabs.

Here is the code:
`

      from trame.app import get_server
      from trame.ui.vuetify import VAppLayout, SinglePageLayout
      from trame.ui.router import RouterViewLayout
      from trame.widgets import vtk, vuetify, router

      from vtkmodules.vtkFiltersSources import vtkConeSource
      from vtkmodules.vtkRenderingCore import (
          vtkActor,
          vtkPolyDataMapper,
          vtkRenderer,
          vtkRenderWindow,
          vtkRenderWindowInteractor,
      )
      
      from vtkmodules.vtkInteractionStyle import vtkInteractorStyleSwitch  # noqa
      
      renderer = vtkRenderer()
      renderWindow = vtkRenderWindow()
      renderWindow.AddRenderer(renderer)
      
      renderWindowInteractor = vtkRenderWindowInteractor()
      renderWindowInteractor.SetRenderWindow(renderWindow)
      renderWindowInteractor.GetInteractorStyle().SetCurrentStyleToTrackballCamera()
      
      cone_source = vtkConeSource()
      mapper = vtkPolyDataMapper()
      mapper.SetInputConnection(cone_source.GetOutputPort())
      actor = vtkActor()
      actor.SetMapper(mapper)
      
      renderer.AddActor(actor)
      renderer.ResetCamera()
      
      server = get_server(client_type="vue2")
      state, ctrl = server.state, server.controller 
      
      with RouterViewLayout(server, "/"):
          with vuetify.VCard():
              vuetify.VCardTitle("This is home")
      
      with RouterViewLayout(server, "/uno"):
          with vuetify.VCard():
              vuetify.VCardTitle("This is uno")
      
      with RouterViewLayout(server, "/dos"):
          with vuetify.VCard():
              vuetify.VCardTitle("This is dos")
      
      with RouterViewLayout(server, "/tres"):
          with vuetify.VCard():
              vuetify.VCardTitle("This is dos")
      
      with VAppLayout(server) as layout:
      
          with layout.root:
              with vuetify.VTabs(centered=True, value="tab", grow=True, to="/uno"):
      
                  with vuetify.VTab(value="uno", tag="uno"): #, to="/uno"
                      vuetify.VCardText("Tab n1")
      
                  with vuetify.VTab(value="dos", tag="dos", tab_value="dos", to="/dos"):
                      vuetify.VTabItem(value="dos", to="dos")
                      vuetify.VCardText("Tab n2")
      
                  with vuetify.VTab(to="/tres"):
                      vuetify.VCardText("Tab n3")
                      vuetify.VTabItem
         
      
              #with vuetify.VCard(value="uno"):
              #    view = vtk.VtkLocalView(renderWindow)
              #    ctrl.on_server_ready.add(view.update)
                              
              #with vuetify.VContainer(
              #    fluid=True,
              #    classes="pa-0 fill-height",
              #):
              #    view = vtk.VtkLocalView(renderWindow)
      
      if __name__ == "__main__":
          server.start()`

And this it what it shows:

I am sure this is easy to fix, but I am not able to find the key to solve it.

Thank you very much in advanced, any help would be aprecciated!
Greetings,

[jourdain]

You are just missing the part where you need to place where to place the router content.
Keep the top as you had.

with VAppLayout(server) as layout:      
    with vuetify.VTabs(centered=True, value="tab", grow=True, to="/uno"):
        with vuetify.VTab(value="uno", tag="uno"): #, to="/uno"
            vuetify.VCardText("Tab n1")
    
        with vuetify.VTab(value="dos", tag="dos", tab_value="dos", to="/dos"):
            vuetify.VCardText("Tab n2")
    
        with vuetify.VTab(to="/tres"):
            vuetify.VCardText("Tab n3")
         
    with vuetify.VContainer():
        router.RouterView()

[Jorge-Monzon-Electroingenium]

Thank you very much for your help @jourdain! Now It works perfect for me