Tabs
Use this component when you want to navigate between multiple groups of related content.
The name
attribute indicates how to reference this component in the query arguments: q.args.<name-attr>
.
You can see the API for ui.tabs or check the interactive example in Tour app.
#
Basic tabsq.page['example'] = ui.form_card(box='1 1 2 2', items=[ ui.tabs(name='tabs', items=[ ui.tab(name='tab1', label='Tab 1'), ui.tab(name='tab2', label='Tab 2'), ui.tab(name='tab3', label='Tab 3'), ])])
#
Setting initial valuesUse the value
attribute to control the preselected state of the tabs. If not specified,
the first tab is selected by default.
q.page['example'] = ui.form_card(box='1 1 2 2', items=[ ui.tabs(name='tabs', value='tab2', items=[ ui.tab(name='tab1', label='Tab 1'), ui.tab(name='tab2', label='Tab 2'), ui.tab(name='tab3', label='Tab 3'), ])])
#
With iconsPolish your tabs with icons, it's simple!
q.page['example'] = ui.form_card(box='1 1 2 2', items=[ ui.tabs(name='tabs', items=[ ui.tab(name='tab1', label='Tab 1', icon='Home'), ui.tab(name='tab2', label='Tab 2', icon='Heart'), ui.tab(name='tab3', label='Tab 3', icon='Cake'), ])])
#
With linksIf you prefer textual look over default buttons, use the link
attribute.
q.page['example'] = ui.form_card(box='1 1 2 2', items=[ ui.tabs(name='tabs', value='tab1', link=True, items=[ ui.tab(name='tab1', label='Tab 1', icon='Home'), ui.tab(name='tab2', label='Tab 2', icon='Heart'), ui.tab(name='tab3', label='Tab 3', icon='Cake'), ])])