Problem with tab



  • hi there, i have problem in tab ,
    if i use two tab in one page main tab fixed in bottom also sub tab to fixed in bottom.i need sub tab in top, main tab in bottom in here i have to attached code.
    i expect possible reply.

    <template>
      <!--main tab-->
      <q-tabs class="tab1">
        <q-tab count="5" slot="title" name="a" icon="message" />
        <q-tab slot="title" name="b" icon="accessibility" />
        <q-tab slot="title" name="c" icon="build" />
        <q-tab-pane name="a">
          <!--sub tab -->
          <q-tabs class="tab2">
            <q-tab default count="5" slot="title" name="x" icon="fa-id-card" />
            <q-tab  slot="title" name="y" icon="ion-heart" />
            <q-tab alert slot="title" name="z" icon="account_box" />
            <q-tab-pane name="x">sub Tab One</q-tab-pane>
            <q-tab-pane name="y">sub Tab Two</q-tab-pane>
            <q-tab-pane name="z">sub Tab Three</q-tab-pane>
          </q-tabs>
        </q-tab-pane>
        <q-tab-pane name="b">main Tab Two</q-tab-pane>
        <q-tab-pane name="c">main Tab Three</q-tab-pane>
      </q-tabs>
    </template>
    <style lang="stylus">
    .tab1 .q-tabs-head
    position absolute
    width 100%
    bottom 0
    </style>
    


  • Hello

    You can format code by wrapping is in three back-ticks ```

    Regarding your question: is is feasible to place the tab1 group in the footer?

    if not, your best bet is to use the flex classes

    Note that using q-route-tab will give you more flexibility than using q-tab-pane, and is the recommended approach if you have a lot of content.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.