Tabs positions to fix and fix center



  • Hello, i would like to use this template
    from :https://quasar.dev/vue-components/tab-panels#Example--A-more-complex-example
    I have some difficulties to define the position as fix for the horizontal top tabs
    and fix center for the vertical left tabs.

    If someone could help me, it would be fantastic. Thank you !!

    <template>
      <div class="q-pa-md" style="max-width: 600px">
        <q-card>
          <q-tabs
            v-model="tab"
            dense
            class="text-grey"
            active-color="primary"
            indicator-color="primary"
            align="justify"
          >
            <q-tab name="mails" label="Mails" />
            <q-tab name="alarms" label="Alarms" />
            <q-tab name="movies" label="Movies" />
          </q-tabs>
    
          <q-separator />
    
          <q-tab-panels v-model="tab" animated>
            <q-tab-panel name="mails" class="q-pa-none">
    
              <q-splitter
                v-model="splitterModel"
                style="height: 250px"
              >
    
                <template v-slot:before>
                  <q-tabs
                    v-model="innerTab"
                    vertical
                    class="text-teal"
                  >
                    <q-tab name="innerMails" icon="mail" label="Mails" />
                    <q-tab name="innerAlarms" icon="alarm" label="Alarms" />
                    <q-tab name="innerMovies" icon="movie" label="Movies" />
                  </q-tabs>
                </template>
    
                <template v-slot:after>
                  <q-tab-panels
                    v-model="innerTab"
                    animated
                    transition-prev="slide-down"
                    transition-next="slide-up"
                  >
                    <q-tab-panel name="innerMails">
                      <div class="text-h4 q-mb-md">Mails</div>
                      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
                      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
                    </q-tab-panel>
    
                    <q-tab-panel name="innerAlarms">
                      <div class="text-h4 q-mb-md">Alarms</div>
                      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
                      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
                    </q-tab-panel>
    
                    <q-tab-panel name="innerMovies">
                      <div class="text-h4 q-mb-md">Movies</div>
                      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
                      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
                      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
                    </q-tab-panel>
                  </q-tab-panels>
                </template>
    
              </q-splitter>
            </q-tab-panel>
    
            <q-tab-panel name="alarms">
              <div class="text-h6">Alarms</div>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </q-tab-panel>
    
            <q-tab-panel name="movies">
              <div class="text-h6">Movies</div>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </q-tab-panel>
          </q-tab-panels>
        </q-card>
      </div>
    </template>```


  • @Fabien-k said in Tabs positions to fix and fix center:

    I have some difficulties to define the position as fix for the horizontal top tabs
    and fix center for the vertical left tabs.

    I don’t really understand what you mean…

    For people to help and understand your problem, it’s best to create a codepen.io ( very simple by extending one of quasar’s example codepens) to demonstrate your problem.


Log in to reply