I have a test on Tabs and SubTabs, with vertical=True as below:
app.layout = html.Div([
html.H1(‘Dash Tabs component demo’),
dcc.Tabs(id=“tabs”,vertical=True, value=‘tabA’, children=[
dcc.Tab(label=‘Tab_A’, value=‘tabA’,
children=[dcc.Tabs(id=“subtabsA”, vertical=True, value=“subtabA”,
children = [dcc.Tab(label=‘SubTab_A.1’, value=“subtabA”),
dcc.Tab(label=‘SubTab_A.2’, value=“subtabA”),
dcc.Tab(label=‘SubTab_A.3’, value=“subtabA”)
])
]
),
dcc.Tab(label=‘Tab_B’, value=‘tabB’,
children=[dcc.Tabs(id=“subtabsB”, vertical=True, value=“subtabB”,
children = [dcc.Tab(label=‘SubTab_B.1’, value=“subtabB”),
dcc.Tab(label=‘SubTab_B.2’, value=“subtabB”)
])
]
),
dcc.Tab(label=‘Tab_C’, value=‘tabC’),
]),
html.Div(id=‘tabs-content’)
])
Everything is working fine, but the UI looks odd to me. See
I expect that the SubTabs would be hidden directly underneath its main Tab, as what Shiny Server is able to achieve as seen below:
How can my code be modified such that it is able to achieve as what Shiny Server can do?
Thanks.