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 tabs#

tabs-0

q.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 values#

Use the value attribute to control the preselected state of the tabs. If not specified, the first tab is selected by default.

tabs-1

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 icons#

Polish your tabs with icons, it's simple!

tabs-2

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 links#

If you prefer textual look over default buttons, use the link attribute.

tabs-3

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'),    ])])