Has anyone tried to use QTab, QTabs and QTabPanel from Quasar?

[scepeda78]

Has anyone tried to use QTab, QTabs and QTabPanel from Quasar?, I'm having issues to put the content inside of the tabs... Someone has an example of that?

[elimintz]

QTabPanels is not supported https://justpy.io/quasar_tutorial/not_working/

QTabs and QTab work.

[scepeda78]

Hi thanks for the quick answer!! I was not able to find examples with QTab and QTabs. I know QTabPanels is not working but QTabPanel works!! The problem is that I cannot find examples of putting content inside of tabs... El jue., 4 mar. 2021 11:45, elimintz <notifications@github.com> escribió:

…

QTabPanels is not supported https://justpy.io/quasar_tutorial/not_working/ QTabs and QTab work. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#231 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEM47OBC7KJ4Z63I57KOMBLTB6MIFANCNFSM4YS6RNLQ> .

[matthoendorf]

Here is an example:

import justpy as jp

def qtab_click(self, msg):
    """function runs when user clicks a QTab"""
    # do something here
    print(f'tab name={self.value} was clicked')

def main():
    wp = jp.QuasarPage()

    # create tabs
    tabs = jp.QTabs(a=wp, classes='text-white shadow-2 q-mb-md', style="background-color: #00305e;", 
                    align='justify', narrow_indicator=True, dense=True)
    tab1 = jp.QTab(a=tabs, name='tab_1', label='Tab 1')
    tab2 = jp.QTab(a=tabs, name='tab_2', label='Tab 2')
    tab3 = jp.QTab(a=tabs, name='tab_3', label='Tab 3')
    tabs.on('input', qtab_click)

    return wp

jp.justpy(main)

[Lefort-Antoine]

Hy,
Thanks for this example.
Do you know how to create vertical tabs ?
Regards

[matthoendorf]

@Lefort-Antoine I don't know if this will work, but try adding vertical=True as an attribute, i.e.:

    tabs = jp.QTabs(a=wp, classes='text-white shadow-2 q-mb-md', style="background-color: #00305e;", 
                    align='justify', narrow_indicator=True, dense=True, vertical=True)

I base that on the example here: https://quasar.dev/vue-components/tabs#vertical

If that doesn't work, the next thing I would try is parsing the HTML:

vertical_tab_example_html = """
<q-tabs
  v-model="tab"
  vertical
  class="text-teal"
>
  <q-tab name="mails" icon="mail" label="Mails" />
  <q-tab name="alarms" icon="alarm" label="Alarms" />
  <q-tab name="movies" icon="movie" label="Movies" />
</q-tabs>
"""
tabs = jp.parse_html(vertical_tab_example_html, a=wp)

Again, I haven't tested this code so it might require some fiddling.

[Lefort-Antoine]

Thanks for help