Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Problem with tab

    Help
    2
    2
    553
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • L
      LT luxsan last edited by benoitranque

      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>
      
      1 Reply Last reply Reply Quote 0
      • benoitranque
        benoitranque last edited by

        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.

        1 Reply Last reply Reply Quote 0
        • First post
          Last post