Tabs don't align-left in vertical Q-Tabs (Solved)



  • Hi

    I’m working on this:

    quasar_qtabs_vertigal_left-align.png

    And would like the q-tabs to left-align (i.e. the icons are aligned on the left). How do I achieve this?

    This does not seem to do the trick:

          <q-tabs
              v-model="selectedTab"
              vertical
              dense
              align="left"
              inline-label
              class="text-blue-grey-9"
            >
    

    Cheers,
    Michael



  • Is this what you are trying to achieve?

    https://quasar.dev/layout/drawer#Example--Mini-mode-with-click-trigger

    Scott



  • @s-molinari

    Yep, exactly. Is that doable with q-tabs?

    M.





  • @s-molinari

    I actually based my code on that example. The difference is that i want the icons to be inline and left-aligned. The example is centered.

    M.



  • Someone with a bit more design experience will need to step in. I’m at a loss.

    Scott





  • @metalsadman

    That’s actually exactly what I want. I tried to adapt it to my case but I struggle a bit with how to apply the css. The example seems to apply it globally (i.e. it affects the whole UI).

    Here’s what I came up with so far:

    <template>
      <q-page class="flex flex-start">
      <div>
        <q-splitter v-model="splitterModel"
          style="height: 100%"
        >
          <template v-slot:before >
            <q-tabs
              v-model="selectedTab"
              vertical
              dense
              inline-label
              class="text-blue-grey-9"
             >
    
              <q-tab name="myAccount" icon="account_box" label="My Account" />
              <q-tab name="appearance" icon="palette" label="Appearance" />
              <q-tab name="ive" icon="visibility" label="IVE" />
            </q-tabs>
          </template>
    
          <template v-slot:after>
            <q-tab-panels
              v-model="selectedTab"
              animated
              transition-prev="jump-up"
              transition-next="jump-up"
            >
              <q-tab-panel name="myAccount">
                <div class="text-h5 q-mb-md">MY ACCOUNT</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="appearance">
                <div class="text-h5 q-mb-md">APPEARANCE</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="ive">
                <div class="text-h5 q-mb-md">Intelligent Virtual Entities</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>
      </div>
      </q-page>
    </template>
    
    <script>
    export default {
      name: 'Settings',
      data () {
        return {
          selectedTab: 'myAccount',
          splitterModel: 20 // start at 20%
        }
      }
    
    }
    </script>
    
    <style lang="scss">
      .tabs-align-left {justify-content: initial;}
    </style>
    

    I’m not sure, though how and where to apply it…

    Cheers,
    m.



  • @mboeni put it in your component’s style tags with scope. ie. <style scoped>...</style>.



  • @metalsadman

    Got it. It worked like this:

    <q-tab name="myAccount" icon="account_box" label="My Account" style="justify-content:initial" />
    <q-tab name="appearance" icon="palette" label="Appearance" style="justify-content:initial"/>
    <q-tab name="ive" icon="visibility" label="IVE" style="justify-content:initial" />
    

    Thanks for your help 🙂


Log in to reply