3. Problem with tab

Problem with tab

  • L

    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>
    0

  • 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.

    0